PDA

View Full Version : Problem on store load



KingKahn
23 Apr 2009, 10:03 AM
Hi folks,
I am just about there with this page but have an issue that I am trying to overcome. I have a page with four accordions. The first accordion contains a formpanel with three fields and a button. When the user clicks the button (perform a search) I want to dynamically create a grid with the results and show it just under the last fieldText of the search form. For this purpose I have added a box xtype in the formpanel and set the appropriate tag property. The form fields are part of a fieldset. When I click the button the code properly calls my server side code and the store is populated with the Json objects but my grid never renders. The code breaks on the following line in ext-all-debug.js
line# 33130 which is - ds.on("load", this.onLoad, this);.

Following is my code. Can someone please tell me what I am doing wrong? Thanks!!



/********************************************************************************************************/
Ext.ns('PreRegister');
Ext.BLANK_IMAGE_URL = '/ExtJS/resources/images/default/s.gif';
PreRegister.Grid = new Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var config = {
store: new Ext.data.Store({
id: 'jsStore',
reader: new Ext.data.JsonReader({
proxy: new Ext.data.HttpProxy({
url: 'ExtJS/previewAttendanceInfo.ashx',
method: 'GET'
}),
// HttpProxy
baseParams: {
"eventSessionId": 'M8DIL6NVROUR'
},
root: 'results',
id: 'dsPreReg'
},
Ext.data.Record.create([{
name: 'ContactId'
},
{
name: 'FirstName'
},
{
name: 'LastName'
},
{
name: 'Status'
},
{
name: 'Under18'
},
{
name: 'attendedAnother'
},
{
name: 'EventRegsId'
}])),
// JsonReader
fields: preRegFields
}),
columns: preRegCols,
cm: prCM,
viewConfig: {
forceFit: true
}
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
PreRegister.Grid.superclass.initComponent.apply(this.arguments);
} // End Function
});
Ext.reg('preRegGrid', PreRegister.Grid);
prCM = new Ext.grid.ColumnModel([{
header: 'ContactId',
dataIndex: 'ContactId',
width: 150
},
{
header: 'First Name',
dataIndex: 'FirstName',
width: 150
},
{
header: 'Last Name',
dataIndex: 'LastName',
width: 150
},
{
header: 'Status',
dataIndex: 'Status',
width: 150
},
{
header: 'Under18',
dataIndex: 'Under18',
width: 150
},
{
header: 'Repeat Attendance',
dataIndex: 'attendedAnother',
width: 150
},
{
header: 'EventRegsId',
dataIndex: 'EventRegsId',
width: 150
}])
var preRegFields = [{
name: 'ContactId'
},
{
name: 'FirstName',
type: 'string'
},
{
name: 'LastName',
type: 'string'
},
{
name: 'Status',
type: 'string'
},
{
name: 'Under18',
type: 'string'
},
{
name: 'attendedAnother',
type: 'string'
},
{
name: 'EventRegsId',
type: 'string'
}];
var preRegCols = [{
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: "Under18",
width: 100,
sortable: true,
dataIndex: 'Under18'
},
{
header: "Repeat Attendance",
width: 100,
sortable: true,
dataIndex: 'attendedAnother'
},
{
header: "EventRegsId",
width: 100,
sortable: true,
dataIndex: 'EventRegsId'
}];
var preRegData = function() {
mask = new Ext.LoadMask(Ext.getBody(), {
msg: "Performing Search..."
}); // Mask
mask.show();
Ext.Ajax.Request({
url: 'ExtJS/previewAttendanceInfo.ashx',
method: 'GET',
params: {
"eventSessionId": 'M8DIL6NVROUR'
},
success: function(response, options) {
mask.hide();
return response.responseText
},
failure: function(response, options) {
mask.hide();
Ext.MessageBox.alert('Failed', response.valueOf());
return null;
}
}); // AJAX Request
} // Function
/********************************************************************************************************/
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
renderTo: 'main',
width: 1130,
height: 800,
activeTab: 0,
frame: true,
xtype: 'tabpanel',
defaults: {
autoHeight: true
},
items: [{
title: 'Registration',
// First tab panel - Registration
layout: 'accordion',
// Accordion object literal properties
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: true
},
defaults: {
bodyStyle: 'padding:15px',
collapsed: false
},
items: [{ // Search accordion defs
title: 'LOOK UP - Search Customers',
layout: 'form',
id: 'searchForm',
labelWidth: 105,
height: 300,
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true,
items: [{
xtype: 'fieldset',
title: 'Search',
autoHeight: true,
collapsible: true,
items: [{
layout: 'form',
defaultType: "textfield",
id: 'searchForm',
defaults: {
allowBlank: true
},
items: [{
fieldLabel: 'E-Ticket Number',
id: 'txtETicketNumber',
width: 700
},
{
xtype: 'button',
text: 'Go',
id: 'bntGo',
handler: function() {
mask = new Ext.LoadMask(Ext.getBody(), {
msg: "Performing Search..."
});
mask.show();
//Ext.lib.Ajax.defaultPostHeader = 'application/json';
Ext.Ajax.request({
url: '/ExtJS/previewAttendanceInfo.ashx',
method: 'GET',
params: {
"eventSessionId": 'M8DIL6NVROUR'
},
success: function(response, options) {
mask.hide();
var ds = (response.responseText);
var fields = [{
name: 'ContactId'
},
{
name: 'FirstName',
type: 'string'
},
{
name: 'LastName',
type: 'string'
},
{
name: 'Status',
type: 'string'
},
{
name: 'Under18',
type: 'string'
},
{
name: 'attendedAnother',
type: 'string'
},
{
name: 'EventRegsId',
type: 'string'
}];
// var cols = [
// { 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: "Under18", width: 100, sortable: true, dataIndex: 'Under18' },
// { header: "Repeat Attendance", width: 100, sortable: true, dataIndex: 'attendedAnother' },
// { header: "EventRegsId", width: 100, sortable: true, dataIndex: 'EventRegsId' }
// ];
var colModel = new Ext.grid.ColumnModel([{
header: 'ContactId',
dataIndex: 'ContactId',
width: 150
},
{
header: 'First Name',
dataIndex: 'FirstName',
width: 150
},
{
header: 'Last Name',
dataIndex: 'LastName',
width: 150
},
{
header: 'Status',
dataIndex: 'Status',
width: 150
},
{
header: 'Under18',
dataIndex: 'Under18',
width: 150
},
{
header: 'Repeat Attendance',
dataIndex: 'attendedAnother',
width: 150
},
{
header: 'EventRegsId',
dataIndex: 'EventRegsId',
width: 150
}])
var store = new Ext.data.JsonReader({
root: 'results',
data: ds,
fields: fields
});
var grid = new Ext.grid.GridPanel({
store: store,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
cm: colModel,
height: 300,
autoLoad: true,
renderTo: Ext.DomHelper.append(Ext.get('mySearchDiv'), {
tag: 'div',
id: 'searchForm'
})
//renderTo: Ext.get('mySearchDiv')
});
Ext.MessageBox.alert(Ext.get('mySearchDiv').toString());
grid.show();
// win = new Ext.Window({
// items: grid,
// height: 300,
// layout: 'fit',
// title: 'Matches',
// renderTo: 'main'
// });
// win.show();
//store.load();
},
failure: function(response, options) {
mask.hide();
Ext.MessageBox.alert('Failed', response.valueOf());
}
});
}
},
{
fieldLabel: 'Last Name',
id: 'txtLastName',
width: 200
},
{
fieldLabel: 'Zip Code:',
id: 'txtZipCode',
width: 200
},
{
xtype: 'box',
id: 'mySearchDiv',
autoEl: {
tag: 'div',
cn: 'Div Content Here'
},
listeners: {
'render': function(self) {
var el = self.getEl().dom;
Ext.MessageBox.alert(el);
}
}
}]
}] // Field Defs
}]
},
{
title: 'Pre-Registered',
frame: true,
bodyStyle: 'padding:5px',
height: 300,
autoWidth: true,
items: [
]
},
{
title: 'Attendance',
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true,
height: 300
},
{
title: 'Purchase',
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true,
height: 300
}] // accordion items
},
{
title: 'Report & Finalize'
},
// Second tab panel - Report & Finalize
{
title: 'Session Info'
} // Third tab panel - Session Info
] // Main tabs end
}).show(); // Tabs
});
function getETicketNumber() {
alert('in function');
mask.show();
Ext.lib.Ajax.defaultPostHeader = 'application/json';
Ext.Ajax.request({
url: '/previewAttendanceInfo.ashx',
method: 'POST',
params: Ext.encode(params),
success: function(response, options) {
mask.hide();
Ext.get('txtResult').dom.value = response.responseText;
Ext.get('additionResponse').dom.innerHTML = response.responseText;
},
failure: function(response, options) {
mask.hide();
Ext.MessageBox.alert('Failed', 'Unable to add values');
}
});
}

mankz
23 Apr 2009, 9:35 PM
Remove the new from


PreRegister.Grid = new Ext.extend(Ext.grid.GridPanel, {


This i believe is the error, you're not creating a store:



var store = new Ext.data.JsonReader({
root: 'results',
data: ds,
fields: fields
});