1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    6
    Vote Rating
    0
    matrym is on a distinguished road

      0  

    Question Nested Panels, Constant bottom toolbar, Page-Dependent top toolbar

    Nested Panels, Constant bottom toolbar, Page-Dependent top toolbar


    I'm trying to create a constant bottom toolbar, which controls a panel above it. Then the panel above it should have a toolbar of its own (at the top). I've attempted the below code, which almost works, but I can't see the html of the sub-page inner panels. I think it's because the panel isn't taking up the remaining height, but I don't know why.

    Anyone have any ideas? Thanks!

    PS: I'm cross posting from StackOverflow for better formatting and perhaps a wider audience. If you're interested in the code formatting:

    http://stackoverflow.com/questions/5...n-sencha-touch


    Ext.setup({
    onReady: function() {


    // Sub-page sections
    var blah = {
    style: "background-color: #B22222; color:#FF0000;",
    title: "one",
    html: "Why can't I see this html",
    layout:"fit",
    flex: 1
    };
    var blah2 = {
    style: "background-color: #404040; color:#000000;",
    title: "one",
    html: "Why can't I see this html",
    layout:"fit",
    flex: 1
    };

    // Main portion of the page, which includes top toolbar and content
    var page1 = new Ext.TabPanel({
    dock: "bottom",
    layout: "card",
    items: [blah, blah2, blah],
    title: "one",
    flex: 1
    });

    // This is the outer panel with the bottom toolbar
    var wrapper = new Ext.Panel({
    fullscreen: true,
    items: page1,
    dockedItems: [
    {
    xtype: "toolbar",
    dock: "bottom",
    items: [
    {
    iconMask: true,
    iconCls: "download"
    },
    {
    iconMask: true,
    iconCls: "favorites"
    },
    {
    iconMask: true,
    iconCls: "search"
    },
    {
    iconMask: true,
    iconCls: "user"
    }
    ]
    }
    ]
    });
    }
    });

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    6
    Vote Rating
    0
    matrym is on a distinguished road

      0  

    Default Solution

    Solution


    http://stackoverflow.com/questions/5...632102#5632102

    Thanks to Nelstrom (of Sencha tutorial video fame)!

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    This works for a very basic site, but you'll find that as your apps grow that a tab panel is not the optimal "shell" for a larger scale app. You should try to use a Viewport control as the application container and then use that as the applciation's container into which you slide in the required page functionality...especially if you plan to use the newer MVC pattern for development.

    With the current Tab control implementation, you'll soon run into situations where you'll want to slide in an additional page (say a product detail page from a product list control), and if you are using a tab control then it'll try to add an additional tab for every page you try to show in the tab. You'll have to write a lot of custom code to override this behavior, which I found to be quite annoying.

    Be sure to check out the examples like twitter and Kiva that use Viewport shells for examples.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    3
    Vote Rating
    0
    mildtee is on a distinguished road

      0  

    Default


    Bucs, thank you for writing it out That is exactly where I got stuck.

    Where do I get a good example of and app that uses tabs on the bottom, but also has pages (say a product detail page from a product list control) that do not need to be linked fro the tab?

    Thanks

Similar Threads

  1. Bottom Toolbar
    By PhilK in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 4 Aug 2010, 5:10 PM
  2. Replies: 4
    Last Post: 28 Jul 2009, 10:58 AM
  3. How to place Toolbar at the bottom of the page?
    By sid.bachtiar in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 29 Jan 2008, 6:04 PM
  4. Toolbar At Bottom of Container
    By nbfarrand in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 Nov 2007, 2:23 PM

Thread Participants: 2

Tags for this Thread