ExtJS图表tbar添加按钮实现Grid显隐及布局优化求助

问题根源 #

1. 容器的vbox布局设置了align: 'stretch'，强制子组件（按钮）拉伸至容器宽度，导致按钮占满整个tbar宽度
2. Grid的flex:1在vbox布局中控制高度占比，但tbar默认高度有限，且未设置Grid的最小高度，容易导致Grid被挤压消失
3. 显示/隐藏Grid时未触发容器布局更新，可能引发尺寸计算异常

修改方案 #

• 移除容器布局的align: 'stretch'，改为align: 'left'（或保留默认的center），让按钮保持自身默认尺寸
• 给Grid设置minHeight确保不会被挤压，同时保留flex:1以自适应容器剩余高度；按需开启垂直滚动避免内容溢出
• 在按钮点击事件中调用容器的updateLayout()方法，确保布局刷新
• 给容器添加flex:1，让其占满tbar的可用宽度

修改后的代码 #

var barchart = {
    xtype: 'cartesian',
    legend: {
        docked: 'bottom'
    },
    tbar: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'left', // 替换stretch，保留按钮原尺寸
            pack: 'start'
        },
        flex: 1, // 容器占满tbar宽度
        scrollable: 'y', // Grid内容过多时允许垂直滚动
        items: [{ 
            xtype: 'button', 
            text: 'Afficher DSO',
            // 可选：设置固定宽度进一步稳定按钮尺寸
            // width: 120,
            listeners: {
                click: function(btn){
                    var dsoGrid = btn.nextSibling();
                    var container = btn.up('container');

                    if( dsoGrid.hidden ){
                        helperCache.multiToolbox(dsoGrid, ["NOT_HIDE"]);
                        btn.setText("Masquer DSO");
                    } else {
                        helperCache.multiToolbox(dsoGrid, ["HIDE"]);
                        btn.setText("Afficher DSO");
                    }
                    // 触发布局刷新，重新计算组件尺寸
                    container.updateLayout();
                }
            }
        },{
            xtype: 'grid',
            itemId: 'grid_history_dso',
            // hidden: true,
            scrollable: {
                x: true, // 开启横向滚动
                y: true  // 可选：开启纵向滚动
            },
            margin: '5 0 0 0', // 调整margin，拉开与按钮的间距
            minHeight: 150, // 设置最小高度，防止被挤压消失
            flex: 1, // 自适应容器剩余高度
            store: dsoStore,
            columns: dsoColumns,
        }]
    }],
    // ... 其他图表配置
};

额外提示 #

• 若按钮尺寸仍不稳定，可直接给按钮添加width属性固定宽度
• Grid的scrollable设为对象形式，能更精准控制滚动方向
• updateLayout()是解决显示/隐藏后布局异常的关键步骤

内容的提问来源于stack exchange，提问作者B. Christophe