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