Grid for iTunes-like interface - best practices?

[pianoroy]

Hello everyone,

I'm just starting with the Ext framework... It's great, but the API for Ext.grid.Grid and friends (Ext.data, etc.) is a bit complicated for a newb.

I'm putting together an iTunes-like interface with select-boxes above and a grid below. My problem is to refresh the grid every time a selection is made above. Link to screenshot here.
http://lh5.google.com/roytinker/RpfEbVpsizI/AAAAAAAAABE/OaWtSIPYfO0/s288/testing-screenshot.jpg (http://picasaweb.google.com/roytinker/RandomStuff/photo#5086750278085806898)

I have all the pieces ready, including a column model and a double-nested array of row data (which comes from the Ajax-response that I built). I just need to tell the grid to display the new row data every time the user selects something... something like grid.displayData(my_row_data) would be really nice. ;)

Here's what I have (let me know if you want the whole GridArea class... I've only included the parts that pertain to this question). Note that I'm using some Prototype.js constructs.


var GridArea = Class.create();
Object.extend(GridArea.prototype, {
initialize: function(container_id, fields) {
this.container_id = container_id;
this.lock_id = 0;
this.field_list = $H(fields);

var columns = new Array();
var fields = new Array();
this.field_list.values().each(function(value) {
columns.push({header: value});
fields.push(value);
});
this.fields = fields;
this.column_model = new Ext.grid.ColumnModel(columns);

this.data_store = new Ext.data.SimpleStore({
data: [],
fields: this.fields
});

this.grid = new Ext.grid.Grid(this.container_id, {
cm: this.column_model,
ds: this.data_store,
});
this.grid.render();

var grid_footer = this.grid.getView().getFooterPanel(true);
this.pager = new Ext.PagingToolbar(grid_footer, this.data_store, {
pageSize: 50,
displayInfo: true,
displayMsg: 'Displaying test cases {0} - {1} of {2}',
emptyMsg: "Please make a selection above."
});
this.data_store.load();
},

setData: function(data_array) {
this.pager.unbind(this.data_store);
delete this.data_store;

this.data_store = new Ext.data.SimpleStore({
data: data_array,
fields: this.fields
});

this.grid.reconfigure(this.data_store, this.column_model);
this.pager.bind(this.data_store);
data_store.load();
this.grid.getView().refresh();
}
}

That's about the best I can muster, but it's really slow and the data values don't show up, just blanks. Any tips? Thanks very much.

[pianoroy]

Basically, if someone could point me to another forum post or tutorial that talks about dynamically loading data from an array. I don't need a dynamic column model, just some way to repeatedly load different arrays of data into the grid.

Thanks!

[dnixon]

I think you need to have two levels of store - one that contains the entire caboodle (maybe read via Ajax via HttpProxy)
and another one that just contains your displayed data and uses a MemoryProxy that gets data from the other (big) store.
I have to do something like this for big address books (10k records) at some point.

Dave

[pianoroy]

Thanks for the reply, dnixon. Actually, I already have all the data storage handled. I just need some way of loading the data into the Grid.

I actually made some progress. I'm using the Ext.data.SimpleStore. I just learned that a simple loadData, followed by a fireEvent on the Store will load the array and refresh the grid. So my setData function is really simple now:



setData: function(data) {
this.data_store.loadData(data);
this.data_store.fireEvent('datachanged');
}


However, all the data shows up as blank cells. :-? Here's what the data array looks like (just a couple of rows) -- this is what is coming into the setData function:



[["211","Install Wizard Test", "120", "False", "False", "12/14/2004", "12/14/2004", "", "Ron Howard", "InstallMaker", "12.2", "Functional", "", "Standard","","Every two weeks","" ,"Automation"],
["527","Config Wizard Test", "4", "False", "False", "12/14/2004", "12/14/2004", "","Jennifer Jones","InstallMaker","12.3","Functional","","Standard","","Every three weeks","","Automation"]]

[dnixon]

I suggest replacing your data store and column model with those from one of the grid examples that gets data from a file or memory to verify your grid is working ok, then gradually change things back to using your data - hopefully you will find the problem.