PDA

View Full Version : Adding a list



Kurt001
2 Mar 2011, 7:33 AM
Hi there,

I am trying to add a list.
What I did so far, is to copy&paste the code from the API Documentation into my index.js

Thats all I did there, but its not displaying anything. What am I doing wrong.
Here the code from the API, which seems to work until the command list.show();

Any ideas?

Best Kurt


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

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

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

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{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 list = new Ext.List({
fullscreen: true,

itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,

store: store
});
list.show();

tonin10
2 Mar 2011, 1:18 PM
Hello,
Try Ext.data.Store or autoload:true

Riaz
2 Mar 2011, 6:34 PM
I have played with your codes, it is working perfectly on Chrome web browser.

Test One: working fine without list.show()


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

var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',

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

data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ 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' }
],
autoload:true


});

var list = new Ext.List({
fullscreen: true,

itemTpl: '{firstName} {lastName}',
grouped: true,
indexBar: true,
store: store
});
// list.show();
}
});


Test One: working fine with list.show()


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

var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',

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

data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ 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' }
],
autoload:true


});

var list = new Ext.List({
fullscreen: true,

itemTpl: '{firstName} {lastName}',
grouped: true,
indexBar: true,
store: store
});
list.show();
}
});


My observation is, we do not need "autoload:true" in this situation.

Am I correct?

Kurt001
8 Mar 2011, 2:26 PM
I put the list inside a panel and then it shows right away.

Thanks for your help.

I need to look into autoload, to see what it is doing.

Best

Kurt

Riaz
8 Mar 2011, 2:30 PM
my pleasure