PDA

View Full Version : TabBar to contain kitchen sink example?



omulriain
16 Sep 2010, 3:16 PM
I want to add Kitchen Sink demo to a panel and allow a different application to be selected alongside it. Basically what I want to do is add total control to a bottom tabBar but maintain all of the functionality in the kitchen sink as well as its major components. It is a near perfect fit for what I want to accomplish except that it expects to be the only ui component in the whole application.

How would you go about modularizing the kitchen sink to make it selectable from a bottom bar? At first I thought I would just wrap the example in an Ext.TabPanel as an item and utilize the tabBar but this isn't working. I really want to reduce the example and reuse it, but can't seem to figure out what would be required to do it.

omulriain
17 Sep 2010, 7:56 AM
What I did was remove all the sourcebox and references so that I could get rid of a majority of the init:function stuff leaving :
sink.Main = {
iconCls: 'home',
title: 'Home',

init : function() {
this.ui = new Ext.ux.UniversalUI({
title: Ext.is.Phone ? 'Remote' : 'Social Remote',
useTitleAsBackText: false,
navigationItems: sink.Structure

});
}

Then I included it in a tab bar as such:

var mainnav = new Ext.TabPanel({
fullscreen: true,
layout: 'card',
animation: {
type: 'cube',
cover: true
},
items: [sink.Main , Pane2, Pane3],
tabBar: {
dock: 'bottom',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
}
});
in another .js file.

The problem I am facing now is that the content doesn't always get switched as well as the nav bar never going away. Any suggestions would be appreciated. Maybe I am going about it in the wrong way, let me know if you think so. I want each of the panes in the tabBar to take up the whole page minus the tabBar at the bottom, and possibly the tab bar at the top( but I could add the top bar to every pane if needed).

omulriain
19 Sep 2010, 2:28 PM
based on a post http://www.sencha.com/forum/showthread.php?110085-Ext.ux.UniversalUI-doesn-t-work-when-put-into-other-panel I was able to figure this out:



this.ui = new Ext.ux.UniversalUI({
iconCls:'search',
title: 'Sink',
//title: Ext.platform.isPhone ? 'Sink' : 'Kitchen Sink',
navigationItems: sink.Structure,
buttons: [{xtype: 'spacer'}, this.sourceButton],
listeners: {
navigate : this.onNavigate,
scope: this
}
});
var tabBar = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
defaults: {
scroll: 'none'
},
items:[this.ui,{iconCls:'home',title: 'card1',html:'<h1>tab2</h2>'}]
});
this.ui2=new Ext.Panel({
fullscreen:true,
items:[this.tabBar],
layout:'card',
dockedItems:[{
xtype:'toolbar',
dock:'top',
items:[{text:'one'},{xtype:'spacer'},{text:'two'}]
}],
listeners:{
orientationchange:function(comp,orientation,w,h){
comp.items.each(function(item,index,length){
item.setOrientation(orientation,w,h);
});
}
}
});