PDA

View Full Version : Preconfigured Class Help - Finding "this"



madirishman
11 Nov 2009, 8:13 AM
Hi, I need to add a component to a preconfigured panel, but I can't seem to refence "this" correctly. I'm using a listener on a button in the panel's toolbar. Then handler function thinks "this" is the button itself, and not the actual panel. Can anyone help me reference the correct "this" object?

Saki, are you out there??:)


// set up namespace for application
Ext.ns('GridHolderPanel');

GridHolderPanel.gridHolder = Ext.extend(Ext.Panel, {

title: 'New Panel',

initComponent: function(){
//create toolbar object for grid
this.initToolBar();

var config = {
//title: 'Budget Sheet',
iconCls: 'icon-grid',
closable: true,
items: [
this.PanelToolBar
]//eo items
};//eo config

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

//call parent object
GridHolderPanel.gridHolder.superclass.initComponent.apply(this, arguments)

//****** event listeners ******

//create listener for close action
this.on({
scope:this,
beforeClose:this.handleBeforeClose
})
},//eo init component

initToolBar:function(){
this.PanelToolBar = new Ext.Toolbar({
id: 'gridTools',
items: [
{
xtype: 'tbspacer'
},
{
xtype: 'button',
text: 'Save Changes',
icon: '/CFIDE/scripts/Ext3.0.0/examples/shared/icons/fam/accept.png',
handler: this.handleBTNSaveChanges
},
{//THIS IS THE BUTTON
xtype: 'button',
text: 'TEMP - load grids',
icon: '/CFIDE/scripts/Ext3.0.0/examples/shared/icons/fam/application_go.png',
handler: this.loadLayoutGrids
}
]
});
}//end inittoolbar

//extended methods
,loadLayoutGrids:function(){
var tempPlanID = 2;
console.log('planid:' +tempPlanID);
//load each instance of ResourceGrid and Expense Grid into panel
//create a new reasource grid
var newResourceGrid = new ResourceGrids.resourceGrid();
//this.add(newResourceGrid);//THIS "THIS" IS THE BUTTON, NOT THE PARENT PANEL - SO IT DOESN"T WORK!?
console.log(this);

}//eo loadlayouts

//****** event handlers ******

//handle before close event for this tab
,handleBeforeClose:function(){
Ext.Msg.alert('Message', 'You clicked close');
}

//handle save changes click
,handleBTNSaveChanges:function(){
Ext.Msg.alert('Message', 'You clicked Save Changes');
}

//handle copy plan click
,handleBTNCopyPlan:function(){
Ext.Msg.alert('Message', 'You clicked Copy Plan');
}

});//eo extend

Thanks!

Animal
11 Nov 2009, 8:15 AM
http://www.extjs.com/deploy/ext-3.0-rc3/docs/?class=Ext.Button&member=scope

Animal
11 Nov 2009, 8:16 AM
But why would you want a GridHolder? A Grid can hold itself.

madirishman
11 Nov 2009, 10:33 AM
Thanks animal.

I'm using a "gridholder" because I will have a toolbar on the panel that will control multiple grids within. For example, clicking the "Save" button will call the save method of both grid instances in the panel.

Does this sound like reasonable way to go about it?

Thanks
md

Animal
11 Nov 2009, 11:15 AM
That's just a Panel then, not a GridHolder.

What layout are you using to render, size and arrange these multiple child GridPanels?

madirishman
11 Nov 2009, 11:31 AM
my "gridholder" is just my preconfigured version of a panel, I need it preconfigured because I will be opening multiple "holders" into tabs.

I will be using a fit layout for the multiple grids inside the panel. Basically from top down, my application looks like this:

viewport -> center region -> tabpanel -> "my gridholder' with toolbar -> 2 grids

Animal
11 Nov 2009, 11:38 AM
OK, but what layout are you using to render, size and arrange these multiple child GridPanels?

madirishman
11 Nov 2009, 12:01 PM
I guess I'm not sure. Any advice?

Animal
11 Nov 2009, 12:07 PM
Well, its up to you.

How you you want them arranged and sized?

Decide this, and the look at the layout types to see which will work for you.