EXTjS4下拉树 支持单选多选级联选择 comboxtree

     初学EXTjS,代码参照了很多帖,忙活了一天,代码写的比较简单,容易看懂.

   本下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!

效果图.

• 不带checked的json数据格式只支持单选

• 带jchecked的json数据的单选

• 带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

封装基类代码

:comboxtree.js

Ext.define("Ext.ux.comboboxtree", {    extend: "Ext.form.field.Picker",    requires: ["Ext.tree.Panel"],    initComponent: function() {        var self = this;        Ext.apply(self, {            fieldLabel: self.fieldLabel,            labelWidth: self.labelWidth        });        self.callParent();    },    createPicker: function() {        var self = this;        var store = Ext.create('Ext.data.TreeStore', {            proxy: {                type: 'ajax',                url: self.storeUrl            },            sorters: [{                property: 'leaf',                direction: 'ASC'            },            {                property: 'text',                direction: 'ASC'            }],            root: {                id: self.rootId,                text: self.rootText            },            nodeParameter: self.treeNodeParameter        });        self.picker = new Ext.tree.Panel({            height: 300,            autoScroll: true,            floating: true,            focusOnToFront: false,            shadow: true,            ownerCt: this.ownerCt,            useArrows: true,            store: store,            rootVisible: false        });        self.picker.on({            checkchange: function(record, checked) {                var checkModel = self.checkModel;                if (checkModel == 'double') {                    var root = self.picker.getRootNode();                    root.cascadeBy(function(node) {                        if (node.get('text') != record.get('text')) {                            node.set('checked', false);                        }                    });                    if (record.get('leaf') && checked) {                        self.setRawValue(record.get('id')); // 隐藏值                        self.setValue(record.get('text')); // 显示值                    } else {                        record.set('checked', false);                        self.setRawValue(''); // 隐藏值                        self.setValue(''); // 显示值                    }                } else {                    var cascade = self.cascade;                    if (checked == true) {                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {                            if (cascade == 'child' || cascade == 'both') {                                if (!record.get("leaf") && checked) record.cascadeBy(function(record) {                                    record.set('checked', true);                                });                            }                            if (cascade == 'parent' || cascade == 'both') {                                pNode = record.parentNode;                                for (; pNode != null; pNode = pNode.parentNode) {                                    pNode.set("checked", true);                                }                            }                        }                    } else if (checked == false) {                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {                            if (cascade == 'child' || cascade == 'both') {                                if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {                                    record.set('checked', false);                                });                            }                        }                    }                    var records = self.picker.getView().getChecked(),                    names = [],                    values = [];                    Ext.Array.each(records,                    function(rec) {                        names.push(rec.get('text'));                        values.push(rec.get('id'));                    });                    self.setRawValue(values.join(';')); // 隐藏值                    self.setValue(names.join(';')); // 显示值                }            },            itemclick: function(tree, record, item, index, e, options) {                var checkModel = self.checkModel;                if (checkModel == 'single') {                    if (record.get('leaf')) {                        self.setRawValue(record.get('id')); // 隐藏值                        self.setValue(record.get('text')); // 显示值                    } else {                        self.setRawValue(''); // 隐藏值                        self.setValue(''); // 显示值                    }                }            }        });        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);            }        }    }});

调用方法

Ext.onReady(function() {var com = Ext.create("Ext.ux.comboboxtree", {id : 'name',name : 'name',hiddenName : 'hiddenName',storeUrl : 'data/tree2.json',cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选width : 270,fieldLabel : '单位树',labelWidth : 60,rootId : '1',rootText : 'DRP',treeNodeParameter : '',renderTo : Ext.getBody()});});

两种json格式的数据

一,不带复选框的数据

[{    "text": "To Do",     "cls": "folder",    "expanded": true,    "children": [{        "text": "Go jogging",        "leaf": true    },{        "text": "Take a nap",        "leaf": true           },{        "text": "Climb Everest",        "leaf": true           }]},{    "text": "Grocery List",    "cls": "folder",    "children": [{        "text": "Bananas",        "leaf": true           },{        "text": "Milk",        "leaf": true           },{        "text": "Cereal",        "leaf": true           },{        "text": "Energy foods",        "cls": "folder",        "children": [{            "text": "Coffee",            "leaf": true                   },{            "text": "Red Bull",            "leaf": true                   }]    }]},{    "text": "Remodel Project",     "cls": "folder",    "children": [{        "text": "Finish the budget",        "leaf": true           },{        "text": "Call contractors",        "leaf": true           },{        "text": "Choose design",        "leaf": true           }]}]

 

二.带复选框的数据

 

[{    "text": "To Do",     "cls": "folder",    "expanded": true,    "children": [{        "text": "Go jogging",        "leaf": true,        "checked": true    },{        "text": "Take a nap",        "leaf": true,        "checked": false    },{        "text": "Climb Everest",        "leaf": true,        "checked": false    }]},{    "text": "Grocery List",    "cls": "folder",    "children": [{        "text": "Bananas",        "leaf": true,        "checked": false    },{        "text": "Milk",        "leaf": true,        "checked": false    },{        "text": "Cereal",        "leaf": true,        "checked": false    },{        "text": "Energy foods",        "cls": "folder",        "children": [{            "text": "Coffee",            "leaf": true,            "checked": false        },{            "text": "Red Bull",            "leaf": true,            "checked": false        }]    }]},{    "text": "Remodel Project",     "cls": "folder",    "children": [{        "text": "Finish the budget",        "leaf": true,        "checked": false    },{        "text": "Call contractors",        "leaf": true,        "checked": false    },{        "text": "Choose design",        "leaf": true,        "checked": false    }]}]

 

如果有帮助记得支持一下哦,可能也有不完善的地方欢迎改进!