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
    36,754
    Answers
    3462
    Vote Rating
    827
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."