javascriptmobilesencha-touchsencha-touch-2

Can I back a Sencha Touch Card Layout with a Store?


I have a view (Panel) that is a card layout. I have a Store of, say, n items. I want to create a stack of n cards, each of which is backed by an item in the Store. How can I do this without manually adding n cards in a for loop, iterating through the items in the Store?


Solution

  • You need a separate list to contain all your cards, you CANNOT connect panel's list of cards with a store (at least in current version of Sencha Touch).

    You cannot avoid adding manually, but you can avoid for loops:

    Ext.regModel('someModel', { 
        fields: [
            {name: 'title', type: 'string' },
            {name: 'info', type: 'string' }
        ]
    });
    
    var someStore = new Ext.data.Store({ 
    
        model: "someModel",
        listeners:{
            add:function(store, list, index){
                //here list is list of records you added
                var item = list[0];
                panelinstance.insert(index, {...whatever component...panel,list,carousal whatever});
            }
        } 
    });
    

    Careful about the caller: Add one item at a time to your store(this might sound ridiculous), but I think it is the only way to make your panel "CONNECT" to a store.