PDA

View Full Version : Create and populate Card on List itemtap



nicholasgins
21 Dec 2010, 10:18 AM
I'm a novice at sencha. I am unable to grasp what I need to do to accomplish the following user experience and UI.

User:
Starts App
Clicks/Taps "Menus" Bottom Tab [The Menu List is presented]
Clicks/Taps a Menu - List item [Carousel is presented with the content of the Store's data]
User uses a carousel to move between sections and vertical scroll with in the section - [Back Button is Presented to go back to the Menu (list)]


This may or may not be complicated. I am just not able to grasp at the moment what key pieces need to fit together to accomplish this.

Here is my code so far.



//############ index.js ####################

new Ext.Application({
name: 'list menu',
launch: function(){
new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
fullscreen: true,
tabBarDock: 'bottom',
dockedItems:[
{xtype: 'toolbar', title: 'List Menu'}
],
items:[
{items: [listCont], cls: 'menu', title: 'Menus'}, //WILL CREATE ICONCLS SOON
]
});
}
});



//################# list.js #########################


Ext.regModel('Menus', {
fields: [
{name:'id', type: 'int'},
{name:'title', type: 'string'},
{name:'content',type: 'string'}],
proxy: {
type: 'localstorage',
id : 'menus'
}
});


var store = new Ext.data.Store({
model: 'Menus',
data:[
{
"id":1,
"title":"menu1",
"content":"menu1"
},
{
"id":2,
"title":"menu2",
"content":"menu2"
},
{
"id":3,
"title":"menu3",
"content":"menu3"
},
{
"id":4,
"title":"menu4",
"content":"menu4"
}
]
});

var list = new Ext.List({
title:'Menus',
itemTpl: '{title}',
store: store
});


list.on('itemtap',function(subList, subIdx, el, e){
var ds = subList.getStore();
r = ds.getAt(subIdx);

///WHAT DO I DO NEXT???

});

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


Please let me know if there is currently a post about this and or help with code suggestions would be awesome.

Thank you in advance.

Old McStopher
30 Jun 2011, 1:25 PM
I'm trying to do the exact same thing. I have a skeleton setup with tabs and a few other things, but it's not clear to me from the kitchen sink examples how to create a new card/panel/view when a user taps a list item and still have them be able to return to the menu from which they came.

If you ever figured this out, any help would be much appreciated.

Many thanks

Old McStopher
30 Jun 2011, 1:33 PM
The list items I'm talking about are being dynamically rendered from a JSON object and will need to link to a unique "page" for each.