1. #1
    Touch Premium Member
    Join Date
    Sep 2010
    Posts
    43
    Vote Rating
    0
    samuelp is on a distinguished road

      0  

    Default how to add icons / buttons in a docked panel without using toolbar?

    how to add icons / buttons in a docked panel without using toolbar?


    Hi,
    I want to add a panel in the dockedItems, and include some html text and a couple of icons and buttons.
    The following code renders the docked panel with the html text, but the icons/buttons don't show up.

    Code:
    dockedItems: [{
            xtype: 'panel',
            dock: 'top',
            cls: 'myCls',
            html: 'Some text',
            items: [{
                    layout: {pack: 'center'},
                    //xtype: 'panel',
                    items: [{
                            iconCls: 'arrow_up',
                            //text:'Previous',
                            ui: 'plain',
                            iconMask: true,
                            handler: function(){}
                    },
                    {
                            iconCls: 'arrow_down',
                            ui: 'plain',
                            //text:'Next',
                            iconMask: true,
                            handler: function(){}
                    }]
            }]
    }]
    If I use xtype=toolbar or segmentedbutton, then I see the buttons. But I don't want to use toolbar, just a simple docked panel with my own style.
    What am I doing wrong?
    Thanks,
    Sam

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    3
    janelle is on a distinguished road

      0  

    Default


    Try something like this:

    Code:
    dockedItems: [{
            xtype: 'panel',
            dock: 'top',
            cls: 'myCls',
            html: 'Some text',
            dockedItems: [
                    {
                            xtype: 'button',
                            dock: 'right',
                            iconCls: 'arrow_up',
                            text:'Previous',
                            ui: 'plain',
                            iconMask: true,
                            handler: function(){}
                    },
                    {
                            xtype: 'button',
                            dock: 'right',
                            iconCls: 'arrow_down',
                            ui: 'plain',
                            text:'Next',
                            iconMask: true,
                            handler: function(){}
            }]
    }]
    I am doing something similar. I am running into a problem tho. Initially I apply a class "clr" so the buttons do not show up. When certain things happen, I want the buttons to show up and so I remove the class "clr". The problem is that sometimes displaying the button causes the css to be strange and the button appears to the side of the toolbar instead of in it... Anyone have any ideas on how to fix that?

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    3
    janelle is on a distinguished road

      0  

    Default


    Quote Originally Posted by janelle View Post
    I am doing something similar. I am running into a problem tho. Initially I apply a class "clr" so the buttons do not show up. When certain things happen, I want the buttons to show up and so I remove the class "clr". The problem is that sometimes displaying the button causes the css to be strange and the button appears to the side of the toolbar instead of in it... Anyone have any ideas on how to fix that?
    I fixed it by running doComponentLayout() on both the main panel and the item that contains the buttons. It wasnt working previously because I was only running doComponentLayout() on the main panel, and not the item directly holding the button

    Code:
    // global paths to items
    TitleBar = MyApp.Viewport.dockedItems.items[1];
    PrevBtn = MyApp.Viewport.dockedItems.items[1].dockedItems.items[1];
    NextBtn = MyApp.Viewport.dockedItems.items[1].dockedItems.items[2];
    
    ...
    
    
    // show buttons
    PrevBtn.removeCls("clr");
    NextBtn.removeCls("clr");
                                
    // update display so buttons are in the right place
    //MyApp.Viewport.doComponentLayout();  // this seems to not be needed
    TitleBar.doComponentLayout();

Similar Threads

  1. Can a toolbar inherit the title of panel it's docked to?
    By kevinwmerritt in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 10 Dec 2010, 2:11 PM
  2. Unable to add Docked Panel
    By gcallaghan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 21 Oct 2010, 10:35 AM
  3. Replies: 2
    Last Post: 23 Aug 2010, 3:31 AM
  4. Large Icons on Toolbar Buttons
    By big_jim in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 10 Jun 2010, 11:59 AM

Thread Participants: 1

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