Обновление dataview в панели в extjs 3.4

Question

У меня есть компонент extjs Panel, который содержит элемент dataview. Я использую это для отображения изображений из магазина. Он работает как ожидалось во время первой загрузки. Но позже, когда я перезагружаю imgStore с новым url изображения (который возникает, когда пользователь ищет и загружает другой город), представление не обновляется. Может ли кто-нибудь указать мне лучший способ обновить пункт panel/dataview, когда обновляется связанное хранилище данных?

Фактический код имеет более одного элемента на панели и многих других кнопок и панелей инструментов. Пожалуйста, обратитесь к соответствующей части кода ниже:

init: function() { 

    // image store 
    this.imgStore = new Ext.data.JsonStore({ 
     idProperty: 'imgId', 
     fields: [{ 
      name: 'imgId', 
      type: 'integer', 
      mapping: 'imgId' 
     }, { 
      name: 'url', 
      mapping: 'url' 
     }], 
     data: [], 
    }); 

    // load images   
    Ext.each(myImgStore.data.items, function(itm, i, all) { 
     this.imgStore.loadData(itm.data, true); 
    }); 

    // add to a dataview in a panel 
    this.myPanel = new Ext.Panel({ 
     autoScroll: true, 
     items: [{ 
      xtype: 'dataview', 
      store: this.imgStore, 
      autoScroll: true, 
      id: 'imgList', 
      tpl: new Ext.XTemplate(
       '<ul class="imgGrid">', 
       '<tpl for=".">', 
       '<li>', 
       '<div class=\"imgThumbnail\" imgId="{imgId}">', 
       '<img src="{url}"/>', 
       '</div>', 
       '</li>', 
       '</tpl>', 
       '</ul>', 
       '<div class="x-clear"></div>' 
      ), 
      listeners: { 
       afterrender: function() { 
        // do something       
       } 
      } 
     }] 
    }); 
    // add this to the center region of parentpanel 
    Ext.getCmp('parentPanel').add([this.myPanel]); 
    this.myPanel.doLayout(); 
} 

Everytime магазин перезагрузке, я хочу DataView в обновлении. Я использую версию extjs 3.4.

Спасибо!

Answer 1

Вам необходимо, чтобы refresh ваш документ. Я предлагаю ввести его в переменную.

Затем добавьте слушателя в вашем магазине:

this.imgStore = new Ext.data.JsonStore({ 
    idProperty: 'imgId', 
    fields: [{ 
     name: 'imgId', 
     type: 'integer', 
     mapping: 'imgId' 
    }, { 
     name: 'url', 
     mapping: 'url' 
    }], 
    data: [] 
}); 

// Define your dataView here 

this.imgStore.on('load', function() { 
    dataView.refresh();  
}); 

Примечание: Код не проверяется.