eXtjs4下拉树支持单选复选级联选择 [复制链接]

效果图.

• 不带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  
       }]  
   }]