PDA

View Full Version : Json reader



lavap
23 Mar 2010, 2:14 AM
Hi
I am new to this Json reader

how to implement the json reader in my code...

I want to create a array grid using this json grid..

can any body help me in this ..

here is my code..

this is giving errors.....kindly plz help in this..........




Ext.ns('test');

test.app = function(){


return{

init: function(){

var reader = new Ext.data.ArrayReader({}, [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},

{name: 'industry'},

{name: 'desc'}

]);

var grid1 = new Ext.grid.GridPanel({

store: new Ext.data.Store({

reader: reader,

data: Ext.grid.dummyData,


}),

cm: new Ext.grid.ColumnModel([


{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},

{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},

{header: "Change", width: 20, sortable: true, dataIndex: 'change'},

{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},

{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'},

{header: "names",width:10,sortable:false,dataIndex:'desc'},

]),

viewConfig: {

forceFit: true,

width: 600,

height: 300,

title: 'MyGrid',

collapsible: true,

animCollapse: false

}

});


var myReader = new Ext.data.JsonReader({

idProperty:'id',

root: 'rows',

totalProperty: 'results',

Ext.data.DataReader.messageProperty: "msg";

fields:[

// map Record's 'firstname' field to data object's key of same name

{name: 'name'},

// map Record's 'job' field to data object's 'occupation' key

{name: 'job', mapping: 'occupation'}

]
});


results: 2000, // Reader's configured totalProperty

rows: [
// Reader's configured root

// record data objects:

{ id: 1, firstname: 'Bill', occupation: 'Gardener' },

{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },


]






var viewport = new Ext.Viewport({

layout: 'border',

items: [{

region: 'north',

html: 'North',

xtype: 'panel',

height:100,

split: 'true'

},{

region: 'west',

layout:'accordion',

width:300,

items:[{

title: 'pannel1',
autoLoad: 'sw.txt'

},{
title: 'pannel2',
autoLoad: 'dsa.txt' }]


},{
region: 'center',

xtype: 'tabpanel',
activeTab: 0,

items: [grid1

,{

title: 'tab1',
autoLoad :'sw.txt'

},{

title:'tab2',
autoLoad: 'oops.txt'
},{

title:'tab3',

autoLoad:'dsa.txt',

}]

},{

region: 'east',

xtype: 'panel',

html: 'east' ,

split:'true',

width:200


},{

region: 'south',

xtype: 'panel',

html: 'south' ,

split:'true',

height:100

}]});

return viewport
}

};

}();

// Array data for the grids

Ext.grid.dummyData = [

['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing','lavu'],

['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing','lavu'],

['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing','lavu'],

['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance','lavu'],

['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services','lavu'],

['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services','lavu'],

['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing','lavu'],

['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services','lavu'],

['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance','lavu'],
];

Ext.ns('test');

test.app = function(){


return{

init: function(){

var reader = new Ext.data.ArrayReader({}, [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},

{name: 'industry'},

{name: 'desc'}

]);

var grid1 = new Ext.grid.GridPanel({

store: new Ext.data.Store({

reader: reader,

data: Ext.grid.dummyData,


}),

cm: new Ext.grid.ColumnModel([


{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},

{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},

{header: "Change", width: 20, sortable: true, dataIndex: 'change'},

{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},

{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'},

{header: "names",width:10,sortable:false,dataIndex:'desc'},

]),

viewConfig: {

forceFit: true,

width: 600,

height: 300,

title: 'MyGrid',

collapsible: true,

animCollapse: false

}

});


var myReader = new Ext.data.JsonReader({

idProperty:'id',

root: 'rows',

totalProperty: 'results',

Ext.data.DataReader.messageProperty: "msg";

fields:[

// map Record's 'firstname' field to data object's key of same name

{name: 'name'},

// map Record's 'job' field to data object's 'occupation' key

{name: 'job', mapping: 'occupation'}

]
});


results: 2000, // Reader's configured totalProperty

rows: [
// Reader's configured root

// record data objects:

{ id: 1, firstname: 'Bill', occupation: 'Gardener' },

{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },


]






var viewport = new Ext.Viewport({

layout: 'border',

items: [{

region: 'north',

html: 'North',

xtype: 'panel',

height:100,

split: 'true'

},{

region: 'west',

layout:'accordion',

width:300,

items:[{

title: 'pannel1',
autoLoad: 'sw.txt'

},{
title: 'pannel2',
autoLoad: 'dsa.txt' }]


},{
region: 'center',

xtype: 'tabpanel',
activeTab: 0,

items: [grid1

,{

title: 'tab1',
autoLoad :'sw.txt'

},{

title:'tab2',
autoLoad: 'oops.txt'
},{

title:'tab3',

autoLoad:'dsa.txt',

}]

},{

region: 'east',

xtype: 'panel',

html: 'east' ,

split:'true',

width:200


},{

region: 'south',

xtype: 'panel',

html: 'south' ,

split:'true',

height:100

}]});

return viewport
}

};

}();

// Array data for the grids

Ext.grid.dummyData = [

['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing','lavu'],

['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing','lavu'],

['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing','lavu'],

['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance','lavu'],

['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services','lavu'],

['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services','lavu'],

['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing','lavu'],

['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services','lavu'],

['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance','lavu'],
];

steffenk
23 Mar 2010, 3:32 AM
have a look to this screencast:
http://tdg-i.com/325/ext-js-screencast-data-stores-and-gridpanels