在extjs 3.4中刷新面板中的数据视图

Question

我有一个包含dataview项目的extjs Panel组件。我用它来显示商店中的图像。它在第一次加载期间按预期工作。但后来当我用新的图像url（当用户搜索并加载不同的城市时发生）重新加载imgStore时，视图不刷新。当关联的数据存储刷新时，有人能够以最好的方式指向我刷新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(); 
} 

每当商店被重新加载，我希望刷新数据视图。我使用的是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();  
}); 

注：代码没有进行测试。