Extjs4 comboboxtree下拉勾选树

Extjs4 comboboxtree下拉勾选树(更新中)  

2011-06-08 15:30:54|  分类： extjs|字号 订阅

如图

：

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

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(';'));// 显示值

}

});

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

}

}

}

});

Ext.onReady(function() {

var com =Ext.create("Ext.ux.comboboxtree", {

     id:'name',

     name:'name',

     hiddenName:'hiddenName',

storeUrl : Resource.regionNodesUrl,

width : 270,

fieldLabel : '行政区划',

labelWidth : 60,

rootId : '44000000000000',

rootText : '广东省',

treeNodeParameter : 'code',

renderTo : 'tree-div'

}); 

});