CODEWITHSUNDEEP
javascriptextjssencha-touch
inane
inane

Reputation: 648

Load dynamically items from store to tabpanel in sencha Touch

Working in a Sencha touch application I am having a problem with the load of items inside of a tabpanel dynamically..

Code in the view:

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

Code in the controller :

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);

},

But it is not working correctly, I am having same record repeated so many times like is the length of the array in the tabpanel ..

Also, I am calling this method while the view is loaded and its refs is with the event initialize

What am I doing wrong??

Thank you in advance.

I found the solution:

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);
    }
  },

Upvotes: 1

Views: 233

Answers (1)

Alexander
Alexander

Reputation: 20224

The misplacement of

var item = {}

is the issue. Where it is now, it is always the same object where you modify the title. This will of course modify the title of all "copies" (an object is nothing but a pointer to a certain memory position) the "same" object all over the place.

If you create the item object inside the loop, it should work.

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);
}

But I would recommend to keep the code really simple using the map trick:

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

Upvotes: 2

Related Questions