PDA

View Full Version : Super newbie question - how to add a tabbed panel under a docked panel?



douglerner
31 Aug 2011, 2:30 AM
This is basically cut and paste from an intro tutorial and the tabs.js in kitchen sink. I watched the screencasts, but I don't see yet how to arrange the parts in the right way to fit them together and would appreciate any pointers.

Basically I have a docked item with some HTML as the entire contents of my index.js file:


new Ext.Application ({ launch: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{xtype: 'toolbar', title: 'edWeb Mobile'}],
layout: 'fit',
styleHtmlContent: true,
html: '<h2>Welcome</h2>You can read here on your iPhone, iPad or Android'
});
}
});




What I'd like to do is add a tabbed panel below it - or even a link from the above panel to a new, separate panel which contains the tabs. This is just from the kitchen sink example:


new Ext.TabPanel({ sortable: true, // Tap and hold to sort
ui: 'dark',
items: [{
title: 'Tab 1',
html: 'The tabs above are also sortable.<br />(tap and hold)',
cls: 'card card5'
},
{
title: 'Tab 2',
html: 'Tab 2',
cls: 'card card4'
},
{
title: 'Tab 3',
html: 'Tab 3',
cls: 'card card3'
}]
});




What I don't get yet is how to "meld" the two. I tried nesting the Ext.TabPanel instance inside the Ext.Panel, replacing the Ext.Panel with the Ext.TabPanel and some other variations but I guess I just don't know what to do.

I would be grateful for any hints to help me get over this initial conceptual hurdle. I did watch the introductory screencasts, but they sort of flew by, even though I tried stopping/starting them along the way. I *think* I understand conceptually the *sort* of thing I need to do, but just can't figure out the details of getting it done.

Thanks,

doug

eyepoker
31 Aug 2011, 3:00 PM
hello there.... new at this as well, however, i think I'm further along than yourself ;)

See the sample below - it should be easy to see how it all comes together - note the comments.



Ext.setup({
onReady: function(){

// define your toolbar - note the handler
var tb = new Ext.Toolbar({
dock:'bottom',
title:'toolbar',
items:[
{
text:'P1',
handler:function(){myLayout.setActiveItem(0)}
},{
text:'P2',
handler:function(){myLayout.setActiveItem(1)}
},{
text:'P3',
handler:function(){myLayout.setActiveItem(2)}
}
]
});


// layout the content panels

var p1 = new Ext.Panel({
html:'this is panel 1',
style:'background-color:#7dc892'
});

var p2 = new Ext.Panel({
html:'this is panel 2',
style:'background-color:#7db9c8'
});

var p3 = new Ext.Panel({
html:'this is panel 3',
style:'background-color:#7d8bc8'
});

// put it all together

var myLayout = new Ext.Panel({
fullscreen: true,
items:[p1,p2,p3],
dockedItems:[tb],
layout:'card',
cardSwitchAnimation: {type: 'fade', duration:500}
});
}

});




Your other question, about having 2 cards, the first visible card occupying the entire screen, and the second one having the toolbar... we can nest layouts. So, with that in mind you can have the layout above, which was called "myLayout" be an item of some other layout. This next example illustrates it for you. As before, note the comments...



var appWrapper; // setting this as a global so that we can access it with setActiveItem

Ext.setup({
onReady: function(){

// define your toolbar - note the handler
var tb = new Ext.Toolbar({
dock:'bottom',
title:'toolbar',
items:[
{
text:'P1',
handler:function(){myLayout.setActiveItem(0)}
},{
text:'P2',
handler:function(){myLayout.setActiveItem(1)}
},{
text:'P3',
handler:function(){myLayout.setActiveItem(2)}
}
]
});


// layout the content panels
// these panels plus the toolbar will be part of the layout called "myLayout"

var p1 = new Ext.Panel({
html:'this is panel 1',
style:'background-color:#7dc892'
});

var p2 = new Ext.Panel({
html:'this is panel 2',
style:'background-color:#7db9c8'
});

var p3 = new Ext.Panel({
html:'this is panel 3',
style:'background-color:#7d8bc8'
});


// Here as in the first example you see everything put together - exactly the same as before

var myLayout = new Ext.Panel({
//fullscreen: true, NOTE this has been removed here!!!
items:[p1,p2,p3],
dockedItems:[tb],
layout:'card',
cardSwitchAnimation: {type: 'fade', duration:500}
});

// START new panels...
// this one is the first panel that you will see upon app launch

var panelOne = new Ext.Panel({
html:'this is the intro panel - <a href="#" onclick="appWrapper.setActiveItem(1)">view panel 2</a>',
style:'background-color:#cccccc'
});

//This is the new wrapper for the entire application
// note that "myLayout" is now an item of this new panel

appWrapper = new Ext.Panel({
fullscreen: true,
items:[panelOne,myLayout],
layout:'card',
cardSwitchAnimation: {type: 'wipe', duration:500}
});

}

});

douglerner
4 Sep 2011, 12:57 AM
Thanks very much eyepoker. Yes, you are rather well further along than I am. :)

I still don't understand how to know which instance of new Ext.Panel is the instance which starts up. Is there only one instance with an object property of fullscreen:true? Is that the key to know which is the "master layout"? Or does it have to do with the way it's nested?

Also, if everything is in one .js file that means all the content has to load at once, even if only part of it is visible. I can see how that can make for smoother transition effects. But it also carries a lot of data transfer weight with it. Isn't it sometimes desirable to have different tabs actually link to a different .js source altogether?

Thanks very much,

doug

douglerner
4 Sep 2011, 3:06 AM
Phrased another way, I see that onReady the function is invoked.

But the function itself seems to just create instances of Ext.Panel and Ext.Toolbar. I don't see where those instances are actually used. Just simply creating the instances cause them to appear without actually having to display them? So every instance of everything defined is displayed?

At any rate, it does work! (Except in portrait mode the toolbar title and the tabs overlap).

Thanks!

doug