PDA

View Full Version : Instansiation Issue



TampaBay55
15 Jan 2011, 6:08 AM
Greetings Everyone!

I am running into a problem with a bit of code I wrote and I am hoping someone here can help me sort it out:



Ext.ns('LSIPay.browses');

function formatUsrRow(value,metaData){
metaData.css = 'user-single';
return value;
};
var usrDataCM = new Ext.grid.ColumnModel({
columns:[
{dataIndex:'usrImgRow',width:24,renderer:formatUsrRow},
{dataIndex:'userName',id:'usrExpCol'}
]
});
var usrDataStore = new Ext.data.JsonStore({
root : 'records',
totalProperty: 'rowcount',
idProperty : 'recordid',
selectedId : null,
selectedNdx : null,
baseParams : {xaction:'read'},
proxy : new Ext.data.HttpProxy({url:'usrdataprocess'}),
fields : new Ext.data.Record.create([
{name: 'usrdataID',type:'string',mapping:'recordid'},
{name: 'userName',type:'string',mapping:'username'}
]),
});
LSIPay.browses.usrDataGrid = Ext.extend(Ext.grid.GridPanel,{
initComponent: function(){
Ext.apply(this,{
border : false,
loadmask : true,
hideHeaders : true,
cls : 'x-grid-usrdata',
store : usrDataStore,
autoExpandColumn: 'usrExpCol',
viewConfig : {forceFit:true,scrollOffset:2},
cm : usrDataCM,
tbar : this.buildTopBar()
});
LSIPay.browses.usrDataGrid.superclass.initComponent.apply(this, arguments);
},
buildTopBar : function(){
return[{
id : 'usraddbtn',
text : 'Add',
iconCls: 'addbutton'
},{
id : 'usreditbtn',
text : 'Edit',
iconCls: 'editbutton',
},{
id : 'usrdeletebtn',
text : 'Delete',
iconCls: 'deletebutton'
}];
}
})
Ext.reg('usrdatagrid',LSIPay.browses.usrDataGrid);
LSIPay.browses.usrDataBrowse = Ext.extend(Ext.Window,{
title : 'User Information Listing',
initComponent: function(){
Ext.apply(this,{
height : 400,
width : 350,
layout : 'fit',
shadow : true,
shadowOffset: 14,
items : new LSIPay.browses.usrDataGrid(),
buttons :[{
scope : this,
text : 'Close',
handler: this.close
}]
})
LSIPay.browses.usrDataBrowse.superclass.initComponent.apply(this, arguments);
}
});
I am instansiating LSIPay.browse.usrDataBrowse from a button handler:


handler: function(){
this.window = new LSIPay.browse.usrDataBrowse();
this.window.show();
}
All works fine the first time I press the button. When I close the window and press the button again I get the following error in firebug:


this.config is undefined: var length = this.config.length
I know I missing something here. Any help? Thanks.

skirtle
15 Jan 2011, 10:47 AM
What version of Ext are you running against? I just tried your code against 3.2.1 and it didn't exhibit the error you're seeing. That said, I'd guess that it's the sharing of the ColumnModel or JsonStore that's to blame. Try moving their creation into the initComponent() and see if that fixes it.

There are a few other simple things you might like to correct too. You're explicitly specifying an HttpProxy on your store when you could just specify a url on the store (see the docs for more). You have 2 stray commas, one after your fields and another after iconCls: 'editButton' (a half-decent IDE would pick these up immediately). Your button handler also uses a namespace of browse, which differs from the browses found in the code above.

TampaBay55
18 Jan 2011, 4:21 AM
Skirtle:

Thanks for the reply - I made the corrections you outlined and was able to get error to stop. I was hoping to reuse the datastore so I recoded it to look like this:


Ext.ns('LSIPay.browses');

function formatUsrRow(value,metaData){
metaData.css = 'user-single';
return value;
};

LSIPay.browses.usrDataStore = Ext.extend(Ext.data.JsonStore,{
initComponent: function(){
Ext.apply(this,{
url : 'usrdataprocess',
autoLoad : true,
root : 'records',
totalProperty: 'rowcount',
idProperty : 'recordid',
baseParams : {xaction:'read'},
fields : new Ext.data.Record.create([
{name: 'usrdataID',type:'string',mapping:'recordid'},
{name: 'userName',type:'string',mapping:'username'}
])
});
LSIPay.browses.usrDataStore.superclass.initComponent.apply(this);
}
});

LSIPay.browses.usrDataGrid = Ext.extend(Ext.grid.GridPanel,{
initComponent: function(){
Ext.apply(this,{
border : false,
loadMask : true,
hideHeaders : true,
cls : 'x-grid-usrdata',
store : new LSIPay.browses.usrDataStore(),
autoExpandColumn: 'usrExpCol',
viewConfig : {forceFit:true,scrollOffset:2},
cm : new Ext.grid.ColumnModel({
columns:[
{dataIndex:'usrImgRow',width:24,renderer:formatUsrRow},
{dataIndex:'userName',id:'usrExpCol'}
]
})
});
LSIPay.browses.usrDataGrid.superclass.initComponent.apply(this);
}
});

LSIPay.browses.usrDataBrowse = Ext.extend(Ext.Window,{
title : 'User Information Listing',
initComponent: function(){
Ext.apply(this,{
height : 400,
width : 275,
layout : 'fit',
shadow : true,
shadowOffset: 14,
items : new LSIPay.browses.usrDataGrid(),
buttons :[{
scope : this,
text : 'Close',
handler: this.close
}]
})
LSIPay.browses.usrDataBrowse.superclass.initComponent.apply(this);
}
});
I still have a button handler calling:


this.win = new LSIPay.browses.usrDataBrowse();
this.win.show();
I now cannot get the datastore to load (no errors). Is this a bad design? Am I on the right track?