PDA

View Full Version : GridColumn Model is null?



KingKahn
26 Apr 2009, 4:09 PM
Folks,
I am developing a component (extending the gridpanel). My server side code is correctly called into and returns appropriate data. I have inspected the data and I am trying to debug this. Once I am over this hump I can have a smooth ride for the time being at least. The code breaks into line# 32660 of ext-all-debug and throws a runtime error where the code is attempting to get the column count on the cm. I would appreciate it if you could tell me what I am doing wrong. Prob something simple which i just cannot see. Here is the code



Ext.ns('PreRegister');
Ext.BLANK_IMAGE_URL = '/ExtJS/resources/images/default/s.gif';
PreRegister.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var ds;
mask = new Ext.LoadMask(Ext.getBody(), {
msg: 'Loading Pre-Registered Customers'
});
mask.show();
return Ext.Ajax.request({
url: '/Calendar/previewAttendanceInfo.ashx',
params: {
"eventSessionId": document.getElementById('ctl00$contentHolder$hfSessionId').value,
"registeredOnly": '1'
},
success: function(response, options) {
mask.hide();
if (response != '') {
ds = JSON.parse(response.responseText);
}
else {
var title = "Pre-Registered Attendees Load";
var msg = "There were no Pre-Registered attendees found for this session";
Ext.MessageBox.alert(title, msg);
return;
}
},
failure: function(response, options) {
mask.hide();
var title = "Pre-Registered Attendees Load";
var msg = "Failed to get data from the server. Additional information: ";
Ext.MessageBox.alert(title, msg + response.toString());
}
}); // AJAX REQUEST
var config = {
store: new Ext.data.Store({
id: 'preRegStore',
data: ds,
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
new Ext.data.Record.create([{
name: 'ContactId'
},
{
name: 'FirstName'
},
{
name: 'LastName'
},
{
name: 'Status'
},
{
name: 'IsUnder18'
},
{
name: 'attendedAnother'
},
{
name: 'EventRegsId'
}]) // EndRecord
) // EndReader
,
columns: [{
id: 'ContactId',
header: "ContactId",
width: 100,
sortable: true,
dataIndex: 'ContactId'
},
{
header: "Last Name",
width: 100,
sortable: true,
dataIndex: 'LastName'
},
{
header: "First Name",
width: 100,
sortable: true,
dataIndex: 'FirstName'
},
{
header: "Status",
width: 100,
sortable: true,
dataIndex: 'Status'
},
{
header: "IsUnder18",
width: 100,
sortable: true,
dataIndex: 'IsUnder18'
},
{
header: "attendedAnother",
width: 100,
sortable: true,
dataIndex: 'attendedAnother'
},
{
header: "Event Regs Id",
width: 100,
sortable: true,
dataIndex: 'EventRegsId'
}] // columns end
}) // EndStore
,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
cm: new Ext.grid.ColumnModel([{
header: 'ContactId',
dataIndex: 'ContactId',
width: 100,
hidden: true
},
{
header: 'First Name',
dataIndex: 'FirstName',
sortable: true,
width: 100
},
{
header: 'Last Name',
dataIndex: 'LastName',
sortable: true,
width: 100
},
{
header: 'Status',
dataIndex: 'Status',
width: 100,
hidden: true
},
{
header: 'Under17',
dataIndex: 'IsUnder18',
width: 100,
hidden: true
},
{
header: 'Repeat Attendance',
dataIndex: 'attendedAnother',
width: 100,
hidden: true
},
{
header: 'Event Regs Id',
dataIndex: 'EventRegsId',
width: 150,
hidden: true
}]) // EndColumnModel
} // config
Ext.apply(this, Ext.apply(this.initialConfig, config));
PreRegister.Grid.superclass.initComponent.apply(this, arguments);
} // function
});
Ext.reg('preRegGrid', PreRegister.Grid);

elishnevsky
26 Apr 2009, 4:35 PM
Everything is wrong with your code. This is not how you're supposed to use grids. Why are you returning the result of AJAX call from the initComponent method? Why are you making this AJAX call at all? You should use Store object with HttpProxy. Or JsonStore if you operate with JSON data.

KingKahn
26 Apr 2009, 4:55 PM
The reason I am using Ajax is that I need the call to be asynchronous. Pardon my code, or lack of a better understanding of ExtJs. I am a newbie to the world of ExtJS (my fourth day). BTW, how can I use the JsonStore asynhcronously?

Thanks!

elishnevsky
26 Apr 2009, 7:03 PM
All remote calls by Ext JS library are done asynchronously. JsonStore knows how to automatically make asynchronous calls and retrieve data by a provided url. Anyways, it sounds like you need to understand the basics. So before jumping into writing actual code I encourage you to review Samples & Demos, API Docs and Tutorials. Also here are some links that give you a good start:

http://extjs.com/learn/Ext_FAQ_Grid
http://extjs.com/learn/Tutorials#Grids
http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel
http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonStore

I could've posted a real example, but for your benefit it would be better if I won't. Good luck!

KingKahn
26 Apr 2009, 8:03 PM
While not new to the world of programming I am new to the ExtJS world. That said, I have a deadline looming over my head and I am supposed to learn and deliver in a very short time. I realize some of my posts are very rookie-ish but in an effort to get things done as quickly as demanded I do not have any option but to sound naive. But hey, we have all been there haven't we?

Thanks!

elishnevsky
26 Apr 2009, 8:30 PM
Well, I don't want to offend you, however by looking at your code where you return the result of AJAX call from initComponent method and have some more code in that method after that AJAX call hoping it'll run, I got impression that you lack some basic programming skills. I really hope that I am wrong. But anyways, here's some code for ya. It's a grid, that displays a list of authors from PUBS database. I'm using ASP.NET MVC for backend, but you can change the url config attribute of JsonStore to point to an HttpHandler, that returns JSON data. Hope it helps.


Ext.ns('Example');

Example.AuthorsGridPanel = Ext.extend(Ext.grid.GridPanel, {
// default config, can be overwritten when instantiating the class
stripeRows: true,
border: false,
showPhone: true, // custom config attribute used to show/hide Phone column

initComponent: function() {
var ds = new Ext.data.JsonStore({
url: '/Authors/GetAll',
fields: ['au_id', 'au_lname', 'au_fname', 'phone', 'address', 'city', 'state', 'zip', {name: 'contract', type: 'bool'}]
});

// hard coded config, it cannot be changed when instantiating the class
var config = {
store: ds,
columns: [
{header: 'First Name', dataIndex: 'au_fname', width: 100},
{header: 'Last Name', dataIndex: 'au_lname', width: 100},
{header: 'Phone', dataIndex: 'phone', width: 100, hidden: !this.showPhone},
{id: 'address', header: 'Address', dataIndex: 'address'},
{header: 'City', dataIndex: 'city', width: 100},
{header: 'State', dataIndex: 'state', width: 50},
{header: 'ZIP', dataIndex: 'zip', width: 50}
],
autoExpandColumn: 'address'
}; // eo config object

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

// call parent
Example.AuthorsGridPanel.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

// protected
onRender: function() {
Example.AuthorsGridPanel.superclass.onRender.apply(this, arguments);
this.store.load();
}
}); // eo extend

// register xtype
Ext.reg('authorsgrid', Example.AuthorsGridPanel);