PDA

View Full Version : OOP Example



danvega
13 Jul 2010, 7:11 AM
Up until now everything I have done has been a big mess of spaghetti code. I am trying to work on a more OOP style approach to my application and I am running into an issue. Let's say I have a main application.js as my starting point that defines some layout stuff.



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'
}
]
});

}
});


This is the overall look and feel to the application. When a tab icon is clicked on the bottom we load in a new "view" or component. I have defined 3 custom components and for this example I kept it easy.

views/ComponentA


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);


views/ComponentB


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);


Component C is the same but you get the idea. The main problem here is that on different screens I may need access to the toolbar to add or remove a button. In my component b that code works fine only it adds it to the title bar for all of the views.

I almost need to do this on activate / deactivate for that card but that doesn't seem to be firing. How can I create buttons in my components and add them to the toolbar for just that view?

TommyMaintz
14 Jul 2010, 11:30 AM
Hi Dan,

Could you zip up your source code and send it to tommy@sencha.com? That way I can get the bigger picture, and I might be able to refactor it for you, and show you how to tie together the different pieces.

danvega
14 Jul 2010, 11:33 AM
That would be awesome... Do you want the application I am working on or just the oop example I created? I will send you the example app right now.

Thanks!

TommyMaintz
14 Jul 2010, 11:34 AM
The example app will be fine.

kostik83
15 Jul 2010, 12:44 PM
it would be nice if you could post your code here after