PDA

View Full Version : Grid load JSON data


shiftup
18 Jan 2012, 7:51 AM
Hi! Sorry for a threat like this, but Im starting ExtJS4. :D

I cant execute the exemple localy:
http://extjs.org.cn/extjs/examples/grid/json-grid.html

The Grid does not show the data from JSON.
Firebug shows the json data:

GET http://localhost/survey.html....
...

[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32"....so on....

But appears the error: this.model is undefined
ext-all.js - line 15
(function(){var e=this,a=Object.prototype,g=a.toString,b=true,d={toString:1},c;if(t...)....


Whats wrong? :-?





Here is the codes...

JSON


[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]


HTML


<html>
<head>
<title>Test Ext</title>


</style>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>


JS



Ext.require([
'Ext.tab.*'
,'Ext.window.*'
,'Ext.tip.*'
,'Ext.layout.container.Border'
,'Ext.window.MessageBox'
,'Ext.grid.*'
,'Ext.data.*'
,'Ext.util.*'
,'Ext.state.*'
,'Ext.form.*'
]);


Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy( {url:'survey.html'});

//Reader
var reader=new Ext.data.JsonReader( { },[
{name: 'appeId', mapping: 'appeId'},
{name: 'survId'},
{name: 'location'},
{name: 'surveyDate'},
{name: 'surveyTime'},
{name: 'inputUserId'} ] )

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

//Load
store.load();

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true}, {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true}, {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true} ], renderTo:'example-grid',
width:540,
height:200
});});
wallynm
18 Jan 2012, 8:39 AM
Hello... :D
Well, i didn't tested, but every store need to have a model, only treestores auto create their model if any model is passed. Just create your model, set it on store an try again...
shiftup
18 Jan 2012, 8:51 AM
Thanks wallynm (http://www.sencha.com/forum/member.php?187256-wallynm)!
ExtJS4 requires the model, I didnt know that.
But its working now! ;)

Now, the correct code.
JS


Ext.require([
'Ext.tab.*'
,'Ext.window.*'
,'Ext.tip.*'
,'Ext.layout.container.Border'
,'Ext.window.MessageBox'
,'Ext.grid.*'
,'Ext.data.*'
,'Ext.util.*'
,'Ext.state.*'
,'Ext.form.*'
]);




Ext.onReady(function(){


Ext.define('model_1',{
extend:'Ext.data.Model',
fields:[
{name: 'appeId'},
{name: 'survId'},
{name: 'location'},
{name: 'surveyDate'},
{name: 'surveyTime'},
{name: 'inputUserId'}
]
});
var store = new Ext.data.Store({
model:'model_1',
autoLoad:true,
proxy:{
type:'ajax',
url:'survey.html',
reader:{
type:'json'
}
},
actionMethods:{read:'´POST'}
});



// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});


});