PDA

View Full Version : Grid blowing up



Entropy
5 Feb 2013, 6:17 AM
I am trying to put an ext4 grid into my webapp.


Ext.onReady(function(){
extGridInit();
var id = 'ExtGridTest';
Ext.define(id + '_model', {
extend: 'Ext.data.Model',
fields: [
{name: 'FirstCol', type: 'string'},
{name: 'SecondCol', type: 'string'}
]}); //end model
var ajaxStore = Ext.create('Ext.data.Store', {
model: id + '_model',
id: id + '_store',
pageSize: 20,
remoteSort: true,
autoLoad: true,
proxy: {
type: 'ajax',
url: '?wicket:interface=:4:ExtGridTest::IActivePageBehaviorListener:0:&wicket:ignoreIfNotActive=true',
reader: {
model: id + '_model',
type: 'json',
root: 'rows',
totalProperty: 'totalCount'
}
}
});//end store
Ext.create('Ext.grid.GridPanel', {
store: ajaxStore,
columnLines: true,
id: id + '_grid',
renderTo: 'GridDiv',
store: ajaxStore,
viewConfig: {stripeRows:true},
bbar: Ext.create('Ext.toolbar.Paging', {
store: ajaxStore,
id: id + '_paging',
displayMsg: 'Displaying rows {0} - {1} of {2}',
emptyMsg: 'No rows to display',
displayInfo: true
}),
columns: [{
dataIndex: 'FirstCol',
text: 'FirstCol',
width: '50',
sortable: true
}, {
dataIndex: 'SecondCol',
text: 'SecondCol',
width: '50',
sortable: true
}]
}); //end grid
}); //end onReady

Entropy
5 Feb 2013, 6:35 AM
Oops, submitted before I added the following info:

Blows up with 'Object Expected' on line 31 of floating.js. On that line, me.shim and me.shadowOffset are undefined. Using ext 4.1, IE8.

Entropy
5 Feb 2013, 8:01 AM
Tried to simplify, took it out of my app page, got the same error, cut out paging bar, and a few other things, added some height and width, got the same error. Removed alert debug messages, and the error changed to line 5023:


function anonymous(c, a) {
return new c(a[0])
}

This is in anonymous code, but c is null. The error is still 'Object Expected'. Once given height and width a partial outline renders on the top and left (not the right or botom), but not much else.

Entropy
6 Feb 2013, 4:34 AM
It was the class name. I think I must've copied from a Ext 3 example or something because once I changed from Ext.grid.GridPanel to Ext.grid.Panel alot of my issue fell away. I still ahve other issues, so I may be back, but this gets me further. Seems to me if you specify a name that clearly won't work, the Ext framework could throw us a bone an put up a message or something.

My number one request for any ext developers is to make the framework, especially the debug version, do more to help debugging and spotting errors that are detectable.

Entropy
6 Feb 2013, 5:40 AM
Okay, new issue - largely the same code, excepting I fixed the Ext.grid.Panel thing as mentioned, the new error is:



Message: 'Ext.grid.header.Container' is null or not an object
Line: 273
Char: 9
Code: 0
URI: http://localhost:9080/ManagementCenter/


That 273 is in TablePanel. I do have an init method (the extgridInit() method you see above) that does this:


function extGridInit() {
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel'
]);
}

Entropy
6 Feb 2013, 6:53 AM
Firebug behaves a bit differently. The console shows several extjs resources spinning indefinitely (I checked a few and they are in the extjs folder with everything else in the paths specified by Firebug). Then a BUNCH of "too much recusion" errors follow starting with line 1878 in ext-debug.js. that line is:



var fnArgs = [].concat(args);

Which seems pretty inocuous to me. But there are dozens of these errors, some referencing that line, some referncing no specific js line, an a few referencing some other lines (though these come much lower and one wonders if they are just cascading from some root cause).

Eventually I start getting some "Error: Permission denied to access object". Mixed in are some extjs resource GETs that are succeeding (unlike the ones at the top which spin forever).

Then comes a "TypeError: Ext.util.HashMap is not a constructor" on line 566 of ext-debug.js. Which is odd since the line is "if (version instanceof Version) {" which appears to have nothing to do with hashmaps.

Then "TypeError: mixinClass is null" on line 3700 of ext-debug.js, which for a change of pace at least seems to describe the code because mixinClass is dereferenced here.

A few more repititions of the two TypeErrors and many successful loads of ext resources (man it's a busy beaver) round out the firebug console.

The same page produces the previously described IE8 issue and this issue in the latest firefox/firebug despite them being so different.

Entropy
6 Feb 2013, 10:46 AM
I added header:false to my grid config and this problem went away. This moved me to my next issue. I know the store is calling my ajax link and it is returning the correct json. The reader doesn't issue any errors implying it parsed the json response ok, but the grid renders the column headers, but no data. I have some CSS conflicts as well, but I know that's not the issue because I can inspect the HTML and see there is no data being rendered. Why would the store load the data, but not put it in the grid?

Entropy
7 Feb 2013, 12:55 PM
I found that the json I returned was missing a closing brace. Once this was fixed, the header=false fix was no longer necessary. It's annoying that I never got any errors saying I had a parse problem with the data. But that was what was happening.