hexawing
hexawing
2009-11-25 19:39

Ext的combotree取值value问题

已采纳

有这样一个combotree:
[code="javascript"]
items: [{
xtype: 'combotree',
fieldLabel: '推荐产品',
id: 'recommend_product',
name: 'product',
hiddenName: 'recommend_product',
blankText: '必须选择一款产品!',
emptyText: '请选择产品……',
autoHeight: true,
resizable: true,
tree: new Ext.tree.TreePanel({
rootVisible: false,
hideBorders: true,
border: false,
root: new Ext.tree.AsyncTreeNode({

id: 'CategoryRoot',

text: "",

loader: new Ext.tree.TreeLoader({
dataUrl: '/product/show_product_by_type_tree/tree.json',
requestMethod: 'GET',
preloadChildren: false,
clearOnLoad: false,
})
})
}),
anchor: '90%',
allowBlank: false

}]

[/code]
我想取出它的选中项的Value(不是text)的话,应该怎么做啊?是在后台还是前台啊?完全没有头绪的说……
[b]问题补充:[/b]
呃……我用的是这样一个文件,貌似里面没有setValue和getValue的方法?
唉,哪怕有个API看看也好啊 :?
[code="javascript"]
/**

  • 下拉树ComboBoxTree
  • @extend Ext.form.ComboBox
  • @xtype 'combotree'

  • @author chengbao_zhu
    */

/**

  • ----------------------
  • Demo ComboBoxTree

  • /

    /
    -------------------------------------------------*

    treecombo = {

    fieldLabel : '片    源    类    别',  
    width : 127,  
    xtype : 'combotree',  
    passName : 'videoCategory',  
    allowUnLeafClick : false,  
    treeHeight:200,  
    tree : new Ext.tree.TreePanel({  
        rootVisible : false,  
        root : new Ext.tree.AsyncTreeNode({  
            id : 'CategoryRoot',  
            text : "影片分类",  
            expanded : true,  
            loader : new Ext.tree.TreeLoader({  
                dataUrl : UrlPpts.ajax.vdocategory + '?method=tree'  
            })  
        })  
    }),  
    allowBlank : false  
    

    }

    -----------------------------------------------------/

ComboBoxTree = Ext.extend(Ext.form.ComboBox, {

/**  
 * -------------------------------------   
 * 作为隐藏域的name属性  
 * -------------------------------------  
 */  
passName : 'id',   

/**  
 * -------------------------------------   
 * 是否允许非叶子结点的单击事件  
 *   
 * @default false   
 * -------------------------------------  
 */  
allowUnLeafClick : true,   

/**  
 * ---------------------   
 * 树渲染的模板tpl   
 * ---------------------  
 */  
// tpl: '<div id="treeTpl"></div>', //html代码   
/**  
 * -----------------------  
 * 树显示的高度,默认为180  
 * -----------------------  
 */  
treeHeight : 180,   

store : new Ext.data.SimpleStore({   
    fields : [],   
    data : [[]]   
}),   

//Default   

editable : false, // 禁止手写及联想功能   
mode : 'local',   
triggerAction : 'all',   
maxHeight : 500,   
selectedClass : '',   
onSelect : Ext.emptyFn,   
emptyText : '请选择...',   

/**  

 * 清空值  
 */  
clearValue : function() {   
    if (this.passField) {   
        this.passField.value = '';   
    }   

    this.setRawValue('');   
},   

/**  

 * 设置传值  
 * @param passvalue  
 */  
setPassValue: function(passvalue){   
    if (this.passField)   
        this.passField.value = passvalue;   
},   

/**  
 * --------------------------------------   
 * 下拉树被点击事件添加一处理方法  
 * @param node  
 * --------------------------------------  
 */  
onTreeSelected : function(node) {   

},   

/**  
 * ----------------------------------   
 * 树的单击事件处理  
 * @param node,event  
 * ----------------------------------  
 */  
