PDA

View Full Version : Grid not populating, why?



alienwebz
7 Mar 2010, 11:03 PM
Ok so im trying to populate a grouping grid with server data that will display server information (PHP version etc.)

JSON:
http://examples.extjs.eu/get-grid-data.php

Card With Grid that will not load:

card_servercheck = Ext.extend(Ext.ux.Wiz.Card, {

initComponent: function(){
this.monitorValid = true;

this.baseCls = 'x-small-editor';

this.title = 'Server Status';

this.items = [
{xtype: 'examplegrid'}
];

card_servercheck.superclass.initComponent.call(this);
}
});

Ext.ns('Example');

// example grid
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:new Ext.data.GroupingStore({
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'}
]),
url: 'get-grid-data.php',
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
})
,columns:[{
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'
}],
view: new Ext.grid.GroupingView({

forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,loadMask:true
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));


// call parent
Example.Grid.superclass.initComponent.apply(this, arguments);

// load the store at the latest possible moment
this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load({params:{start:0, limit:30}});
}}
});

} // eo function initComponent

});

Ext.reg('examplegrid', Example.Grid);

The grid will display but is empty, i dont think the store is loading.
any ideas? (im sure i missed something dumb ;-))

evant
7 Mar 2010, 11:17 PM
a) Does the store load?
b) If you inspect the DOM around the grid, what happens?

alienwebz
7 Mar 2010, 11:29 PM
a) Does the store load? b) If you inspect the DOM around the grid, what happens? __________________ Evan Trimboli Ext JS - Core Development Team [email protected]

Not sure how to check if the store is loading but I would assume so because the grid is loading and it should load when the grid does right? Also not sure how to inspect the dom around the grid, that may sound n00bish, but nothing is throwing any errors when I interact with it.

mankz
7 Mar 2010, 11:29 PM
Extra comma never really helps :) Not sure it matters but remove it anway.


fields: [{
name: 'checkId'
},
{
name: 'checkName'
},
{
name: 'checkType'
},
{
name: 'checkMinimum'
},
{
name: 'checkCurrent'
},
{
name: 'checkStatus'
}, // <-------------
]

Sgt.Pepper
8 Mar 2010, 2:54 AM
Don't know if that's the problem, but what is that second record in the array? Maybe its causing problems:



{"success": true, "checks":
[{
"checkId":1,
"checkName":"PHP Version",
"checkType":"PHP",
"checkMinimum":"5.2.6 | 5.3.1",
"checkCurrent":"5.2.6",
"checkStatus":"PASS"
},{
"id":2 <-----------------
}
]}

alienwebz
8 Mar 2010, 4:01 PM
Don't know if that's the problem, but what is that second record in the array? Maybe its causing problems: {"success": true, "checks": [{ "checkId":1, "checkName":"PHP Version", "checkType":"PHP", "checkMinimum":"5.2.6 | 5.3.1", "checkCurrent":"5.2.6", "checkStatus":"PASS" },{ "id":2 <----------------- } ]}

I removed the second array and now I'm getting six errors:

Unexpected end of input in Ext-all
Cannot read prototype and cannot read constrictor of undefigned in Ext-base

fay
9 Mar 2010, 3:53 AM
Not sure how to check if the store is loading but I would assume so because the grid is loading and it should load when the grid does right?

Add load and loadexception handlers for the store. See: http://www.extjs.com/deploy/dev/docs/?class=Ext.data.Store


Also not sure how to inspect the dom around the grid, that may sound n00bish, but nothing is throwing any errors when I interact with it.

Use FireFox+FireBug. See: http://www.extjs.com/learn/Ext_FAQ_Debugging#Firefox.2FFirebug

Also, use ext-all-debug.js instead of ext-all.js while developing/debugging.

Post your JSON. The link you provided (http://shadowproj.net/webtop/AirOS/components/installers/airos_installer/servercheck.php) does not match your store's fields.

Elijah
9 Mar 2010, 5:31 AM
When viewing Page Source on the link you provided I see

{
images: [
{name: "Image one", url:"/GetImage.php?id=1", size:46.5, lastmod: new Date(2007, 10, 29)},
{name: "Image Two", url:"/GetImage.php?id=2", size:43.2, lastmod: new Date(2007, 10, 30)}
]
}Try having the PHP generate it without the line breaks in the source that's generated.

{images: [{name: "Image one", url:"/GetImage.php?id=1", size:46.5, lastmod: new Date(2007, 10, 29)},{name: "Image Two", url:"/GetImage.php?id=2", size:43.2, lastmod: new Date(2007, 10, 30)}]}

alienwebz
9 Mar 2010, 9:43 PM
Updated the info in the first post to reflect my current attempts, i dont think the store is loading.

Is it known if there are problems with grids loading in Ext.ux.Wiz component?

alienwebz
10 Mar 2010, 5:57 PM
*bump*

fay
10 Mar 2010, 11:49 PM
Here is my grid:

http://shadowproj.net/webtop/AirOS/c...S_Installer.js

There's no grid in that code!

Also, have you (as previously suggested):

1. Added load and loadexception handlers for the store.
2. Debugged with FireFox+FireBug.

alienwebz
12 Mar 2010, 7:29 AM
I'll post the grid and and the json ( my site is down for some reason ).

Yes I added the load exception handlers, but nothing happened

Fire fox and fire bug flagged nothing.

alienwebz
16 Mar 2010, 9:35 PM
JSON:
http://examples.extjs.eu/get-grid-data.php

Card With Grid that will not load:

card_servercheck = Ext.extend(Ext.ux.Wiz.Card, {

initComponent: function(){
this.monitorValid = true;

this.baseCls = 'x-small-editor';

this.title = 'Server Status';

this.items = [
{xtype: 'examplegrid'}
];

card_servercheck.superclass.initComponent.call(this);
}
});

Ext.ns('Example');

// example grid
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({}, [
{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'}
]),
url: 'get-grid-data.php',
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
})
,columns:[{
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'
}],
view: new Ext.grid.GroupingView({

forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,loadMask:true
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));


// call parent
Example.Grid.superclass.initComponent.apply(this, arguments);

// load the store at the latest possible moment
this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load({params:{start:0, limit:30}});
}}
});

} // eo function initComponent

});

Ext.reg('examplegrid', Example.Grid);

The grid will display but is empty, i dont think the store is loading.

I updated the first post as well, no errors with firebug or chrome dev tools.

Thanks to everyone who has been helping with this.