PDA

View Full Version : NestedLists and Tabs



rf_qcomm
27 Jul 2010, 9:50 AM
Hi, I am extremely new to javascript and Sencha Touch/extjs. I am trying to make a small app that has a list of items. When an item is clicked, a set of tabs should come up with the data specific to that item. I have tried to get this to working using NestedList and TabPanel building off of the NestedList demo. I have managed to get it to work for the first selection, however if I try to use the back button to go back and then select another item (or the same one again) the program no longer goes to the tabs and instead just slides to an empty panel and the back button breaks. Here is the code I have:


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



onReady: function() {



var tabs = new Ext.TabPanel({
fullscreen: true,
type: '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 nestedList = new Ext.NestedList({
fullscreen: true,
dock: 'bottom',
items: [{


text: 'Option A',
items: tabs
},{
text: 'Option B',
items: tabs
},{
text: 'Option C',
items: tabs

}]
});

nestedList.on('listchange', function(list, item) {

});

}
});

Any Suggestions?

meyerovb
27 Jul 2010, 9:13 PM
The below code should do it, you can add a button to the tabpanel somewhere to send you back to the list.



Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',

onReady: function() {

var tabs = new Ext.TabPanel({
type: '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 list = new Ext.List({
items: [{
text: 'Option A',
tabIndex: 0
},
{
text: 'Option B',
tabIndex: 1
},
{
text: 'Option C',
tabIndex: 2
}],
listeners:
{
listchange:
function(list, item){
mainPanel.setActiveItem(1);
tabs.setActiveItem(item.tabIndex);
}
}
});

var mainPanel = new Ext.Panel({
fullscreen: true,
items:
[list, tabs],
layout: 'card'
});

}
});

meyerovb
27 Jul 2010, 9:14 PM
Also, I have a post in the feature request forum asking to make this easier: http://www.sencha.com/forum/showthread.php?104205

Sencha team plans to overhaul the nestedlist in an upcoming release, hopefully this functionality will be included.

rf_qcomm
28 Jul 2010, 8:31 AM
That code seems to only create a blank list that doesn't move. I tried changing it to a nested list and that showed the text in the list items but there were still no transitions. was that what the tabIndex: # was trying to accomplish? because it doesnt appear to be working.

DigiJan
30 Aug 2010, 11:43 PM
Code provided by meyerovb doesn't work. The transition doesn't work nor does tapping list items. Any ideas how to fix it?

Instead of Tabpanel I'm using Carousel. When user click certain list item, list transitions to carousel and corresponding card (eg. if user taps on the third item on the list, carousel's third card is displayed).

I'd really appreciate your help on this. We're currently evaluating Sencha Touch to be used as one of major frameworks for touch devices in our company.

Br,

Jan

DigiJan
31 Aug 2010, 3:41 AM
In addition to previous:

I'm using listeners on listchange (doesn't get fired ever) and itemtap (occurs, but index on tapped element is always -1). I guess that something has changed because List component doesn't have listchange event in the document (http://dev.sencha.com/deploy/touch/docs/)?

Really would like to get this working... All help is appreciated!

DigiJan
31 Aug 2010, 3:57 AM
and still something more:

itemtap event is fired but the item tapped isn't selected (for the List) eg. doesn't turn blue. What could cause this?

evant
31 Aug 2010, 5:27 AM
Something like this:



Ext.setup({
onReady: function(){

Ext.regModel('Item', {
fields: ['id', 'title']
});

var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
xtype: 'list',
tpl: '<tpl for="."><div class="item">{title}</div></tpl>',
itemSelector: 'div.item',
store: new Ext.data.Store({
model: 'Item',
proxy: 'memory',
data: [{
id: 1,
title: 'Item 1'
},{
id: 2,
title: 'Item 2'
}]
}),
listeners: {
itemtap: function(list, index){
var rec = list.store.getAt(index),
carousel = main.items.last(),
id = 'car-' + rec.get('id'),
item = carousel.getComponent(id);

if(!item){
item = carousel.add({
itemId: id,
html: rec.get('title')
});
}

main.setCard(carousel);
carousel.doLayout();
carousel.setCard(item, 'slide');
}
}
},{
xtype: 'carousel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
main.setCard(0);
}
}]
}]
}]
});
}
});