Reloading an Ext.List [Archive]

View Full Version : Reloading an Ext.List

rickywalker

15 Jul 2010, 7:18 AM

Hi,

First of all, great work with this UI, I'm really enjoying using it. I've hit a problem that I can't find an answer for...

I have an Ext.List that is populated using an Ext.data.Store, I want to repopulate this list with JSON data dynamically from an Ajax call. I can get it to update with
dataStore.loadData(newDataJSON)
but it only updates the same number of rows that exist even if the JSON response has more data rows.

Any ideas?

Kind regards

Ricky Walker

httpdotcom

15 Jul 2010, 9:57 AM

Without code, it would be difficult to make an informed opinion, but wouldn't it be better to use the Store.load() or reload() functions?

rickywalker

15 Jul 2010, 12:45 PM

Thanks for the reply httpdotcom, I've created a limited demo of my issue below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="styles/ext-touch.css" type="text/css"/>
<script src="scripts/ext-touch-debug.js" type="text/javascript"></script>
<script type="text/javascript">

var initialData = [ { name:"one" } , { name:"two" } ];
Ext.setup({
onReady: function() {

Ext.regModel('demo', {
fields: ['name']
});

store = new Ext.data.Store( {
model: 'demo',
sorters: 'name',
getGroupString : function(record) {
return record.get('name')[0];
},
data:initialData
} );

list = new Ext.List( {
tpl: '<tpl for="."><div>{name}</div></tpl>',
itemSelector: 'div',
store:store
} );

button = new Ext.Button( {
text:'update',
handler: function() {
var newData = [ { name:"one" } , { name:"two" }, { name:"three" } ];
store.loadData(newData);
}
})

panel = new Ext.Panel( {
fullscreen:true,
items: [ list, button ]
})
}
});
</script>
</head>
<body>
</body>
</html>

Reading the API again I could probably use load() but I think the code above highlights an issue anyway.