EXTJS 4: Adding listeners to elements not consistent

Question

I'm working with an EXTJS 4 dataview and having inconsistent results when adding listeners to html elements (links) in each data node. I have placed the code in the load listener on the store that is tied to the dataview. It appears to work on the first load but subsequent loads get worse as it begins missing some elements. Each time a call store.reload() it gets worse.

I have verified in firebug that the html element ID's are rendering properly but for some reason when I reload the store it begins to miss some elements at first, then all elements. Code for the load listener below:

listeners: {
            load: function(store, records, successful, options){
                    var nodes = records;
                    for (i=0, len = nodes.length; i < len;i++){
                        var id = nodes[i].data.id;
                        var addtocartel = Ext.get('img-cart-'+id);
                        var viewel = Ext.get('img-view-'+id);
                        //Setting hidden class for nonimage items
                        switch (nodes[i].data.type) {

                            case 'image' :
                            viewel.addCls('imgprf');
                            addtocartel.addCls('cartprf');
                            break;

                            default :
                            viewel.addCls('sc_hidden');
                            addtocartel.addCls('sc_hidden');
                            viewel.hide();
                            addtocartel.hide();
                            break;
                        }

                        if(addtocartel !== null){
                            addtocartel.itemid = id;
                            addtocartel.on('click', function(e,t){
                              var el = Ext.get(t);
                              var imgrec = imagestore.getById(el.itemid);
                              e.stopEvent(); 
                              prfproductwindow.show();
                            });
                        }
                        if(viewel !== null){
                            viewel.itemid = id;
                            viewel.on('click', function(e,t){
                                var el = Ext.get(t);
                                var imgrec = imagestore.getById(el.itemid);
                            });
                        }
                    }
            }
        }

wantok wantok · Accepted Answer · 2013-07-02T04:17:41

Refreshes to the grid view can happen without any sort of load occurring. When the grid view refreshes it wipes out the existing html elements and creates new ones, so any listeners you had attached to those elements will be useless.

You should look into adding a click listener to your entire grid and using a delegate to listen for clicks on specific html elements within the view. This will allow you to add a single listener once that will always work no matter how many times the elements within the view are rerendered.

grid.getView().getEl().on('click', function(evt, target) {
    console.log('clicked on ' + target);
}, {delegate: '.my-css-selector-for-some-element'});

The click handler will only be fired for clicks on elements that match the delegate selector.

Also, the logic where you are adding css classes based on the record's type should be done in the renderer (if you have a grid) or handled by the data view's template.

EXTJS 4: Adding listeners to elements not consistent

1 Answers