PDA

View Full Version : Grid filling in Architect, but not in Browser



mice-pace
13 Sep 2012, 9:53 PM
When I go to my Store in Architect and click 'Load Data' it says '4 records loaded' and I can then see those 4 rows reflected in my grid object when in design mode. But when I preview the project the grid remains steadfastly empty. I viewed the JSON in chrome:


The JSON:


{
"tasks": [
{
"id": 0,
"siteaddress": "aroughala",
"description": "Chase excess off owner",
"duedate": "2011-04-08",
"createddate": "2012-09-11",
"createdby": {
"Id": "user/1",
"name": "Some Guy"
},
"completed": false,
"completeddate": null,
"job": {
"Id": "jobs/5",
"jobno": 5
}
},
{
"id": 1,
"siteaddress": "aroughala",
"description": "test jadh asjh d",
"duedate": "2011-04-08",
"createddate": "2012-09-11",
"createdby": {
"Id": "user/0",
"name": "Another Guy"
},
"completed": false,
"completeddate": null,
"job": {
"Id": "jobs/85",
"jobno": 85
}
},
{
"id": 2,
"siteaddress": "aroughala",
"description": "sdjkhfksd asdjfh asdjk",
"duedate": "2011-04-08",
"createddate": "2012-09-11",
"createdby": {
"Id": "user/1",
"name": "Some Guy"
},
"completed": false,
"completeddate": null,
"job": {
"Id": "jobs/5",
"jobno": 5
}
},
{
"id": 3,
"siteaddress": "aroughala",
"description": "Check MBS Re quote",
"duedate": "2011-09-30",
"createddate": "2012-09-11",
"createdby": {
"Id": "user/1",
"name": "Some Guy"
},
"completed": true,
"completeddate": "2011-10-04",
"job": {
"Id": "jobs/169",
"jobno": 169
}
}
]
}

Jsonlint.com says: Valid JSON


And that was fine so i put some feedback event handlers in my Store's code:



Ext.define('MyApp.store.tasksToDo', {
extend: 'Ext.data.Store',


requires: [
'MyApp.model.Tasks'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'tasksToDo',
model: 'MyApp.model.Tasks',
proxy: {
type: 'ajax',
url: 'data/tasks.php?user=Some Guy',
reader: {
type: 'json',
root: 'tasks'
}
},
listeners: {
load: {
fn: me.onJsonstoreLoad,
scope: me
}
}
}, cfg)]);
},


onJsonstoreLoad: function(store, records, successful, operation, options) {
alert("count: "+store.count());
//alert(Object.keys(store.first()));
//alert(Object.keys(store.first().data));
alert("id:"+store.first().data.id+"\b\r"+
"description:"+store.first().data.description+"\b\r"+
"duedate:"+store.first().data.duedate+"\b\r"+
"completed:"+store.first().data.completed.toString()+"\b\r"+
"jobno:"+store.first().data.jobno+"\b\r"+
"siteaddress:"+store.first().data.siteaddress+"\b\r"
);
}


});


Which gave me the following information:


Pop-up 1:


count: 4



Pop-up 2:


id:0
description:Chase excess off owner
duedate:Fri Apr 08 2011 10:00:00 GMT +1000 (AUS Eastern Standard Time)
completed:false
jobno:5
siteaddress:aroughala



So I'm pretty sure all the data is there. Is the problem with my Grid, my Model or something else?


Grid:

Ext.define('MyApp.view.todolist', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel2',


height: 200,
title: 'Tasks to Do',
forceFit: true,
store: 'tasksToDo',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
width: 243,
dataIndex: 'siteaddress',
text: 'Site Address'
},
{
xtype: 'gridcolumn',
width: 637,
dataIndex: 'description',
text: 'Description'
},
{
xtype: 'datecolumn',
dataIndex: 'duedate',
text: 'Date'
},
{
xtype: 'booleancolumn',
width: 59,
dataIndex: 'completed',
text: 'Finished',
falseText: ' ',
trueText: 'Done.'
},
{
xtype: 'actioncolumn',
width: 35,
items: [
{
icon: 'http://server:85/images/icons/accept.JPG'
}
]
}
],
viewConfig: {
loadingText: 'Loading...'
},
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
ptype: 'rowediting'
})
],
listeners: {
viewready: {
fn: me.onGridpanelViewReady,
scope: me
}
}
});


me.callParent(arguments);
},


onGridpanelViewReady: function(tablepanel, options) {
alert("data loaded");
}


});


Model:

Ext.define('MyApp.model.Tasks', {
extend: 'Ext.data.Model',


fields: [
{
name: 'id'
},
{
name: 'description'
},
{
name: 'duedate',
type: 'date'
},
{
name: 'completed',
type: 'boolean'
},
{
mapping: 'job.jobno',
name: 'jobno',
type: 'int'
},
{
name: 'siteaddress',
type: 'string'
}
]
});
Any help, or even general advice on the order to normally do these things and what to ensure as you go through the process would be much appreciated

mice-pace
16 Sep 2012, 7:52 PM
For anyone else who stumbles onto this thread.

Is your grid inside a container? If the data is successfully opening in the Architect your grid component may be fine, if it is inside a container the data is being loaded, but the grid is not displayed correctly (at least in EXTJS 4.0) You can test if this is the case by taking the grid out of the container, or if you want to test it alone without messing with your design temporarily make it your initial view.

Need to get around this? Ask yourself why you are using the container, you may be able to use a viewport instead. If like me you wanted to put a toolbar above the grid, you can drop a toolbar object directly into the grid, no need for a container