如何让可滚动面板内的label在滚动时保持固定不位移

问题原因 #

你当前将scrollable: true配置在了外层可滚动面板上，面板内所有子元素都会被纳入滚动区域，因此label会和toolbar一起跟随滚动。

修复方案 #

核心思路是关闭外层面板的全局滚动，仅给需要滚动的toolbar开启单独滚动，调整布局实现label固定、toolbar独立滚动的效果，修改后配置如下：

第一步：调整外层scrollablepanel配置 #

scrollablepanel: {
    viewTemplate: {
        layout: 'vbox', // 替换原有center布局，实现子元素垂直排布
        header: false,              
        scrollable: false, // 关闭外层全局滚动
        items: {
            xtype: 'itemsview'
        }
    }
}

第二步：调整子项配置 #

保留原有子项结构，仅需给label补全宽度适配，toolbar的滚动配置不需要调整（如果是ExtJS 6+版本建议将autoScroll替换为scrollable: true兼容性更好）：

items: [{
    xtype: 'label',
    html: "title",
    width: '100%', // 保证label占满面板宽度，避免布局错位
    padding: '8px 2px' // 可按需调整边距
},
{
    xtype: 'toolbar',
    reference: "titletoolbar",
    layout: "vbox",
    autoScroll: true, // ExtJS 6+可替换为scrollable: true
    flex: 1, // 自动占满label以外的所有剩余高度
    padding: 2,
    margin: 0,      
    listeners: {
        afterrender: function () {
            var me = this;
            var tool = me.up('titleview');
            tool.getController().updatetoolbar();
        }
    }
}]

备选方案（无需修改原有布局结构） #

如果不想调整外层布局，可以通过CSS粘性定位实现label固定，给label添加自定义样式类即可：

1. 给label配置添加cls: 'fixed-panel-title'
2. 新增CSS样式：

.fixed-panel-title {
    position: sticky;
    top: 0;
    background: #ffffff; /* 必须设置背景色，避免滚动时toolbar内容从下方透出 */
    z-index: 9;
    width: 100%;
}

内容的提问来源于stack exchange，提问作者vapor1234