用存储填充自定义组件

Question

我试图在Sencha Touch 2项目中使用商店（实际上是存储本地数据）来填充自定义组件。

我的想法是为商店中的每个元素创建一个自定义组件，但实际上没有任何反应。

我已经尝试了几件事情，但任何工作，你能帮我吗？我做了一个例子来说明这个问题：

型号：

Ext.define('project.model.city', { 
    extend: 'Ext.data.Model', 
    config: { 
    fields: [ 
     {name: 'country', type: 'string'}, 
     {name: 'city', type: 'string'} 
    ] 
    } 
}); 

店：

Ext.define('project.store.cities', { 
    extend: 'Ext.data.Store', 
    requires: ['project.model.city'], 
    model: 'project.model.city', 
    autoLoad: true, 
    data: [ 
    { country: 'Germany', city: 'Berlin' }, 
    { country: 'Italy', city: 'Rome' } 
    ] 
}); 

查看与店：

Ext.define('project.view.cityAll', { 
    extend: 'Ext.Panel', 
    xtype: 'cityAllView', 
    config: { 
    items:[{ 
     xtype: 'cityItemView', 
     store: 'project.store.cities', 
    }] 
    } 
}); 

自定义组件查看：

Ext.define('project.view.cityItem', { 
    extend: 'Ext.Panel', 
    xtype: 'cityItemView', 
    config: { 
    items: [{ 
     itemTpl: '{city}' 
    }] 
    } 
}); 

Answer 1

您需要分配店cityItemView而不是cityAllView。 cityItemView正在指定模板并需要加载数据。

Ext.define('project.view.cityItem', { 
    extend: 'Ext.Panel', 
    xtype: 'cityItemView', 
    config: { 
    items: [{ 
     xtype:'list', 
     itemTpl: '{city}' 
     store:'project.store.cities' 
    }] 
    } 
}); 

如果要将数据设置为面板，则需要拨打setData()。面板无法直接从商店加载数据。您可以使用列表视图，以显示城市，国家对。 cityView不再需要以这种方式存储财产。

试试看。

Answer 2

您可以通过记录这将环路店负载添加监听器，并创造尽可能多的面板：

listeners : { 
     load: function(me, records, successful, operation, eOpts){ 
      var plist = []; 
      var cv = Ext.Create('project.view.cityAll'); 
      if(successful){ 

       var data = records[i].getData(); 
       for(var i=0; i<records.length; i++){ 
        plist.push({ 
         xtype : 'cityItemView', 
         data : data 
        }); 
       } 
       cv.add(plist); 
      } 
      // Now add cv to viewport or wherever you want 
     } 
} 

你必须改变cityItemView使用任何你想要的方式的数据。如果你正在使用初始化方法，你可以像this.config.data