如何在ExtJS4.1中使用treecombo
我在如何在ExtJS4.1中使用treecombo,extjs,combobox,tree,extjs4.1,Extjs,Combobox,Tree,Extjs4.1,我在 我尝试在Extjs4.1中制作一个treecombo 这是我的密码 Ext.onReady(function() { Ext.create('Ext.ux.TreeCombo', { margin:10, width:120, height: 10, treeHeight: 10, treeWidth: 240, renderTo:
我尝试在Extjs4.1中制作一个treecombo 这是我的密码
Ext.onReady(function() {
Ext.create('Ext.ux.TreeCombo', {
margin:10,
width:120,
height: 10,
treeHeight: 10,
treeWidth: 240,
renderTo: 'treecombo3',
store: storeMenu,
selectChildren: false,
canSelectFolders: true
,itemTreeClick: function(view, record, item, index, e, eOpts, treeCombo)
{
var id = record.data.id;
// I want to do something here.
// But combo do nothing (not selected item or not finish) when i init itemTreeClick function
}
});
});
第一个问题:我想得到树的id,当我在组合框上点击树的项目时做些什么。但当我点击时组合未完成(选择)(组合不执行任何操作)。
第二个问题:如果我改变商店是动态的
var treestore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json'
}
},
autoload: true
});
我会出错的
我的json
[ { id : '1' , text : 'a', iconCls: 'cls1' ,children :[{ id : '2' , text : 'b', iconCls: 'cls2' ,children :[{ id : '9' , text : 'a', iconCls: 'cls' ,children :[]},{ id : '14' , text : 'a', iconCls: 'c' ,children :[{ id : '33' , text : 'b', iconCls: 'cls' ,children :[{ id : '35' , text : 'a', iconCls: 'cls' ,children :[{ id : '36' , text : 'a', iconCls: 'cls' ,children :[]}]}]}]},{ id : '16' , text : 'd', iconCls: 'cls' ,leaf:true}]},...
如何修复该问题,谢谢替换
// I want to do something here.
使用以下两行代码:
this.setValue(id);
this.collapse();
要解决第二个问题,需要在创建树存储时指定根节点
var treestore = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root',
id: '0'
},
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json'
}
},
autoload: true
});
另外,我应该提到,在jsfiddle示例中用于树存储的变量名是storeMenu,而不是treestore。因此,如果要用ajax版本替换静态树存储,请确保使用了正确的变量名。关于第一个问题,通过尝试在TreeCombo实例中直接使用“itemTreeClick”方法,您正在从Ext.ux.TreeCombo类重写此行为。此方法负责实际将您的选择设置到组合中。所以,这就是为什么现在什么都没有发生(这种行为被覆盖) 如果您想在填充组合后对选择执行某些操作,请从实例中删除“itemTreeClick”方法,并放置一个“itemclick”侦听器。请看以下代码段:
Ext.create('Ext.ux.TreeCombo', {
margin:10,
width:120,
height: 10,
treeHeight: 10,
treeWidth: 240,
renderTo: 'treecombo3',
store: storeMenu,
selectChildren: false,
canSelectFolders: true,
listeners : {
itemclick : function(view, record, item, index, e, eOpts){
var id = record.data.id
//now you can do something here...
}
}
});
更新:
以下是使用上述答案的小提琴作品:
你知道我的第二个问题吗:)