PDA

View Full Version : Listening for Preconfigured Classe's objects Events



madirishman
10 Nov 2009, 1:26 PM
Hi All,

I have figured out how to use the preconfigured class pattern and it has been going pretty well. I'm using the rule that a parent's container should listen for it's children's events. This is important since I have a viewport with 4 regions, and events in one region will load an object in a different region.

My problem is trying to listen to a button click within a preconfigured panel class. I need to use the id of the selected row, and create a new tab in the center region based on it. i can't seem to get my parent container to hear the button event click. How do I get to it?

here is the code for the extended viewport class that references the others, the all CAPS stuff in the code are where I'm running into trouble:



Ext.ns('BudgetMain');

BudgetMain.mainView = Ext.extend(Ext.Viewport, {

initComponent:function(){

//hardcoded configuration - cannot be changed from the outside
var config = {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 40,
autoEl: {
tag: 'div',
html: '<div class="headerTitle">xxx Engineering Budget System</div>'
}
}),
{
xtype: 'panel',
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
items: [
projectTree,
new Ext.Panel({
id:'images-view',
minSize: 175,
maxSize: 400,
iconCls: 'icon-grid',
title:'Available plans',
items: [new BA.Panels.PlanPanel()]
})
]
},
new Ext.TabPanel({
region: 'center',
deferredRender: false
})
]//eo config items
};//eo config

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

//call parent config
BudgetMain.mainView.superclass.initComponent.apply(this, arguments)

//set up vars for the children objects objects within this viewports frames
this.myProjectTree = this.items.itemAt(1).items.itemAt(0);
this.myLayoutPanel = this.items.itemAt(1).items.itemAt(1).items.itemAt(0);
this.MyTabPanel = this.items.itemAt(2);

//***** create event listeners for this objects children *****

//listener for a double click within the tree
this.myProjectTree.on({
scope:this,
dblclick: this.handleTreeClick
});

//listener for a double click within layout panel
//THIS WORKS FOR LISTENING TO WHEN A ROW IS SELECTED, BUT I NEED TO LISTEN //TO ITS TOOLBAR BUTTON CLICK AND GET THE SELECTED ROW
this.myLayoutPanel.getSelectionModel().on({
scope:this,
rowselect: this.handlePlanClick
});

}//eo init component

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

//when a tree node is clicked call loadlayouts method for layouts panel
,handleTreeClick:function(node, event) {
if(node.attributes.project){
var vProjectID = node.id;
this.myLayoutPanel.loadLayouts(vProjectID);
};
}//eo handletreeclick

//handler for plan click
,handlePlanClick:function(event) {
//create new grid panel into tab panel
//THIS IS WHERE I WANT TO PASS IN THE SELECTED ROW AFTER BUTTON CLICK AND //CREATE A NEW TAB
var NewTab = this.MyTabPanel.add(
new GridHolderPanel.gridHolder({
title: 'new grid!'
})
)
//show new tab
NewTab.show();
}//eo handleplanclick

});//eo extend


Ext.BLANK_IMAGE_URL = '/CFIDE/scripts/Ext3.0.0/resources/images/default/s.gif';

// application main entry point
Ext.onReady(function(){

//create and show viewport
var myViewPort = new BudgetMain.mainView();

});