PDA

View Full Version : Tabs with NestedLists



spaceman123
24 Mar 2011, 4:06 AM
I'm new to Sencha and have been trying to build my first app. So far it's going very slowly :( because I can't work out how to add a nestedlist to the bottom tabs instead of the html. I found 'tabs2' in the kitchensink example and it looks like the sort of thing I'm after, but I don't know how to get it to load a nestedlist instead of html.
The code I've got is:

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'
}]
});
}
});

I'd like three of the buttons to load nestedlists, one to load a search form and the other to just load the html. Is this possible?

spaceman123
24 Mar 2011, 10:03 AM
I came across this:

var tabPanel;

var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
items: [{
html: 'Home Page'
}]
});

var newsPanel = new Ext.Panel({
title: 'Location',
iconCls: 'locate',
fullscreen: true,
items: [{
html: 'News Page'
}]
});

var userPanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: 'User Page'
}]
});

var helpPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: 'Help Page'
}]
});

var testPanel = new Ext.Panel({
fullscreen: true,
items: [{
html: 'test panel'
}]
});

var feedtabpanel = new Ext.TabPanel({
fullscreen: true,
ui : 'dark',
sortable : true,
items: [
{
title: 'Tab 1',
html : '1',
cls : 'card1'
},
{
title: 'Tab 2',
html : '2',
cls : 'card2'
},
{
title: 'Tab 3',
html : '3',
cls : 'card3'
}
]
});


var menuData = [{
text: 'Outside Cameras',
items: [{
text: 'Shed',
card: testPanel,
leaf: true
},{
text: 'Deck',
leaf: true
}]
},
{ text: 'Inside Cameras',
items: [{
text: 'Office',
card: testPanel,
leaf: true
},{
text: 'Living Room',
leaf: true
}]
},
{ text: 'Mobile Cameras',
items: [{
text: 'Car',
card: testPanel,
leaf: true
},{
text: 'Helmet',
leaf: true
}]
}];


Ext.regModel('Cars', {
fields: [
{name: 'text', type: 'string'}
]
});

var store = new Ext.data.TreeStore({
model: 'Cars',
proxy: {
type: 'ajax',
url: '/test2.php',
reader: {
type: 'tree',
root: 'items'
}
}
});

var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
store: store,
iconCls: 'settings',
});

nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;

if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}

if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});

Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',

onReady: function() {

tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
newsPanel,
userPanel,
helpPanel
]
});
}
})

And it's exactly what I want, but is it possible to load more than one nestedList so that each button has their own?

Thanks