EXTJS 4: Добавление слушателей к элементам несовместимым

Question

Я работаю с данным dataview EXTJS 4 и имеет несогласованные результаты при добавлении слушателей в элементы html (ссылки) в каждом узле данных. Я поместил код в загрузчик в хранилище, привязанный к dataview. Похоже, что он работает с первой загрузкой, но последующие нагрузки ухудшаются, так как он начинает пропускать некоторые элементы. Каждый раз при вызове store.reload() он становится хуже.

Я проверил в firebug, что идентификаторы элемента html правильно отображаются, но по какой-то причине, когда я перезагружаю хранилище, он сначала начинает пропускать некоторые элементы, а затем все элементы. Код для слушателя нагрузки ниже:

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

Answer 1

Обновление до вида сетки может происходить без какой-либо нагрузки. Когда представление сетки обновляется, оно уничтожает существующие элементы html и создает новые, поэтому любые слушатели, которые вы привязали к этим элементам, будут бесполезны.

Вы должны посмотреть на добавление прослушивателя кликов на всю сетку и с помощью delegate прослушать клики по определенным элементам html в представлении. Это позволит вам добавить одного слушателя один раз, который всегда будет работать независимо от того, сколько раз элементы в представлении переизлучаются.

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

Обработчик кликов будет запущен только для кликов по элементам, которые соответствуют селектору делегатов.

Кроме того, логика, в которой вы добавляете классы CSS, основанные на типе записи, должна быть выполнена в рендерере (если у вас есть сетка) или обрабатывается шаблоном представления данных.