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

那样访问它

使用商店填充自定义组件

2 个答案: