ExtJS组合框树组件实现-优快云博客

Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);

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
// pickerAlign : "tl"//悬浮到其上面
});
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'
}]

                });

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({

beforehide : function(p) {

                        var records = self.picker.getView().getChecked(), names = [];

Ext.Array.each(records, function(rec) {

names.push(rec.get('text'));

                                });
// Ext.MessageBox.show({

                        // title : 'Selected Nodes',

                        // msg : names.join('<br />'),

                        // icon : Ext.MessageBox.INFO

                        // });

                        // alert(names.join(','));

self.setValue(names.join(','));

p.setVisible(true);// 隐藏树
}

                });

        return self.picker;

    },

alignPicker : function() {
// override the original method because otherwise the height of

        // the treepanel would be always 0

var me = this, picker, isAbove, aboveSfx = '-above';

        if (this.isExpanded) {
picker = me.getPicker();

            if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and

                // max width) unless there are no records to display.
picker.setWidth(me.bodyEl.getWidth());

            }

            if (picker.isFloating()) {

picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl

                // add the {openCls}-above class if the picker was

                // aligned above

                // the field due to hitting the bottom of the viewport
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", {

storeUrl : 'check-nodes.json',

width : 270,

fieldLabel : '行政区划',

labelWidth : 60,

renderTo : 'tree-div'
});

        });

http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList