PDA

View Full Version : how to open new panel from tabPanel with slide animation



mr.xprt
18 Jun 2011, 12:06 PM
hi,

am asking about the O'Reilly example with sencha files

try to open it move to about from tabPanel , when choosing any of the list u can see new panel with slide animation is shown

tried to see the code of the action , it's :



onSelect: function(sel, records){
if (records[0] !== undefined) {
console.log(records[0].data.card);
var newCard = Ext.apply({}, records[0].data.card, {

prevCard: this.listpanel,
title: records[0].data.title
});

this.setActiveItem(Ext.create(newCard), 'slide');
}



i tried to write some code :


listeners: {
itemtap : function( DataView ,index, itemw, e ){
console.log(store.getAt(index));

var card=new Ext.Panel({
title:'hi',
html:'hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>'
layout:'card'
});
var newCard = Ext.apply({}, card, {

prevCard: infoPanel,
title: 'hi'
});

MainView.setActiveItem(Ext.create(newCard), 'slide');


}


the problem that every time i tap the list new card created and added to the MainView (TabPanel) , that means that it's not created on the fly but it appears in the tabPanel

i want it to behave like the O'Reilly 's app

any idea ?!

Jack9
18 Jun 2011, 1:45 PM
var newCard = Ext.apply({}, records[0].data.card, {
prevCard: this.listpanel,
title: records[0].data.title
});
this.setActiveItem(Ext.create(newCard), 'slide');


Let's break this down. Since I don't know what's in records[0].data.card, I'm going to guess.
Probably an xtype and some other configuration data.

So we end up with what in newCard?
newCard ends up being a CLASS DEFINITION as far as I can tell.
You then pass the definition to the Ext.create and it generates a new item for the tabpanel and slides to it.

Let's break down your code.


var card=new Ext.Panel({
title:'hi',
html:'hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>', // typo, forgot comma
layout:'card'
});
var newCard = Ext.apply({}, card, {
prevCard: infoPanel,
title: 'hi'
});
MainView.setActiveItem(Ext.create(newCard), 'slide');


card ends up with a CLASS INSTANCE. You then apply a new configuration (prevCard and title) to the class instance. I believe this just changes the instance. You then pass the instance over to Ext.create which probably grabs the class definition from it and creates another one.

Your question: Why isn't this code creating the panel dynamically?
Answer: It is creating the panel on dynamically. You aren't DESTROYING it afterward, so you're just creating new ones over and over.

If you don't want new tabs to appear when you create a new panel, there's a couple ways to prevent them from appearing. Either way, you have to destroy a panel to make it truly dynamic.

mr.xprt
18 Jun 2011, 8:21 PM
thanks man ,

but i think this what i was searching for

http://www.sencha.com/forum/showthread.php?119811-OPEN-697-Scroll-bug-when-switching-between-2-sons-panels