View Full Version : Grid does not load data..?

2 Aug 2011, 1:03 PM
Hi All,

I'm trying to load data into my grid, but it never displays the info. First let me explain what i'm trying to do; I want to load a list of all users in one grid with a checkbox selection model, and after selecting the users to add, they are then added to another grid.

So I have created a grid from the samples along with my array reader and grouping store. I go through my users and add them to the grouping store, which they are there. Then when I finally load the panel with the grid I see no data but where I can see the users in firebug... The only thing I can think of is that i'm only trying to use two columns in the grid instead of all the field in the grouping store.

this.userReader = new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'organization'},
{name: 'joined'},
{name: 'contact'}

this.userStore = new Ext.data.GroupingStore({
reader: this.userReader,
data: [],
sortInfo: {field: 'name', direction:"ASC"},
groupField: 'organization'

var csm = new Ext.grid.CheckboxSelectionModel({
listeners: {
selectionchange: function(sm){


this.usersGrid = new Ext.grid.GridPanel({
id: 'usersGrid',
store: this.userStore,
cm: new Ext.grid.ColumnModel([
{id:'name',header:"Name",sortable: true, dataIndex: 'name' },
{header: "joined", width: 250, sortable: true, dataIndex: 'joined'},
sm: csm,
columnLines: true,
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
frame: false,
title: 'Available Users',
width: 400,
height: 200,
text: 'Add Users',
tooltip: 'Add users to participate',
scope: this,
handler: function(){
// get all selected users when working

When I eventually make my way to displaying the grids I go thru this process

this.users = new Array(data.length);
for (i=0; i < data.length; i++)
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var name = (firstname + " " + lastname);

this.users[i] = [name, data[i].org, data[i].joined, data[i].email];
} // for

this.userStore.loadData(this.users, false);

// ...
// grid added to panel
this.myPanel.add( this.usersGrid ); // i can see the users thru firebug here!
this.myPanel.doLayout(); // but don't show up here..
I've done this process with combo boxes and grids before and it has worked like a charm, but I cannot think of anything else that would cause this.

Any help is appreciated,

3 Aug 2011, 9:08 AM
Well it turns out that you need to have the column in the grid in order to use the grouping and that fixed it! Set the column to hidden and everything is how i wanted.