Why JsonStore don't display date?

[edwardking]

I use JsonStore to display some data,like follows:

Ext.onReady(function(){
Ext.QuickTips.init();
var header=new Ext.Panel({
height:70,
region:'north'
});
var cols=[
{header:'contractNo',width:160},
{header:'value',width:160},
{header:'company',width:160}
];
var center=new Ext.Panel({
width:200,
region:'center',
columns:cols,
store:mystore,
stripeRows:true
});
new Ext.Viewport({
layout:'border',
items:[header,center]
});
var mystore=new Ext.data.JsonStore({
fields:['contractNo','value','company']
});
var data=[{
'contractNo':'a100001','value':'100','company':'HP'
}];
mystore.loadData(data);
});

When I run above code,I can't see any record,where is wrong? How to correct it?
Thanks

[dj]

(a) Ext.Panel has no store property. You probably meant to create an Ext.grid.GridPanel
(b) Your creation order is wrong. You have to first create the store to be able to pass it along as a config option.



Ext.onReady(function(){
Ext.QuickTips.init();
var mystore=new Ext.data.JsonStore({
fields:['contractNo','value','company']
});
var data=[{
'contractNo':'a100001','value':'100','company':'HP'
}];

var header=new Ext.Panel({
height:70,
region:'north'
});
var cols=[
{header:'contractNo',width:160},
{header:'value',width:160},
{header:'company',width:160}
];
var center=new Ext.grid.GridPanel({
width:200,
region:'center',
columns:cols,
store:mystore,
stripeRows:true
});
new Ext.Viewport({
layout:'border',
items:[header,center]
});

mystore.loadData(data);
});