How to work with treecombo in Extjs 4.1

问题:

I found tutor in http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo
I try to make a treecombo in Extjs4.1 in http://jsfiddle.net/rq2ha/ here is my code

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

1st problem: I want to get id of tree and do something When i click item of tree on combo. But combo not complete (seleted) when i click (combo do nothing).

2nd problem: if i change store is dynamic like

var treestore = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'example.php',
            reader: {
                type: 'json'
            }
        },
        autoload: true
    });

I will get error

my 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}]},...

How can i fix that thank

回答1:

To solve your second problem, you need to specify the root node when creating the tree store.

var treestore = Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root',
            id: '0'
        },
        proxy: {
            type: 'ajax',
            url: 'example.php',
            reader: {
                type: 'json'
            }
        },
        autoload: true
    });

Also, I should mention that the variable name you used for the tree store in the jsfiddle example is storeMenu rather than treestore. So if you want to replace the static tree store with the ajax version, make sure you are using the correct variable name.

回答2:

Replace

// I want to do something here. 

with the following two lines:

this.setValue(id);
this.collapse();

回答3:

About your first problem, by trying to use the 'itemTreeClick' method directly in your TreeCombo instance, you are overriding this behaviour from the Ext.ux.TreeCombo class. This method is responsible for actually setting your selection into the combo. So, that's why nothing happens right now (that behaviour is overrideng).

If you want to do something with the selection once the combo is populated, drop the 'itemTreeClick' method from your instance and place an 'itemclick' listener. Take a look at following snippet:

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

UPDATE:

Here is the fiddle working using the above answer:

http://jsfiddle.net/txaa0kw6/