效果图.

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


  • 带jchecked的json数据的单选


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


封装基类代码 :comboxtree.js
[html] view plain copy

  • 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);  

  •            }  

  •        }  

  •    }  

  • });  



调用方法 [html] view plain copy

  • 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格式的数据
一,不带复选框的数据
[html] view plaincopy

   [{  
       "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  

       }]  
   }]  



二.带复选框的数据


[html] view plaincopy

   [{  
       "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  
       }]  
   }]