PDA

View Full Version : detail view from List within TabPanel?



merry andrew
22 Jul 2010, 10:13 AM
I've placed an example of a List (with items that show a details screen) within a TabPanel. I run into trouble when an item is tapped but the detail screen doesn't display. Is there a way I can update the contents of the troubleCard so the details display where the List is shown?

Here's the code I'm experimenting with:

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

onReady: function() {

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Jamie',
lastName: 'Avins'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
troubleCard.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName')
});
}
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
hidden: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details',
items: [{
text: 'Back',
handler: function(){
troubleCard.setCard(0);
}
}]
}],
});

var troubleCard = {
layout: 'auto',
animation: 'slide',
items: [list, detail]
};

var menu = new Ext.TabPanel({
fullscreen: true,
activeItem: 0,
ui: 'dark',
animation: 'slide',
layout: 'card',

defaults: {
scroll: 'vertical'
},

tabBar: {
dock: 'bottom',
sortable: false,
layout: {
pack: 'center'
}
},

items: [{ // time card
title: 'Time',
html: 'tick tock',
iconCls: 'time',
}, { // trouble card
title: 'Trouble',
iconCls: 'search',
items: troubleCard
}]
}); // ends menu
} // ends onReady: function()
}); // ends Ext.setup

Thank you for your time :)

andycramb
22 Jul 2010, 1:52 PM
You are calling the setCard method on the troubleCard object which is a standard js object and not an Ext component so the setCard method is undefined.
If it helps I used Chrome developer console and set a breakpoint within the event handler and then stepped through it.
I have been playing around with this kind of UI pattern and have an example online (http://www.cramb.org.uk/sencha/dev/bsl_v4/)which may help.

I did have an issue with it when I called the update method before the set card. If I clicked on a list item and then clicked back and then clicked on the list item again the body would mask the toolbar. I moved the update call to after the setCard method and it works without any issues now. I may have to check or get some input to see if I had set something up wrongly when I called the update method before the setCard.

Anyway hope that helps
Andy

evant
22 Jul 2010, 3:07 PM
There's 2 problems:

1) As @andycramb pointed out, troubleCard is just a JS literal. You need to create a panel instance.
2) Since it doesn't have a card layout, you can't call setCard on it!



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

onReady: function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Jamie',
lastName: 'Avins'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
troubleCard.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName')
});
}
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
hidden: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details',
items: [{
text: 'Back',
handler: function(){
troubleCard.setCard(0);
}
}]
}],
});

var troubleCard = new Ext.Panel ({
layout: 'card',
animation: 'slide',
items: [list, detail]
});

var menu = new Ext.TabPanel({
fullscreen: true,
activeItem: 0,
ui: 'dark',
animation: 'slide',
layout: 'card',

defaults: {
scroll: 'vertical'
},

tabBar: {
dock: 'bottom',
sortable: false,
layout: {
pack: 'center'
}
},

items: [{ // time card
title: 'Time',
html: 'tick tock',
iconCls: 'time',
}, { // trouble card
title: 'Trouble',
iconCls: 'search',
layout: 'fit',
items: troubleCard
}]
}); // ends menu
} // ends onReady: function()
}); // ends Ext.setup

merry andrew
22 Jul 2010, 3:44 PM
1) Thank you both very much! :D
...
3) I also needed to specify a layout for the menu item titled Trouble. evant probably added it without a second thought, since troubleCard doesn't display at all for me without it.



items: [{ // time card
title: 'Time',
html: 'tick tock',
iconCls: 'time',
}, { // trouble card
title: 'Trouble',
iconCls: 'search',
layout: 'fit',
items: troubleCard
}]

evant
22 Jul 2010, 4:00 PM
Alternatively, just get rid of the extra panel. Make troubleCard ~be~ the tab.

merry andrew
22 Jul 2010, 5:56 PM
Aha, I like it! I feel like I understand the framework better now, thank you again :)