PDA

View Full Version : OOP Example



danvega
13 Jul 2010, 9:19 AM
All of the code I have worked on before has been spaghetti and no structure to it. Today I am working on an app that I want to structure a little better. First I have a main application.js that is the main entry point for my app and controls the layout. Here we create a tab layout that also has a title bar for our application. The 3 custom components A,B,C in the items array are our custom components (or views).



Ext.ns("vega","vega.ui");

Ext.setup({
tabletStartupScreen: 'assets/images/tablet_startup.png',
phoneStartupScreen: 'assets/images/phone_startup.png',
icon: 'assets/images/icon.png',
glossOnIcon: false,
onReady: function() {

var titlebar = new Ext.Toolbar({
id:'app-titlebar',
dock:'top'
});

var tp = new Ext.TabPanel({
fullscreen:true,
ui:'light',
dockedItems:[titlebar],
animation:{
type:'slide',
cover:true
},
tabBar: {
centered:true,
dock:'bottom',
layout: {pack:'center'}
},
defaults:{
scroll:'vertical'
},
listeners: {
afterlayout : function() {
titlebar.setTitle(this.layout.activeItem.title);
},
cardswitch: function(card) {
titlebar.setTitle(card.title);
},
afterrender : function(){
// load the schedule data for today
}
},
items:[
{
xtype:'componenta',
iconCls:'time',
tb:titlebar
},
{
xtype:'componentb',
iconCls:'bookmarks'
},
{
xtype:'componentc',
iconCls:'user'
}
]
});

}
});


Component A looks like this


vega.ui.ComponentA = Ext.extend(Ext.Panel, {
fullscreen: true,
title: 'Component A',

initComponent: function(){
vega.ui.ComponentA.superclass.initComponent.apply(this, arguments);

},

onRender: function(){
vega.ui.ComponentA.superclass.onRender.apply(this,arguments);
}

});


// register xtype to allow for lazy initialization
Ext.reg('componenta', vega.ui.ComponentA)


Now for B I need the ability to add a button to the toolbar. The only way I could see to do this is by getting the toolbar and adding a new button. The problem with this is the initComponent method is run right away so it ends up adding it to the toolbar for all of our screens.



vega.ui.ComponentB = Ext.extend(Ext.Panel, {
fullscreen: true,
title: 'Component B',

initComponent: function(){

var titlebar = Ext.getCmp('app-titlebar');

titlebar.add({
xtype:'button',
text:'back',
handler:function(){
alert("back");
}
});

vega.ui.ComponentB.superclass.initComponent.apply(this, arguments);
}

});

// register xtype to allow for lazy initialization
Ext.reg('componentb', vega.ui.ComponentB);


I thought it would make sense to use activate / deactivate method listeners for the component but those events are not running?

How would you go about handling this logic in the Component ?