tbar中的Extjs 5.1.3添加掩码/取消掩码网格的按钮

Question

在Extjs中，我想在tbar图表中添加按钮，它隐藏/取消我的网格，我的布局有些困难，所以在确定的情况下，我的按钮占100%位置，还有我的网格显示，我的代码如下：

var barchart = {
    xtype: 'cartesian',
    legend: {
        docked: 'bottom'
    },
    tbar: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            columns: 1,
            align: 'stretch'
        },
        items: [{ 
            xtype: 'button', 
            text: 'Afficher DSO',
            listeners: {
                click: function(btn){
                    var dsoGrid = btn.nextSibling();

                    if( dsoGrid.hidden ){
                        helperCache.multiToolbox(dsoGrid, ["NOT_HIDE"]);
                        btn.setText("Masquer DSO");
                    } else {
                        helperCache.multiToolbox(dsoGrid, ["HIDE"]);
                        btn.setText("Afficher DSO");
                    }
                }
            }
        },{
            xtype: 'grid',
            itemId: 'grid_history_dso',
            // hidden: true,
            scrollable: 'x',
            margin: 5,
            flex: 1,
            store: dsoStore,
            columns: dsoColumns,
        }]
    }],
    .......

我喜欢我的按钮的大小是正常的，我的网格用x卷轴将他的容器的所有位置都安装好了。

Answer 1

为了帮助同一案件中的任何人，我解决了我的问题：

var barchart = {
    xtype: 'cartesian',
    legend: {
        docked: 'bottom'
    },
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        layout: {
            type: 'anchor',
        },
        items: [{ 
            xtype: 'button', 
            text: 'Afficher DSO',
            listeners: {
                click: function(btn){
                    var dsoGrid = btn.nextSibling();

                    if( dsoGrid.hidden ){
                        helperCache.multiToolbox(dsoGrid, ["NOT_HIDE"]);
                        btn.setText("Masquer DSO");
                    } else {
                        helperCache.multiToolbox(dsoGrid, ["HIDE"]);
                        btn.setText("Afficher DSO");
                    }
                }
            }
        },{
            xtype: 'grid',
            itemId: 'grid_history_dso',
            hidden: true,
            scrollable: 'x',
            margin: 5,
            anchor: '100%',
            store: dsoStore,
            columns: dsoColumns,
        }]
    }],

dockedItem是关键