PDA

View Full Version : Nested Panel



tomalex0
19 Sep 2010, 10:13 PM
HI,

We have component like NestedList is there anything like NestedPanel.
Which have all navigation properties of nestedList but we could add anytype of components as its items.

Is there a way to achieve this

tomalex0
20 Sep 2010, 3:22 AM
Hi,

I just tried to get what i wanted. It's seems to work fine



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SetCard</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var backNav = new Ext.Button({
text: 'Back',
ui: 'back',
handler : function(cmp){
var activeitemindex = p.items.indexOf(p.getActiveItem());
if((activeitemindex) > 0 ){
p.setCard((p.items.indexOf(p.getActiveItem())-1), {
type: 'slide',
direction: 'right',
after: function(a,b){
managePage(p);
}
});
}

}
});

var forwardNav = new Ext.Button({
text: 'Next',
ui: 'forward',
handler : function(cmp){
var activeitemindex = p.items.indexOf(p.getActiveItem());
if((activeitemindex) >= 0 && activeitemindex < (p.items.getCount()-1)){
p.setCard((p.items.indexOf(p.getActiveItem())+1), {
type: 'slide',
direction: 'left',
after: function(a,b,x){
managePage(p);
}
});
}

}
});
var docktoolbar = new Ext.Toolbar({
dock: 'top',
items: [backNav,{xtype: 'component', flex: 1},forwardNav]
});
var p = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
id:'a',
title:'Test A',
html: 'a'
}, {
id:'b',
title:'Test B',
html: 'b'
}, {
id : 'c',
title:'Test C',
html: 'c'
}, {
id : 'd',
title:'Test D',
html: 'd'
}, {
id : 'e',
title:'Test E',
html: 'e'
}, {
id : 'f',
title:'Test F',
html: 'f'
}],
dockedItems: [docktoolbar],
listeners : {
afterrender : function(cmp){
managePage(cmp);
},
cardswitch : function(cmp,newcard,oldcard,index){
managePage(cmp);
}
}
});

function managePage(cmp){
docktoolbar.setTitle((cmp.getActiveItem().title) ? ((cmp.getActiveItem().title)) : '');
var initialIndex = cmp.items.indexOf(cmp.getActiveItem());
if(initialIndex == 0){
backNav.hide();
} else {
backNav.show();
}
if(initialIndex == (cmp.items.getCount()-1)){
forwardNav.hide();
} else {
forwardNav.show();
}
docktoolbar.doLayout();
}
}
});

</script>
</head>

<body>

aconran
23 Sep 2010, 3:15 PM
Yup, sounds like you are looking for a Panel with card layout.

tomalex0
23 Sep 2010, 8:36 PM
yea i was looking for something like that. Do we have a component meant for it?

I have looked in to touchstyle.mobi, looks similar to Nested Panel.

aconran
24 Sep 2010, 8:38 AM
Theres no special component for it, just a Container with a layout of card. Looks like you already have what you need. :)