CODEWITHSUNDEEP
eventsextjstreeonclickextjs4
Davor Zubak
Davor Zubak

Reputation: 4746

Handling itemclick event on tree panel Extjs 4

what I am trying to do is to get different reaction on a different tree LEAF click!

var myTree = Ext.create('Ext.tree.Panel',
    store: store,
    rootVisible: false,   
    border: false,
    listeners: {
        itemclick: function(index) {            
            var record = store.getAt(index);
            alert(record);          
        }
    }
});

I tried with index, to get the index of leaf, nothing. I can get a reaction on a node click, but how to get a specific reaction on every leaf? I also tried giving ID to the leafs, no luck???

Maybe a simple example of

itemclick: function(Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) {  

}

Pleeasse help!!

Upvotes: 7

Views: 36676

Answers (3)

ischenkodv
ischenkodv

Reputation: 4255

Itemclick handler already gives you everyting you need:

itemclick(view, record, item, index, e ) {
    var id = record.get('id');
    // do something depending on the record data.
    // console.log(record);
}

Upvotes: 6

gonzalo.vinas
gonzalo.vinas

Reputation: 71

I was trying to do a generic treepanel's item click handler and to be able to get a custom field I added to the node object. This helped me out. I dunno if this is the standard and compatible ExtJs 4 way:

            (Some Panels Here),
            items: [{
                xtype: 'treepanel',
                listeners: {
                    itemclick: {

                        fn: function (view, record, item, index, e) {

                            console.log(record.raw.userData);
                        }
            (removed...)

Upvotes: 3

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

The itemclick event listener's function param "index" does not point to your tree node's index. Like you mentioned in end of your question the syntax for the itemclick event is:

function(Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) {

}

Here is an example:

itemclick : function(view,rec,item,index,eventObj) {

    // You can access your node information using the record object
    // For example: record.get('id') or record.get('some-param')
    if(r.get('id')=='SP') {
        // I do my necessary logic here.. may be open a perticular window, grid etc..
    }

    if(r.get('id')=='CO') {
        // I do my necessary logic here.. may be open a perticular window, grid etc..
    }           
}

And here is an example of my tree node's data:

{ text: 'SP Reports', id: 'SP', leaf: true},
{ text: 'CO Reports', id: 'CO', leaf: true},

Upvotes: 10

Related Questions