PDA

View Full Version : List without header



ssdesign
21 Jul 2010, 10:48 PM
Hi,
I would like to have a list without the header.
How can I achieve it?

When I use Nested List, it adds a header to it.
Can I remove that header?

I like the ease of use of Nested List where I don't need to use Store (like in Ext.List).

evant
21 Jul 2010, 11:00 PM
You can, but then your user has no chance to go back if they make a mistake.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var nestedList = new Ext.NestedList({
fullscreen: true,
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
},{
text: 'Option A.1.b'
}]
},{
text: 'Option A.2',
customAttribute: 389
}]
},{
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
},{
text: 'Option B.2',
customAttribute: 2390
}]
},{
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
},{
text: 'Option C.2',
customAttribute: 77
}]
}]
});

nestedList.on('listchange', function(list, item) {
if (!item.items && item.text) {
alert('You chose the ' + item.text + ' item.');
}
});
nestedList.toolbar.hide();
nestedList.doComponentLayout();
}
});

ssdesign
21 Jul 2010, 11:12 PM
No worries, I managed to get the Ext.List working with Store :)

My second question would be. In a list, how can I apply different CSS styles to individual rows?

For example, I have a List with each english language alphabet in each row.
Now I want to identify some of the rows and change the text colour dynamically.
If the condition in my application changes, I would like to again change the text colour etc.

Is this possible?

evant
21 Jul 2010, 11:25 PM
Lists uses templates, templates can have conditions:

http://www.sencha.com/deploy/touch/docs/?class=Ext.XTemplate

Expand the constructor for all the details.