Extjs Combobox 里面带树
今天分享下如何实现Extjs4.0树形下拉框
1、效果图：
通过选择复选框，得到节点ID，
2、代码如下：
（1）自定义下拉树形选择框
Ext.define("Ext.ux.comboboxtree", {
extend: "Ext.form.field.Picker",
requires: ["Ext.tree.Panel"],
alias: 'widget.combotree',
"initComponent": function () {
var self = this;
Ext.apply(self, {
fieldLabel: self.fieldLabel,
labelWidth: self.labelWidth,
store: self.store
});
self.callParent();
},
"createPicker": function () {
var self = this;
var store = this.store;
self.picker = new Ext.tree.Panel({
height: 250,
autoScroll: true,
floating: true,
focusOnToFront: true,
shadow: true,
ownerCt: this.ownerCt,
useArrows: true,
store: store,
rootVisible: false,
resizable: true
});
self.picker.on({
"itemdblclick": function (combotree, rec) {
self.picker.hide();
},
"itemclick": function (combotree, rec) {
if (rec.get('checked')) {
if (self.rawValue == '') {
self.setValue(rec.get('id'));
}
else {
self.setValue(self.getValue() + ',' + rec.get('id'));
}
}
else {
self.setValue(self.getValue().replace(rec.get('id') + ',', ''));
self.setValue(self.getValue().replace(',' + rec.get('id'), ''));
self.setValue(self.getValue().replace(rec.get('id'), ''));
if (self.getValue().substring(0, 1) == ',') {
self.setValue(self.getValue().substring(1, self.getValue().length - 1));
}
if (self.getValue().substring(self.getValue().length - 1, self.getValue().length) == ',') {
self.setValue(self.getValue().substring(0, self.getValue().length - 1));
}
}
//我想在这里做点什么，以供调用此combotree的“外部”位置使用，但我不知道该怎么做……
}
});
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);
}
}
}
});
（2）
使用方式
var examlibstore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
//url: "Authority/GetAuthority",
url: "http://www.cnblogs.com/ExamPaper/GetExamlibTree/",
actionMethods: 'post'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
proxy: {
type: 'ajax',
//url: "Authority/GetAuthority",
url: "http://www.cnblogs.com/ExamPaper/GetExamlibTree/",
actionMethods: 'post'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
, {
fieldLabel: '題庫編號',
name: 'paraID',
id: 'paraID',
xtype: 'combotree',
store: examlibstore,
allowBlank: false,
blankText: "題庫編號不能为空"
}
examlibstore所需的json
jsons:
[{ text: "題庫管理" ,id:"EXAMLIB0000001" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "前線題庫" ,id:"EXAMLIB0000002" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "G01前線題庫" ,id:"EXAMLIB0000005" ,checked: false ,leaf: true},{ text: "Q01前線題庫" ,id:"EXAMLIB0000006" ,checked: false ,leaf: true}]},{ text: "作服題庫" ,id:"EXAMLIB0000003" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "MyExamLib" ,id:"EXAMLIB0000012" ,checked: false ,leaf: true}]},{ text: "後勤題庫" ,id:"EXAMLIB0000004" ,checked: false ,leaf: true},{ text: "test-2" ,id:"EXAMLIB0000007" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "fwe-1" ,id:"EXAMLIB0000010" ,checked: false ,leaf: true}]},{ text: "test2" ,id:"EXAMLIB0000009" ,checked: false ,leaf: false ,expanded: true ,children: [{ text: "222" ,id:"EXAMLIB0000011" ,checked: false ,leaf: true}]}]}]
OK 介绍完毕，不懂的可以给我留言，或者mail给我 yehui1989@qq.com
