Extjs Combobox 里面带树

今天分享下如何实现Extjs4.0树形下拉框

 

1、效果图：

 

 

通过选择复选框，得到节点ID，

 

 

2、代码如下：

 

 

 

 

（1）自定义下拉树形选择框

 

Ext.define( "Ext.ux.comboboxtree", {
    extend : "Ext.form.field.Picker",
    requires : [ "Ext.tree.Panel"],
    alias : 'widget.combotree',
     "initComponent" : function () {
         var self = this;
        Ext.apply(self, {
            fieldLabel : self.fieldLabel,
            labelWidth : self.labelWidth,
            store : self.store
        });
        self.callParent();
    },
     "createPicker" : function () {
         var self = this;
         var store = this.store;
        self.picker = new Ext.tree.Panel({
            height : 250,
            autoScroll : true,
            floating : true,
            focusOnToFront : true,
            shadow : true,
            ownerCt : this.ownerCt,
            useArrows : true,
            store : store,
            rootVisible : false,
            resizable : true
        });
        self.picker.on({
             "itemdblclick" : function (combotree, rec) {
                self.picker.hide();
            },
             "itemclick" : function (combotree, rec) {
                 if (rec.get( 'checked')) {
                     if (self.rawValue == '') {

                        self.setValue(rec.get( 'id'));
                    }
                     else {
                        self.setValue(self.getValue() + ',' + rec.get( 'id'));
                    }
                }
                 else {

                    self.setValue(self.getValue().replace(rec.get( 'id') + ',', ''));
                    self.setValue(self.getValue().replace( ',' + rec.get( 'id'), ''));
                    self.setValue(self.getValue().replace(rec.get( 'id'), ''));
                     if (self.getValue().substring( 0, 1) == ',') {
                        self.setValue(self.getValue().substring( 1, self.getValue().length - 1));
                    }
                     if (self.getValue().substring(self.getValue().length - 1, self.getValue().length) == ',') {
                        self.setValue(self.getValue().substring( 0, self.getValue().length - 1));
                    }

                }


                 //我想在这里做点什么，以供调用此combotree的“外部”位置使用，但我不知道该怎么做……   

            }

        });
         return self.picker;
    },
     "alignPicker" : function () {
         var me = this, picker, isAbove, aboveSfx = '-above';
         if ( this.isExpanded) {
            picker = me.getPicker();
             if (me.matchFieldWidth) {
                picker.setWidth(me.bodyEl.getWidth());
            }
             if (picker.isFloating()) {
                picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl   
                isAbove = picker.el.getY() < me.inputEl.getY();
                me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
           + aboveSfx);
                picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
           + aboveSfx);
            }
        }
    }
});

 

 

（2）

使用方式

 

  

var examlibstore = Ext.create( 'Ext.data.TreeStore', {
        proxy : {
            type : 'ajax',
             //url: "Authority/GetAuthority",
            url : "http://www.cnblogs.com/ExamPaper/GetExamlibTree/",

            actionMethods : 'post'
        },
        sorters : [{
            property : 'leaf',
            direction : 'ASC'
        }, {
            property : 'text',
            direction : 'ASC'
        }]
    });

 

, {
fieldLabel : '題庫編號',
name : 'paraID',
id : 'paraID',
xtype : 'combotree',
store : examlibstore,
allowBlank : false,
blankText : "題庫編號不能为空"
}

 

examlibstore所需的json

jsons:

 

 

[{ text: "題庫管理" ,id:"EXAMLIB0000001" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "前線題庫" ,id:"EXAMLIB0000002" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "G01前線題庫" ,id:"EXAMLIB0000005" ,checked: false ,leaf: true},{ text: "Q01前線題庫" ,id:"EXAMLIB0000006" ,checked: false ,leaf: true}]},{ text: "作服題庫" ,id:"EXAMLIB0000003" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "MyExamLib" ,id:"EXAMLIB0000012" ,checked: false ,leaf: true}]},{ text: "後勤題庫" ,id:"EXAMLIB0000004" ,checked: false ,leaf: true},{ text: "test-2" ,id:"EXAMLIB0000007" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "fwe-1" ,id:"EXAMLIB0000010" ,checked: false ,leaf: true}]},{ text: "test2" ,id:"EXAMLIB0000009" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "222" ,id:"EXAMLIB0000011" ,checked: false ,leaf: true}]}]}]

 

 

 

OK 介绍完毕，不懂的可以给我留言，或者mail给我  yehui1989@qq.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Published by WizNote

转载于:https://www.cnblogs.com/zuifengke/archive/2012/07/05/d3da580c72a276814253ae478f239d46.html