PDA

View Full Version : dynamically add panels to another panel



javapurna
15 Apr 2013, 8:33 PM
hi every one,

i have array with three items(0,1,2) . and two images 1)left
2)right .
in panel default array index (0) is displaying .
(a) next click on right button i want to remove index(0) element and add index (1) element to panel.
(b) again i am click on right button remove index(1) and add index (2) items to panel
(c) again click on right button remove index (2) element and add index(0) element to panel.

i am success fully done a, b ,but am try to do c step (adding again to array index (0)
to panel it gives error (Uncaught TypeError: Cannot read property 'addCls' of null ) mycode is below


my array declaration is
var index=0;

var scheduler = new Array();
scheduler.push(this.getTodaysNewSchedule());
scheduler.push(this.getNewToDoSchedule());
scheduler.push(this.getNewTaskSchedule());





my right image code (here index is global variable var index=0)

{
xtype : 'image',
src : app_context_path +'/resources/images/icons/control_play.png',
x : 200,
y : 300,
draggable : true,
index : 0,
listeners: {
afterrender: function(c){
c.el.on('click', function(){
alert('i'+index);
if(index >=2){
alert('i if'+index);
Ext.getCmp('todayschedule').remove(scheduler[index]);
index=0;
alert('i if 0 '+index);
console.dir(scheduler[index]);
console.dir(scheduler);
alert('fgfgfgfg');
Ext.getCmp('todayschedule').add(scheduler[(index)]);
alert('yyyyyyyyyyyyyyyy');
Ext.getCmp('todayschedule').doLayout();
index++;

}else{
console.dir(scheduler[index]);
Ext.getCmp('todayschedule').remove(scheduler[index]);
console.dir(scheduler[((index)+1)]);
Ext.getCmp('todayschedule').add(scheduler[((index)+1)]);
Ext.getCmp('todayschedule').doLayout();
alert(index);
index++;
alert('ii'+index);
}

});
}
},
},



my panel code is here

var schedule = Ext.create('Ext.panel.Panel',{

items:scheduler[index],
});


i am using console.dir() to test all items comming why error comming

slemmon
17 Apr 2013, 8:37 AM
Have you seen the card layout demo in the layout browser on the example page?
http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout-browser/layout-browser.html

If not I'd recommend you look at the card demo (choose the Card - Wizard example). I believe it's doing just exactly what you're looking to do with a layout right from the framework.

*Also, when posting code to the forum please wrap your code in [ CODE ] tags (you can use the # button in the toolbar) for readability.