4

我在http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo找到了导师
我尝试在http://jsfiddle.net/rq2ha/的 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}]},...


我该如何解决谢谢

4

3 回答 3

2

要解决您的第二个问题，您需要在创建树存储时指定根节点。

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 版本替换静态树存储，请确保使用正确的变量名。

于 2013-07-21T12:26:14.493 回答
1

代替

// I want to do something here.

使用以下两行：

this.setValue(id);
this.collapse();
于 2013-07-18T18:39:23.540 回答
1

关于您的第一个问题，通过尝试直接在 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...
            }
        }
    });

更新：

这是使用上述答案的小提琴：

http://jsfiddle.net/txaa0kw6/

于 2013-07-21T16:42:43.667 回答