PDA

View Full Version : Grid rendering issue



TampaBay55
11 Jun 2009, 12:44 PM
Gurus:

I need your help with a grid issue I am having. I am rendering a grid on a formpanel on a window. When I open the window the grid and its toolbar and records show fine. When I close the window and re-open the window (obviously I am doing this via a button), the grid does not render and firebug throws an error (could not find a component on the grid toolbar). Seems to me that something is not getting destroyed or something IS getting destroyed that shouldn't.

I know the code seems long-winded, but I've been breaking down the components to figure out what's going on.



var mccRecordID = '';
var mccCurrentRow = '';
var mccGridRecord = new Ext.data.Record.create([
{name:'recordid'},
{name:'contactname'},
{name:'description'}
]);
mccGridReader = new Ext.data.JsonReader({
totalProperty: 'rowcount',
idProperty : 'recordid',
root : 'records'
},mccGridRecord);
mccGridProxy = new Ext.data.HttpProxy({
url: 'mccdatahandler',
method: 'GET'
});
mccGridStore = new Ext.data.Store({
reader: mccGridReader,
proxy: mccGridProxy
})
var mccGridToolbar = new Ext.Toolbar({
height: 26,
items :[{
id : 'mccnewbutton',
text : 'New',
iconCls: 'add',
handler: function(){
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
mccDataUpdate('insert','',localid,mccGridStore,mccCurrentRow)
}
},'-',{
id : 'mcceditbutton',
text : 'Edit',
iconCls: 'edit',
handler: function(){
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
mccDataUpdate('change',mccRecordID,localid,mccGridStore,mccCurrentRow)
}
},'-',{
id : 'mccdeletebutton',
text : 'Delete',
iconCls: 'delete',
handler: function(){
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
mccDataUpdate('delete',mccRecordID,localid,mccGridStore,mccCurrentRow)
}
}]
});
var mccGridBrowse = new Ext.grid.GridPanel({
width : 400,
height : 350,
frame : false,
border : false,
tbar : mccGridToolbar,
store : mccGridStore,
viewConfig: {forceFit:true,scrollOffset:2},
columns : [
{header: 'Payer Contacts',width:150,sortable:false,resizable:false,dataIndex:'contactname'},
{header: 'Contact Description',width:200,sortable:false,resizable:false,dataIndex:'description'}
]
});
mccGridStore.on('exception',function(){
Ext.getCmp('mcceditbutton').disable();
Ext.getCmp('mccdeletebutton').disable();
});
mccGridStore.on('load',function(){
if (!mccRecordID){
mccGridBrowse.selModel.selectFirstRow();
}
Ext.getCmp('mcceditbutton').enable();
Ext.getCmp('mccdeletebutton').enable();
});
mccGridBrowse.getSelectionModel().on('rowselect',function(sm,rowIdx,rec){
mccRecordID = rec.get('recordid');
mccCurrentRow = mccGridBrowse.getSelectionModel().getSelected();
});
function mcpDataUpdate(globalrequest,recordid,parentid,datastore,currentrow){
var localrequest = 'fetch';
var formRecord = Ext.data.Record.create([
{name:'recordid'},
{name:'payername'},
{name:'address1'},
{name:'address2'},
{name:'city'},
{name:'state'},
{name:'zipcode'},
{name:'telephone'},
{name:'facsimilie'},
{name:'weburl'}
]);

var formReader = new Ext.data.JsonReader({
id : 'recordid',
root : 'record'
},formRecord);
/************************************************************************/
/* Configure The Field Form Set */
/************************************************************************/
var formFieldSet = new Ext.form.FieldSet({
id : 'formfieldset',
title : 'Managed Care Payer Information',
autoHeight : true,
defaults: {xtype:'textfield'},
items : [{
xtype : 'hidden',
name : 'recordid',
width : 1
},{
name : 'payername',
fieldLabel: 'Payer Name',
width : 300
},{
name : 'address1',
fieldLabel: 'Address 1',
width : 300
},{
name : 'address2',
fieldLabel: 'Address 2',
width : 300
},{
xtype : 'panel',
layout : 'column',
width : 398,
border : false,
bodyStyle: 'background-color:transparent',
defaults : {bodyStyle:'background-color:transparent',border:false},
items :[{
columnWidth: .59,
layout :'form',
items : [{
xtype : 'textfield',
name : 'city',
fieldLabel: 'City/ST/Zip',
width : 132
}]
},{
columnWidth: .11,
layout :'form',
items : [{
xtype : 'textfield',
name : 'state',
hideLabel : true,
width : 38
}]
},{
columnWidth: .30,
layout :'form',
items : [{
xtype : 'textfield',
name : 'zipcode',
hideLabel : true,
width : 116
}]
}]
},{
name : 'telephone',
fieldLabel: 'Telephone',
width : 132
},{
name : 'facsimilie',
fieldLabel: 'Fax Number',
width : 132
},{
name : 'weburl',
fieldLabel: 'Web Address',
width : 300
}]
});
var saveButton = new Ext.Button({
text : 'Save',
iconCls: 'save',
handler: function(){
localrequest = 'save';
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
Ext.getCmp('formPanel').getForm().submit({
params:{cmd:localrequest,recordid:localid},
success: function(form,action){
formWindow.close();
if (datastore){
datastore.reload();
}
}
})
}
});
var cancelButton = new Ext.Button({
text : 'Cancel',
iconCls: 'cancel',
handler: function(){
if(globalrequest=='insert'){
localrequest = 'delete';
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
Ext.getCmp('formPanel').getForm().submit({
params:{cmd:localrequest,recordid:localid}
})
}
formWindow.close();
}
});
var formPanel = new Ext.FormPanel({
id : 'formPanel',
border : false,
url : 'mcpdatahandler',
method : 'GET',
reader : formReader,
labelAlign : 'right',
labelWidth : 90,
layout : 'fit',
waitMsgTarget: true,
bodyStyle : 'background-color:transparent',
items : [formFieldSet,mccGridBrowse],
buttons : [saveButton,cancelButton]
});
var formWindow = new Ext.Window({
title :'Managed Care Payer Information Editor',
width :456,
height :500,
closable :false,
resizable :false,
floating :true,
shadow :true,
shadowOffset: 14,
modal :true,
layout :'fit',
bodyStyle :'padding:8px',
items :[formPanel]
});
if(globalrequest == 'delete'){
Ext.MessageBox.confirm('Delete Record', 'Are you sure you want to delete this record?',function(btn,text){
if(btn=='yes'){
localrequest = 'delete';
Ext.getCmp('formPanel').getForm().load({
params :{cmd:localrequest,recordid:recordid,parentid:parentid},
success: function(form,action){
if(datastore){
datastore.remove(currentrow);
datastore.commitChanges();
datastore.reload();
}
}
});
}
});
}else{
var recFields = Ext.getCmp('formPanel').getForm();
recFields.on('actioncomplete',function(){
recFields.findField('payername').focus(true,0);
var formFields = Ext.getCmp('formPanel').getForm().getValues();
var localid = formFields['recordid'];
mccGridStore.load({params:{cmd:'grid',recordid:'',parentid:localid,showinactive:false}});
});
formWindow.show();
localrequest = 'fetch';
Ext.getCmp('formPanel').getForm().load({
params :{cmd:localrequest,recordid:recordid,parentid:parentid},
waitMsg: 'Loading Data...'
});
}
};

TampaBay55
12 Jun 2009, 4:22 AM
By the way, Firebug is reporting a "this.view is null" error. I can't figure this one out. Any help would be appreciated.