Extjs 5.1.3在tbar中添加屏蔽/取消屏蔽网格的按钮

n6lpvg4x  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(215)

在Extjs中,我想在条形图中添加按钮,隐藏/取消隐藏我的网格,我有一些布局困难,所以在某些情况下,我的按钮占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滚动的所有地方

6psbrbz9

6psbrbz91#

为了帮助任何人在相同的情况下,我解决了我的问题:

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是关键字

相关问题