treeClk : function(node, e) {   
    if (!node.isLeaf() && !this.allowUnLeafClick) {   

        e.stopEvent();// 非叶子节点则不触发   
        return;   
    }   
    this.setValue(node.text);// 设置option值   
    this.collapse();// 隐藏option列表   

    if (this.passField)   
        this.passField.value = node.id;// 以树的节点ID传递   


    // 选中树节点后的触发事件   
    this.fireEvent('treeselected', node);   

},   

/**  

 * 初始化  
 * Init  
 */  
initComponent : function() {   
    ComboBoxTree.superclass.initComponent.call(this);   
    this.tree.autoScroll = true;   
    //this.tree.height = this.treeHeight;   
    this.tree.containerScroll = false;   
    this.tplId = Ext.id();   
    // overflow:auto"   
    this.tpl = '<div id="' + this.tplId + '" style="height:' + this.treeHeight   
            + 'px";overflow:hidden;"></div>';   

    /**  
     * -----------------------   
     * 添加treeselected事件,  
     * 选中树节点会激发这个事  

     * 件, 参数为树的节点  
     * ------------------------  
     */  
    this.addEvents('treeselected');   
    // this.on('treeselected',this.onTreeSelected,this);   
},   

/**  
 * ------------------  

 * 事件监听器   
 * Listener  
 * ------------------  
 */  
listeners : {   
    'expand' : {   
        fn : function() {   
            if (!this.tree.rendered && this.tplId) {   

                this.tree.render(this.tplId);   

            }   
            this.tree.show();   
        },   
        single : true  
    },   

    'render' : {   
        fn : function() {   

            this.tree.on('click', this.treeClk, this);   

            /**  
             * -------------------------------------------   

             * 创建隐藏输入域<input />  
             * 并将其dom传给passField   
             * ------------------------------------------  
             */  
            if (this.passName) {   
                this.passField = this.getEl().insertSibling({   
                    tag : 'input',   
                    type : 'hidden',   
                    name : this.passName,   
                    id : this.passId || Ext.id()   
                }, 'before', true)   
            }   

            this.passField.value = this.passValue !== undefined   
                    ? this.passValue   
                    : (this.value !== undefined ? this.value : '');   

            this.el.dom.removeAttribute('name');   
        }   
    },   
    'beforedestroy' : {   
        fn : function(cmp) {   
            this.purgeListeners();   
            this.tree.purgeListeners();   
        }   
    }   
}   

});

