TabPanel, NestedList and card problems

[mozicodo]

I have to following code below which is not showing any of the cards. I'm sure I'm missing something obvious.


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

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

var menuData = {
text: 'Test Menu',
items: [{
text: 'My Test',
card: testPanel,
leaf: true
},{
text: 'Blank Leaf',
leaf: true
}]
};

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

var store = new Ext.data.TreeStore({
model: 'ListItem',
root: menuData,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

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

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

onReady: function() {

new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'cardslide',
cover: true
},
items: [nestedList,
{title: 'About',
card: aboutPanel,
leaf: true
}
]
});
}
})

[mozicodo]

Ok. I answered one of my questions. The About tab now works. I'm still not sure why the card is not showing when clicking on the first item in the nested list:


var aboutPanel = new Ext.Panel({
title: 'About',
iconCls: 'info',
fullscreen: true,
items: [{
html: 'about'
}]
});

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

var menuData = {
text: 'Test Menu',
items: [{
text: 'My Test',
card: testPanel,
leaf: true
},{
text: 'Blank Leaf',
leaf: true
}]
};

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

var store = new Ext.data.TreeStore({
model: 'ListItem',
root: menuData,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

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

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

onReady: function() {

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

[mrnap]

Pretty sure this code:



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


needs to be something like this:



var listItemModel = new Ext.regModel('ListItem', {
fields: [
{name: 'text', type: 'string'}
]
});


You can also get rid of the array stuff from the fields param since you're only using 'text' as a field.

[mozicodo]

According to the docs and the kitchen sink example, I shouldn't have to do it that way. I did tweak one thing but it didn't make a difference.



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

[mozicodo]

Ok. Figured it out. I think in a previous version of Sench Touch the NestedList setup didn't need to be so involved. In the current version, I needed to change the card on the tap event. The specific code is as follows:


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;
}
});


and the full code for those interested is:


var tabPanel;

var aboutPanel = new Ext.Panel({
title: 'About',
iconCls: 'info',
fullscreen: true,
items: [{
html: 'about'
}]
});

var optionsPanel = new Ext.Panel({
title: 'Options',
iconCls: 'settings',
fullscreen: true,
items: [{
html: 'options'
}]
});

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

var menuData = [{
text: 'Test Menu',
items: [{
text: 'My Test',
card: testPanel,
leaf: true
},{
text: 'Blank Leaf',
leaf: true
}]
}];

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

var store = new Ext.data.TreeStore({
model: 'ListItem',
root: {
items: menuData
},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

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

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: [
nestedList,
optionsPanel,
aboutPanel
]
});
}
})

[mrnap]

Very cool, looks like you fixed your JSON data, I was just about to put it in the validator because it looked a bit funky to me :)