sencha touch - accordion layout

0
votes

In this code ...

    var panel = new Ext.Panel({
        fullscreen : true,
        scroll     : "vertical",
        layout     : {
            type :  "accordion"
        },
        items: [
            { xtype : "panel", title : "One Title",   html : "One"   },
            list,
            { xtype : "panel", title : "Three Title", html : "Three" },
            { xtype : "panel", title : "Four Title",  html : "Four"  },
            { xtype : "panel", title : "Five Title",  html : "Five"  },
            { xtype : "panel", title : "Six Title",   html : "Six"   }
        ]
    });

In this, the panel title were hard coded as One title, Three title, etc.. but i want to display the result what i am getting from database (i have created the model and i got the result to display) as title of each panel ... how to iterate and show .. pls help me..

2
sencha-touchaccordion

2 Answers

0
votes

You could collect the results in an array then add this array to panel's items. Could be something like this:

var panels = [];
for ( var i=0; i<results.length; i++ ) { 
var p= '{ xtype : "panel", title : ' + results[i].title + ',   html : "' + results[i].html  + '"   },';
panels.push(p);
}

var panel = new Ext.Panel({
    fullscreen : true,
    scroll     : "vertical",
    layout     : {
        type :  "accordion"
    },
    items: panels
});
0
votes

I got the dynamic value in accordion panel by using the following

 var panel = new Ext.Panel({

layout: {
        type: "accordion"
    },

    initComponent : function() {

allVisitStore.data.each(function() {
                alert('inside teration');
                jsonObj.push({xtype:"panel", title: this.data['title'], html : this.data['patientId'], style : 'padding-bottom:10px;'});
            });

}
});