[转]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
});
});