1. #1
    Ext User
    Join Date
    Dec 2008
    Location
    Colorado Springs, CO
    Posts
    32
    Vote Rating
    0
    omulriain is on a distinguished road

      0  

    Exclamation TabBar to contain kitchen sink example?

    TabBar to contain kitchen sink example?


    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.

  2. #2
    Ext User
    Join Date
    Dec 2008
    Location
    Colorado Springs, CO
    Posts
    32
    Vote Rating
    0
    omulriain is on a distinguished road

      0  

    Default progress but no kaching.

    progress but no kaching.


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

  3. #3
    Ext User
    Join Date
    Dec 2008
    Location
    Colorado Springs, CO
    Posts
    32
    Vote Rating
    0
    omulriain is on a distinguished road

      0  

    Default


    based on a post http://www.sencha.com/forum/showthre...to-other-panel I was able to figure this out:

    Code:
             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);
                            });
                        }
                    }
            });

Similar Threads

  1. background image for kitchen sink overlay.js
    By drossmedia in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 16 Sep 2010, 5:23 AM
  2. Remove a dock in kitchen sink
    By blessan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 14 Sep 2010, 8:43 PM
  3. How to add class in Kitchen Sink 0.94?
    By blessan in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 9 Sep 2010, 9:18 PM
  4. add new panel in kitchen sink demo
    By gimox in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Sep 2010, 5:30 AM
  5. Question to Cards of Kitchen Sink/ Events Example
    By msinn in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 30 Jul 2010, 12:53 PM