/**

  • ---------------------------------
  • 将ComboBoxTree注册为Ext的组件,以便使用
  • Ext的延迟渲染机制,xtype:'combotree'
  • ---------------------------------
    */
    Ext.reg('combotree', ComboBoxTree); [/code] [b]问题补充:[/b] 用了selectText,结果弹出来的是这样的精简过的代码(直接复制的,就不贴图了,其实是个alert框的): [code=""] --------------------------- Microsoft Internet Explorer --------------------------- function(h,a){var c=this.getRawValue();var e=false;if(c.length>0){h=h===undefined?0:h;a=a===undefined?c.length:a;var g=this.el.dom;if(g.setSelectionRange){g.setSelectionRange(h,a)}else{if(g.createTextRange){var b=g.createTextRange();b.moveStart("character",h);b.moveEnd("character",a-c.length);b.select()}}e=Ext.isGecko||Ext.isOpera}else{e=true}if(e){this.focus()}} --------------------------- 确定
    --------------------------- [/code] [b]问题补充:[/b] 汗,昨天半夜晕乎乎地,跑去alert…… 我是要它的“value”呢,就是1,2这样的数字,但是用了combotree之后,再调用它的value,出来的也还是汉字的名称而不是数字…… [code="javascript"]Ext.getCmp("recommend_product").selectText(0,3);[/code]这样只是把它的文字选中而已啊 [b]问题补充:[/b] 呃,getValue()和getRawValue()出来的,也变成了汉字的名称,这个combotree是不是把这些都一股脑儿接管了啊…… [b]问题补充:[/b] @蔡华江: 我最开始用到的就是您提供的那个控件,但它有一个让我束手无策的问题:失去焦点时会自己把值清空,后来没办法才用的我发的那个版本的。 不知您是用什么方法来避免“失去焦点时清空值”这一问题的呢? [b]问题补充:[/b] [code="javascript"]items: [{ xtype: 'combotree', fieldLabel: '推荐产品', id: 'recommend_product', name: 'module', hiddenName: 'question.module', blankText: '必须选择一款产品!', emptyText: '请选择产品……', autoHeight: true, resizable: true, tree: product_tree, anchor: '90%', allowBlank: false
    }] [/code] 我是这么调用的,然后就有取不回值的问题。 不知道您方便把您的代码给我一份吗?我的信箱hexawing#163.com,先谢谢了!
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • CaiHuajiang CaiHuajiang 12年前

    [code="js"] var flfl_tc = new Ext.flyy.TreeComboBox({
    name : "flflId",
    xtype : "treecombo",
    allowBlank : false,
    fieldLabel : "\u6cd5\u5f8b\u5206\u7c7b",
    listWidth : 200,
    tree : {
    xtype : "treepanel",
    border : false,
    rootVisible : true,
    root : new Ext.tree.AsyncTreeNode({
    text : "\u6cd5\u5f8b\u5206\u7c7b",
    listeners : {
    "click" : function(_node) {
    flfl_tc.setValue({
    text : "",
    value : ""
    });
    flfl_tc.collapse();
    }
    }
    }),
    listeners : {
    'beforeload' : function(_nodeA) {

                }
            }
        }
    });[/code]
    
    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 12年前

    [quote]不知您是用什么方法来避免“失去焦点时清空值”这一问题的呢?[/quote]
    有么,没有这个问题呀

    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 12年前

    你这个控件本身有问题
    this.setValue(node.text);// 设置option值
    可见value传进去的就是text,而不是value。

    下面是最常见的combotree,自己比较下区别

    [code="js"]Ext.ux.ComboBoxTree = function(){
    this.treeId = Ext.id()+'-tree';
    this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;
    this.tpl = new Ext.Template('

    ');
    this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});
    this.selectedClass = '';
    this.mode = 'local';
    this.triggerAction = 'all';
    this.onSelect = Ext.emptyFn;
    this.editable = false;

    //all:所有结点都可选中
    //exceptRoot:除根结点,其它结点都可选(默认)
    //folder:只有目录(非叶子和非根结点)可选
    //leaf:只有叶子结点可选
    this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';
    
    Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);
    

    }

    Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {

    expand : function(){
        Ext.ux.ComboBoxTree.superclass.expand.call(this);
        if(!this.tree.rendered){
            this.tree.height = this.maxHeight;
            this.tree.border=false;
            this.tree.autoScroll=true;
            if(this.tree.xtype){
                this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
            }
            this.tree.render(this.treeId);
            var  combox = this;
            this.tree.on('click',function(node){
                var isRoot = (node == combox.tree.getRootNode());
                var selModel = combox.selectNodeModel;
                var isLeaf = node.isLeaf();
                if(isRoot && selModel != 'all'){
                    return;
                }else if(selModel=='folder' && isLeaf){
                    return;
                }else if(selModel=='leaf' && !isLeaf){
                    return;
                }else if(node.id.indexOf('ajlx') > -1) {
                    return;
                }
                combox.setValue(node);
                combox.collapse();
            });
            this.tree.on('beforeload', function(node){ 
                combox.tree.loader.dataUrl='alActiongetAyList.action?ajlxId='+node.id+'&text='+encodeURI(node.text);
            }); 
            var root = this.tree.getRootNode();
            if(!root.isLoaded())
                root.reload();
        }
    },
    
    setValue : function(node){
        var text = node.text;
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = node.id;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = node.id;
    },
    
    getValue : function(){
        return typeof this.value != 'undefined' ? this.value : '';
    }
    

    });

    Ext.reg('combotree', Ext.ux.ComboBoxTree);[/code]

    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 12年前

    说错了:
    getRawValue()和getValue()

    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 12年前

    selectText 这是个方法,你不看API的?

    点赞 评论 复制链接分享
  • zhoujuan520 zhoujuan520 12年前

    肯定是前台拉. 你看吓combotree的源码,关于setValue getValue的两个方法

    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 12年前

    value
    selectText

    点赞 评论 复制链接分享

相关推荐