extjs 如何完全隐藏dockedItems工具栏

dpiehjr4  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(226)

我可以隐藏TabPanel的dockedItems中的项目,但我想暂时隐藏整个停靠栏,因为工具栏本身仍然占用空间,其余内容不会填充屏幕。
到目前为止,我的确是这样:

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

或者:

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

但两者都不会删除dockedItems工具栏本身。
我甚至试着给dockedItems单独或共同地给予一个id:来删除整个组件,但没有成功。我也试着把工具栏从停靠的项目中移出来,放到包含面板的items:属性中,但这破坏了我的应用程序中其他我目前不想改变的东西。
有什么线索吗?

dsekswqp

dsekswqp1#

如果我没理解错的话,你想暂时从tabPanel中移除tabBar。我可以通过给我的tabBar一个id,然后使用removeDocked和addDocked方法来完成这个任务。我是sencha-touch的新手,所以很可能有更好的方法来完成这个任务
下面的代码从tabPanel中删除tabBar,然后再将其添加回去。

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()
}

})

2exbekwf

2exbekwf2#

添加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;

}

相关问题