[转]Ext4实现combotree

实现代码:

Ext.override(Ext.data.TreeStore, { 
        load: function(options) { 
                options = options || {}; 
                options.params = options.params || {}; 
        
        
                var me = this, 
                node = options.node || me.tree.getRootNode(), 
                root; 
        
        
        // If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just 
        // create one for them. 
                if (!node) { 
                        node = me.setRootNode({ 
                        expanded: true 
                        }); 
                } 
        
        
                if (me.clearOnLoad) { 
                        node.removeAll(false); 
                } 
        
        
                Ext.applyIf(options, { 
                        node: node 
                }); 
                options.params[me.nodeParam] = node ? node.getId() : 'root'; 
        
        
                if (node) { 
                        node.set('loading', true); 
                } 
        
        
                return me.callParent([options]); 
        } 
});

Ext.define('Ext.ux.ComboTree',{
        extend : "Ext.form.field.ComboBox",
        alias: 'widget.combotree',
        requires : ["Ext.tree.Panel"],
        initComponent : function() {
                var self = this;
                self.myValue = '';
                Ext.apply(self, {
                        fieldLabel : self.fieldLabel,
                        labelWidth : self.labelWidth     
                });
                  self.callParent();
         },
         getValue:function(){
                 var self = this;
                 return self.myValue;
         },
         createPicker : function() {
                var self = this;
                var store = Ext.create('Ext.data.TreeStore',{
                        proxy: {
                        type: 'ajax',
                        actionMethods:'POST',
                        url: self.url,
                        extraParams:{
                                        name:'test',
                                        all:self.all
                                }
                        },
                        listeners:{
                                load:function(){
                                        self.oldValue = self.myValue.split(',');
                                        self.oldText = self.getRawValue().split(',');
                                        if (self.oldText[0]==''){self.oldText=[]}
                                        if (self.oldValue[0]==''){self.oldValue=[]}
                                }
                        }
                });
                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,
                        listeners:{
                                itemclick:function(me, node, index){
                                        if (node.get('checked')!=null){
                                                var checked = !node.get('checked');
                                                if (self.multiple){
                                                        node.set('checked',checked);
                                                        var records = self.picker.getView().getChecked(), names = [], values = [];
                                                        if (self.oldValue.length>0){
                                                                names = self.oldText;
                                                                values = self.oldValue;
                                                        }
                                                    Ext.Array.each(records, function(rec) {
                                                            var b = true;
                                                            for (var i=0;i<self.oldValue.length;i++){
                                                                    if (self.oldValue<i> == rec.get('id')){
                                                                            b = false;
                                                                            break;
                                                                    }
                                                            }
                                                            if (b){
                                                                        names.push(rec.get('text'));
                                                                        values.push(rec.get('id'));
                                                            }
                                                        });
                                                        
                                                }else{
                                                        var records = self.picker.getView().getSelectionModel().getSelection()[0], names = [], values = [];
                                                        Ext.Array.each(self.picker.getView().getChecked(),function(rec){
                                                                rec.set('checked',false);
                                                        });
                                                        node.set('checked',checked);
                                                        if (checked){
                                                                names.push(node.get('text'));
                                                                values.push(node.get('id'));
                                                        }else{
                                                                names = [];
                                                                values = [];
                                                        }
                                                }
                                                
                                                self.myValue = values.join(',');
                                                self.setValue(values.join(','));// 显示值
                                                self.setRawValue(names.join(','));// 隐藏值
                                        }
                                }
                        },
                        tbar:[self.textField=Ext.create('Ext.form.field.Text',{
                                fieldLabel:'筛选',
                                width:self.width - 95,
                                labelWidth:40,
                                listeners:{
                                        scope: this,
                                        specialkey: function(text, e) {
                                                if (e.getKey() == e.ENTER) {
                                                        self.reLoad();
                                                }
                                        }
                                }
                        }),{
                                xtype:'button',
//                                        icon:'images/icons/zoom.png',
                                iconCls:'find',
                                handler:function(){
                                        self.reLoad();
                                }
                        }]
                });
                return self.picker;
        },
        reLoad:function(){
                var store = this.getPicker().getStore();
                store.setProxy({
                        type: 'ajax',
                actionMethods:'POST',
                url: this.url,
                extraParams:{
                                name:'test',
                                all:this.all,
                                query:this.textField.getValue()
                        }
                });
                store.load();
        },
        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);
                        }
                  }
         },
         onTrigger1Click: function() {
        this.myText = '';
        this.myValue = '';
        this.oldValue = [];
        this.oldText = [];
        this.setValue('');
        this.setRawValue('');
        var records = this.getPicker().getView().getChecked();
        Ext.Array.each(records,function(rec){
                rec.set('checked',false);
        });
    },
    displayField: 'text',
    editable:false,
    queryMode: 'local',
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'x-form-trigger',
    valueField: 'id'
});

使用方法:

Ext.onReady(function(){
        var comb = Ext.create('Ext.ux.ComboTree',{
         width : 270,
         fieldLabel : '行政区划',
         url:'getDic',  //ajax请求地址
         labelWidth : 60,
         renderTo:'testDiv',
         multiple:true  //是否可以多选，默认false
       });
});

评论

2 楼 jiangtao2761 2012-12-21  

求此代码JSON格式

1 楼 a3049967 2012-07-06  

有没有直接打包的项目可以直接运行的？