PDA

View Full Version : Populating list from Localstorage



ssdesign
3 Aug 2010, 10:18 PM
Hi,
What is the best way to populate a list component from a localstorage?

I can query the local storage and get an array of text items.
How can I use this array to generate list?

Most of the list examples I see are using Store.

Can anyone show me an array example?

Thanks a lot.

evant
3 Aug 2010, 10:32 PM
Well, you already know how to create a list, so I'm guessing it's more how do I make a store out of an array?



var items = ['a', 'b', 'c'],
data = [];

Ext.each(items, function(item){
data.push({
name: item
});
});


Your data is now in the same format as the list example.

ssdesign
3 Aug 2010, 10:59 PM
Thanks for your help.

but I get some error:
"Unexpected token ." on line "Ext.each(items, function(item){"

Here is my code:


function loadLibrary(btn){

Ext.regModel('FList', {
fields: ['id', 'name']
});
var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {name}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,
store: new Ext.data.Store({
model: 'FList',
sorters: 'id',

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

data: []
})
};


var items = [['1', 'First'], ['2', 'Second'], ['3', 'Third']],
Ext.each(items, function(item){
data.push({
id: item[0]
});
data.push({
name: item[1]
});
});


new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();

}

ssdesign
3 Aug 2010, 11:08 PM
Sorry there was a syntax error:



function loadLibrary(btn){

Ext.regModel('FontsList', {
fields: ['id', 'fontname']
});
var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,
store: new Ext.data.Store({
model: 'FontsList',
sorters: 'id',

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

data: []

})
};


var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']];
Ext.each(items, function(item){
data.push({
id: item[0]
});
data.push({
fontname: item[1]
});
});


new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();

}


Still something wrong i guess.

evant
3 Aug 2010, 11:17 PM
a) You're referencing a variable data that is never defined.
b) You create the store before the data.

ssdesign
3 Aug 2010, 11:28 PM
ok, realised something i was doing wrong.

HEre is my updated code.

Now I get a bit further, but the rows are still appearing empty.



function showFontListPopup(){

myBlackButton1.on('click', function()
{
alert('You clicked me');
}
);
}

function loadLibrary(btn){
Ext.regModel('FontsList', {
fields: ['id', 'fontname']
});
var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
Ext.each(items, function(item){
data.push({
id: item[0], fontname: item[1]
});
});

var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
// grouped: true,
//indexBar: true,
data: items
};
new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}

ssdesign
3 Aug 2010, 11:29 PM
I posted a reply, not sure where it went. so posting again:



function showFontListPopup(){

myBlackButton1.on('click', function()
{
alert('You clicked me');
}
);
}

function loadLibrary(btn){
Ext.regModel('FontsList', {
fields: ['id', 'fontname']
});
var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
Ext.each(items, function(item){
data.push({
id: item[0], fontname: item[1]
});
});

var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
// grouped: true,
//indexBar: true,
data: items
};
new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}

ssdesign
3 Aug 2010, 11:34 PM
if my post goes for moderation, how long should I wait before trying again?

This is what I was replying:

I realised some mistakes and modified the code a bit:



function loadLibrary(btn){
Ext.regModel('FontsList', {
fields: ['id', 'fontname']
});
var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
Ext.each(items, function(item){
data.push({
id: item[0], fontname: item[1]
});
});

var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
// grouped: true,
//indexBar: true,
data: items
};
new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}


Now I get the correct number of rows in the list but they are empty.

ssdesign
3 Aug 2010, 11:42 PM
got it finally :)



function loadLibrary(btn){
Ext.regModel('FontsList', {
fields: ['id', 'fontname']
});
var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
Ext.each(items, function(item){
data.push({
id: item[0], fontname: item[1]
});
});

var groupingBaseList = {
tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
store: new Ext.data.Store({
model: 'FontsList',

data: data
})

// grouped: true,
//indexBar: true,
//data: items
};
new Ext.List(Ext.apply(groupingBaseList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}