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

[samuelp]

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.

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

[janelle]

Try something like this:

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?

[janelle]

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

// 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();