在 sencha Touch 中将商店中的项目动态加载到选项卡面板

Question

在 Sencha touch 应用程序中工作时，我在动态加载选项卡面板内的项目时遇到问题..

视图中的代码：

{
                xtype   : 'tabpanel',
                layout  : 'card',
                itemId  : 'containerButtons',
                items   : []
}

控制器中的代码：

chooseBrands : function(store){
var item = {};
for(var i = 0; i <store.get('brands').length; i++){
  var record = store.get('brands')[i].text;
  var items = [item];
  console.log(i + ' ' + record);
  item = {
    title: record
  };
  items.push(item);
}
this.getSurveyBrands().setItems(items);

},

但它无法正常工作，我重复了很多次相同的记录，例如选项卡面板中数组的长度..

此外，我在加载视图时调用此方法，并且它的引用与事件有关 initialize

我做错了什么？？

提前致谢。

我找到了解决方案：

chooseBrands : function(store){
    this.getSurveyBrands().removeAll();
    var item = {};
    for(var i = 0; i <store.get('brands').length; i++){
      var record = store.get('brands')[i].text;
      var items = [item];
      item = {
        title: record
      };
      this.getSurveyBrands().add(item);
    }
  },

Answer 1

错位

var item = {}

是问题所在。现在在哪里，总是和你修改标题的地方一样object。这当然会修改所有 "copies" 的标题（object 只不过是指向某个内存位置的指针） "same" object 到处都是。

如果您在循环内创建 item object，它应该可以工作。

chooseBrands : function(store){
    var items=[];
    for(var i = 0; i <store.get('brands').length; i++){
      var record = store.get('brands')[i].text,
          item = {
            title: record
          };
      items.push(item);
    }
    this.getSurveyBrands().setItems(items);
}

但我建议使用 map 技巧使代码非常简单：

chooseBrands: function(store) {
    this.getSurveyBrands().setItems(
        store.get('brands').map(function(brand) {
            return {title:brand.text};
        })
    );
}

在 sencha Touch 中将商店中的项目动态加载到选项卡面板

Load dynamically items from store to tabpanel in sencha Touch

javascript

extjs

sencha-touch