PDA

View Full Version : grid data not rendering



smdvq
4 Mar 2010, 8:02 AM
Hi, i am new to extjs. I am trying to make grid inside a Panel and load data using JsonStore. I am able to render grid headers but i cant see any data. Grid should be rendered inside a panel after button is pressed. Here is code:



function launchToDo(btn) {
//my records name is the same as mapping so i dont define mapping
var recordFields = ['id','todo'];

var rem_store = new Ext.data.JsonStore({
fields : recordFields,
paramsAsHash:false,
url : 'todo_getList.action',
root : 'records',
id : 'ourRemoteStore',
autoLoad : false,
remoteSort : false
});

rem_store.load();
//panel where i put my new grid
var panel = Ext.getCmp('centertopPanel');

//if my grid is rendered i remove it so it wont render again after pressing button launching my //grid
var f;
while(f = Ext.getCmp('todo_grid')){
panel.remove(f, true);
}

//toolbar it is working correctly
var tbar = new Ext.Toolbar({
items: [
new Ext.Button({
text: ' New',
handler: addNewTodo,
cls: 'x-btn-text-icon',
icon: 'images/shine/24x24/18_24x24.png'
})
]
});
//here i add the grid to the panel
panel.add({
xtype : 'grid',
autoHeight: true,
tbar: tbar,
id: 'todo_grid',
layout: 'fit',
cm :
new Ext.grid.ColumnModel([
{header: "Id", width: 120, dataIndex: 'id', sortable: true},
{header: "Todo", width: 120, dataIndex: 'todo', sortable: true}

]),
store : rem_store,
renderTo: 'centertopPanel',
viewConfig:{
forceFit: true,
}
})

panel.doLayout();
}


I have no clue what i am doing wrong. Json response seems to be right:



{"records:":[{"id":1,"todo":"sbc"},{"id":2,"todo":"kkk"},{"id":3,"todo":"aaa"},{"id":4,"todo":"qqqq"},{"id":5,"todo":"sss"},{"id":6,"todo":"test"},{"id":7,"todo":"test"},{"id":8,"todo":"bbbbb"}]}

8 Mar 2010, 5:47 AM
first, don't use 'renderTo' when adding a component as a child item to another.

Second, does your store have autoLoad : true set?

smdvq
8 Mar 2010, 6:23 AM
I removed renderTo and set autoLoad to true also removed store.load(). Still same situation grid headers are rendered but it does not load any data.

Mike Robinson
8 Mar 2010, 7:52 AM
Go to the ExtJS examples and use Firebug to watch exactly what the client sends to the host, and exactly what the host sends back to the client. Your host response must exactly match the (rather poorly documented) specification, and this is best done by-example.

In a word... "if you're seeing what you're seeing now, almost without a doubt, 'this is why.'"

Pay attention to everything... including CaSe SeNSiTiVIty.

smdvq
8 Mar 2010, 11:09 AM
I finally made this work. I really dont know why this code works and why the one from beginning of my post not. Here is what i done:

//Changed store definition using proxy and reader, no extra options, using store instead of jsonstore. One major change is that i removed header of my json named record as u can see in previous post so my json response looks now:


[{"id":1,"todo":"sbc"},{"id":2,"todo":"kkk"},{"id":3,"todo":"aaa"},{"id":4,"todo":"qqqq"},{"id":5,"todo":"sss"},{"id":6,"todo":"test"},{"id":7,"todo":"test"},{"id":8,"todo":"bbbbb"},{"id":9,"todo":"ccc"}]

And here is the code:




var proxy = new Ext.data.HttpProxy({url:'todo_getList.action'});

var reader=new Ext.data.JsonReader({},[
{name: 'id', mapping: 'id'},
{name: 'todo', mapping:'todo'}
]
)

var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});

store.load();


Now standard grid, didnt set any height or anything.


var grid = new Ext.grid.GridPanel({
border:false,
ds: store,
cm:new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Id", width: 120, dataIndex: 'id', sortable: true},
{header: "todo", width: 180, dataIndex: 'todo', sortable: true},
]),
viewConfig: {
forceFit:true
},
// renderTo:'poker-grid',
//width:520,
//height:200,
tbar:tbar
});



Last adding grid to panel:



panel.add(
grid
);

panel.doLayout();


and now my panel generates data.

8 Mar 2010, 12:12 PM
The JsonStore class is more of a convenience class, thus not requiring you to have to create a proxy, etc to configure a JSON -data consuming store.

I think your problem is that you didn't *load* the grid

smdvq
8 Mar 2010, 2:36 PM
Ok, i switched back to JsonStore and now it is working :). The only thing i did is to remove line: root : 'records' with my Json response without any root. Here is code:




var recordFields = ['id','todo'];

var store = new Ext.data.JsonStore({ //2
fields : recordFields,
url : 'todo_getList.action',
});

store.load();



So simple, but i found in some documentation that with json array the root element is required. But here if root is specified it will not render data. Maybe my json response with root element was not properly formatted?