How to completely hide the dockedItems toolbar

I'm able to hide items among the dockedItems of a TabPanel, but am wanting to temporarily hide the entire dock, because the toolbar itself still takes up space and the rest of the content does not fill the screen.

So far, I do like so:

myApp.views.productList.dockedItems.items[0].removeAll(true);
myApp.views.productList.doComponentLayout();

Alternatively:

myApp.views.productList.getComponent('search').removeAll(true);
myApp.views.productList.doComponentLayout();

But neither removes the dockedItems toolbar itself.

I've even tried to give t开发者_运维知识库he dockedItems individually and collectively an id: to remove the whole component, but without luck. I've also tried moving the toolbar in question out from the docked items and into the items: property of the containing panel, but this breaks other things in my app that I'd rather not change at present.

Any clues on how to do this?

If I understand you correctly you want to temporally remove tabBar from a tabPanel. I was able to accomplish this through giving and id to my tabBar and then using removeDocked and addDocked methods. I'm new to sencha-touch so most likely there is a better way of doing this

The code below removes tabBar from tabPanel and then adds it back again.

Ext.setup({

onReady: function() {

    var tabpanel = new Ext.TabPanel({

        ui        : 'dark',
        sortable  : true,
        tabBar:{
            id: 'tabPanelTabBar'
        },
        items: [
            {title: 'Tab 1',html : '1',cls  : 'card1'},
            {title: 'Tab 2',html : '2',cls  : 'card2'},
            {title: 'Tab 3',html : '3',cls  : 'card3'}
        ]
    });

    var paneltest = new Ext.Panel({
        fullscreen: true,
        dockedItems:[
            {

                xtype: 'button',
                text: 'Disable TabBar',
                scope: this,
                hasDisabled: false,
                handler: function(btn) {

                    console.log(btn);
                    if (btn.hasDisabled) {

                        tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0);

                        btn.hasDisabled = false;
                        btn.setText('Disable TabBar');
                    } else {

                        tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false)

                        btn.hasDisabled = true;
                        btn.setText('Enable TabBar');
                    }
                }}
        ],
        items:[tabpanel]
    });
    paneltest.show()
}

})

в dockedItems добавить button, которая будет обращаться к элементу panel.dockedItems и изменять/скрывать сам dockedItems

function f_create_accord(P_el_id, P_el_params) {
P_el = Ext.create
    (
        'Ext.panel.Panel',
        {
            id: P_el_id

            , border: false
            , x: P_el_params.left
            , y: P_el_params.top
            , id_el: P_el_params.id_el
            , layout: 'accordion'
            , dockedItems: [{

                xtype: 'toolbar',
                dock: 'bottom',

                items: [{
                    P_el_id: P_el_id,
                    xtype: 'button',
                    text: 'добавить',
                    
                }, {
                    id_el: P_el_id,
                    xtype: 'button',
                    text: 'скрыть',
                    vision: true,
                    listeners: {
                        click: function (el, v2, v3) {
                            if (el.vision) {
                                Ext.getCmp(el.id_el).dockedItems.items[0].setHeight(5);
                                Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].hide();
                                Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(Ext.getCmp(el.id_el).getWidth());
                                el.vision = false
                            }
                            else {
                                Ext.getCmp(el.id_el).dockedItems.items[0].setHeight('15px');
                                Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].show();
                                Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(60);
                                el.vision = true
                            }
                            // Ext.getCmp(el.id_el).dockedItems.items[i].hide();
                         
                        }
                    }
                }]
            }]
        }
    );

P_el.setStyle('position', 'absolute');
P_el.setStyle('box-shadow', ' 0px 0px 0px 1px green');
P_el.setStyle('background', 'border-box');
return P_el;

}