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('
'), // 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