1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    AzurGroup is on a distinguished road

      0  

    Default Answered: Static top and bottom panels with dynamic pages

    Answered: Static top and bottom panels with dynamic pages


    I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
    My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.

    Code:
    var topBar = new Ext.BoxComponent(
                    {
                        xtype: 'box',
                        autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
                    }
            )
    This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
    The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:

    Code:
    Ext.setup({
        phoneStartupScreen : 'resources/images/icon.png',
        icon : 'resources/images/Homescreen.png',
        glossOnIcon : false,
           
        onReady : function() {
    
            var topBar = new Ext.BoxComponent(
                    {
                        xtype: 'box',
                        autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
                    }
            )
          
            var tapHandler = function (btn, evt) {
                 alert("Button '" + btn.text + "' tapped.");
             }
            
            var form = new Ext.form.FormPanel({
    
                items: 
                [
      
                    {
                      xtype: "textfield",
                      name: "city",
                      label: "City",
                      placeHolder: "City", 
                      clearIcon     : true,
                    },
                    {
                      xtype: "textfield",
                      name: "zip",
                      label: "Zip",
                      clearIcon     : true,
                    },
                    {
                      xtype: "textfield",
                      name: "areaCode",
                      label: "Area Code",
                      clearIcon     : true,
                    }
                   
              ] 
            })    
    
            var searchPageContent ={
                html:'This is a test for search page'
            }
            var userPageContent ={
                html:'This is a test for user page'
            }
            
            var dockedItems = [ 
               {
                    xtype : 'toolbar',
                    dock : 'top',
                    items : topBar
    
                }, 
                {
                    xtype: "toolbar",
                    dock: "bottom",
                    items: [
                        {
                            xtype: 'spacer'
                        },
                        {
                          iconMask: true,
                          iconCls: "favorites",
                          clearIcon     : true,
                          items: form
                        },
                        {
                            xtype: 'spacer'
                        },
                        {
                          iconMask: true,
                          iconCls: "search",
                          clearIcon     : true,
                          items: searchPageContent
                        },
                        {
                            xtype: 'spacer'
                        },
                        {
                          iconMask: true,
                          iconCls: "user",
                          clearIcon     : true,
                          items: userPageContent
                        },
                        {
                            xtype: 'spacer'
                        },
                    ]  
                } 
            ]
            
            new Ext.Panel({
                id : 'buttonsPanel',
                fullscreen : true,
                dockedItems : dockedItems
            });
        }
    });
    as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
    Thank you

  2. After a lot of searching and having tried out about 50 different examples, i finally found an example which i could modify to get the layout i wanted. The problem was i was unaware of how to have a static top bar with a centered image, a static bottom bar with icons belonging to all my pages, and a dynamic middle main section which would display the contents of each page. This is how i was able to accomplish it:

    Code:
    Ext.setup({
        onReady: function() {
    
            var topBar = new Ext.BoxComponent({   
                layout: 'hbox',
                
                html:
                       '<img src="resources/icons/icon.png" height="30", width="48"/>',
               flex: 1,
               style:{
                   textAlign: 'center'  
               }
            })
            var dockedItems = [ 
               {
                   //this creates the top bar, places it at the top of the page and gives it a background image
                    xtype : 'toolbar',
                    dock : 'top',
                    style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
                    items : topBar
        
                }
            ]
            // Sub-page sections
    
    
            // Main portion of the page, which includes top toolbar and content
            var welcome = new Ext.Panel({
                items: [{
                    html: 'this is the welcome screen'
                }],
                title: "Welcome",
                iconCls: "welcome",
            });
            var search = new Ext.Panel({
                items: [{
                    html: 'this is the search screen'
                }],
                title: "Search",
                iconCls: "search",
            });
    
    
            // This is the outer panel with the bottom toolbar
            var wrapper = new Ext.TabPanel({
                fullscreen: true,
                tabBar: {
                    dock: 'bottom',
                    style: 'background:#8a9cB2;',
                    layout: {
                        pack: 'center'
                    }
                },
                items: [
                    welcome,
                    search,
                    {
                        iconMask: true,
                        iconCls: "search"
                    },
                    {
                        iconMask: true,
                        iconCls: "user"
                    }
                ],
                dockedItems: dockedItems
            });
        }
    });
    I have tested this code on an iPhone, Android and Blackberry simulators and it works for all 3 platforms.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Answers
    3493
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not use Ext.Img?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    AzurGroup is on a distinguished road

      0  

    Default


    Thank you for your response, unfortunately i was unable to implement your suggestion, however i did get the image to show up and this is the code that i used;

    Code:
            var topBar = new Ext.BoxComponent({   
                layout: 'hbox',
                
                html:'<img src="resources/icons/icon.png" height="30" width="48"/>',            
                flex: 1,
                style:{
                    textAlign: 'center'  
                }
            })
    Sadly, my second problem is still not solved. I am still unable to add items to my items:[] tag and have their icon show up on the bittom docked panel. Any suggestions on that?
    Last edited by AzurGroup; 7 May 2012 at 8:05 AM. Reason: height and width didnt give the desired results

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    AzurGroup is on a distinguished road

      0  

    Default


    After a lot of searching and having tried out about 50 different examples, i finally found an example which i could modify to get the layout i wanted. The problem was i was unaware of how to have a static top bar with a centered image, a static bottom bar with icons belonging to all my pages, and a dynamic middle main section which would display the contents of each page. This is how i was able to accomplish it:

    Code:
    Ext.setup({
        onReady: function() {
    
            var topBar = new Ext.BoxComponent({   
                layout: 'hbox',
                
                html:
                       '<img src="resources/icons/icon.png" height="30", width="48"/>',
               flex: 1,
               style:{
                   textAlign: 'center'  
               }
            })
            var dockedItems = [ 
               {
                   //this creates the top bar, places it at the top of the page and gives it a background image
                    xtype : 'toolbar',
                    dock : 'top',
                    style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
                    items : topBar
        
                }
            ]
            // Sub-page sections
    
    
            // Main portion of the page, which includes top toolbar and content
            var welcome = new Ext.Panel({
                items: [{
                    html: 'this is the welcome screen'
                }],
                title: "Welcome",
                iconCls: "welcome",
            });
            var search = new Ext.Panel({
                items: [{
                    html: 'this is the search screen'
                }],
                title: "Search",
                iconCls: "search",
            });
    
    
            // This is the outer panel with the bottom toolbar
            var wrapper = new Ext.TabPanel({
                fullscreen: true,
                tabBar: {
                    dock: 'bottom',
                    style: 'background:#8a9cB2;',
                    layout: {
                        pack: 'center'
                    }
                },
                items: [
                    welcome,
                    search,
                    {
                        iconMask: true,
                        iconCls: "search"
                    },
                    {
                        iconMask: true,
                        iconCls: "user"
                    }
                ],
                dockedItems: dockedItems
            });
        }
    });
    I have tested this code on an iPhone, Android and Blackberry simulators and it works for all 3 platforms.

Thread Participants: 1

Tags for this Thread