PDA

View Full Version : Inserting a List in a TabPanel Card



nobosh
1 Jul 2010, 6:25 PM
I have 3 TabPanel items. For the People TabPanel Items, I am trying to get a contact list to load. Currently, when the contact list loads it blocks the TabPanel at the bottom of the page, breaking the app. What is the correct way to insert the contact list in the card?



Ext.setup({
onReady: function () {

var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

var peopleDisplay = new Ext.Component({ scroll: 'vertical',
tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
});

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

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,

indexBar: true,

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

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

data: [
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
})
};

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card', items: [{ html: 'Please Wait...' }, groupingBase],
listeners: {
activate: function () {

if (!Ext.platform.isPhone) {
new Ext.List(Ext.apply(groupingBase, {})).show();
}

this.getLayout().setActiveItem(0);

}
}
};

new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
items: [favoritesTab, peopleTab, settingsTab]
});

}
});


Thanks

meyerovb
1 Jul 2010, 9:54 PM
What your code does is create a new list and show it, which overlays the entire page. What you want to do is add the new list to the card where you want to show it. Here's the new code for peopleTab to do that:



var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [{ html: 'Please Wait...' }, { xtype: 'panel'}],
listeners: {
activate: function () {
if (!Ext.platform.isPhone &&
//ensure we don't double add the list
this.getLayout().getLayoutItems()[1].getLayout().getLayoutItems().length == 0)
this.getLayout().getLayoutItems()[1].add(new Ext.List(Ext.apply(groupingBase, {})));
this.setCard(1);
}
}
};
However, there's two issues with this.

One: because the data is static on the page, there's no need to have a Please Wait... card. That was there in case you were doing a callback. Note - There are two other approaches to blocking: hiding and showing an element on a single card (which won't give you the fancy animation when it's done); or modalling the screen out while it's working (feature request 119 will give us an in-card modal, so the user can switch card's while one is busy).

Two: sencha is a lazy load system... the item isn't rendered until it's card is first shown. The creation of the list js object itself should be trivially light, so I don't see an advantage to adding it to the card in the activate method. An easier solution would be the following, which allows you to switch to the tab without having to worry about dynamically adding content to it.



var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [Ext.apply(groupingBase, {xtype: 'list'})] };
An even easier one would be to just add xtype:'list' to the groupingBase definition, then just add the groupingBase object itself to the items collection :)

nobosh
2 Jul 2010, 8:37 AM
@meyerovb, wow very helpful. For some reason though this is inserting the client list in the card but it hugely zoomed in and isn't displaying properly. Am I missing some style setting?

meyerovb
2 Jul 2010, 9:59 AM
Looks fine to me in safari, scrolls fine too

21241


Ext.setup({
onReady: function () {

var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

var peopleDisplay = new Ext.Component({ scroll: 'vertical',
tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
});

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

var groupingBase = {
xtype: 'list',
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,

indexBar: true,

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

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

data: [
{ firstName: 'Ape', lastName: 'Evilias' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Michael', lastName: 'Mullany' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson' },
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Michael', lastName: 'Mullany' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson' },
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Michael', lastName: 'Mullany' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson' }
]
})
};

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [Ext.apply(groupingBase, { xtype: 'list' })]
};

new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
items: [favoritesTab, peopleTab, settingsTab]
});

}
});

TommyMaintz
2 Jul 2010, 12:01 PM
Are you starting your app using Ext.setup({onReady: function(){})? The setup method will automatically add meta tags to the page that will prevent the page from zooming in etc.

nobosh
3 Jul 2010, 8:35 AM
Thanks all, that's working fantastically. The issue was I was working off an example that had the following CSS:


.x-tabpanel > .x-panel-body .x-panel-body {
padding: 100px 0;
text-align: center;
font-size: 72px;
font-weight: bold;
color: rgba(0,0,0,.2);
text-shadow: rgba(255,255,255,.2) 0 1px 0;
padding: 100px 15%;
}

nobosh
3 Jul 2010, 9:04 AM
Now that we have a nice contact list loading, it makes sense to want to be able to click a contact in the list, slide over, and see a contact detail page which has a toolbar with a back button etc. And somehow an identified to know which contact was selected.

I'm guessing that to make this happen I want to use the "itemSelector" defined in the groupingBase above, is that correct? If so, I'm not seeing anything in the documentation that points on how to use this. Is there a URL anyone can point me to?


Thanks

nobosh
7 Jul 2010, 9:59 AM
Anyone have any pointer or urls to the API I should learn? Thanks

TommyMaintz
7 Jul 2010, 11:06 AM
So by specifying the itemSelector, you tell the List component how to figure out which markup belongs to which item. This allows the list to fire an event called selectionchange, to which the selected item is passed.

nobosh
7 Jul 2010, 11:13 AM
Thanks Tommy! Do any of the examples illustrate how to make this happen, support the back btn etc?

TommyMaintz
8 Jul 2010, 11:50 AM
The List example shows how to use the List component. For automatic back button management etc you might want to look at the nestedlist component.