ExtJS 6 Modern：如何动态更新TitleBar标题以显示Store记录数

嘿，这个需求其实挺常见的，我来给你拆解一下具体实现步骤，不管你用的是ExtJS还是Sencha Touch，思路都是通的：

核心思路 #

我们需要监听Store的数据变化/过滤变化事件，每当用户执行过滤操作导致Store中的记录数量改变时，自动更新TitleBar的标题文本。

方法一：直接监听Store事件（适合传统写法） #

这种方式简单直接，不需要依赖MVVM，适合快速实现：

1. 先定义基础组件 #

假设你的Store、TitleBar和List的基础代码是这样的：

// 创建你的数据Store
const myDataStore = Ext.create('Ext.data.Store', {
    model: 'YourDataModel',
    data: [/* 初始数据集 */],
    remoteFilter: false // 本地过滤，若用远程过滤需调整逻辑
});

// 创建顶部停靠的TitleBar，初始显示当前记录数
const topTitleBar = Ext.create('Ext.TitleBar', {
    docked: 'top',
    title: `当前记录: ${myDataStore.getCount()}`
});

// 创建List组件并绑定Store和TitleBar
const myList = Ext.create('Ext.List', {
    store: myDataStore,
    dockedItems: [topTitleBar],
    itemTpl: '{yourFieldName}' // 你的列表模板
});

2. 添加事件监听和更新逻辑 #

给Store绑定事件，当数据变化或过滤操作完成时，调用更新标题的函数：

// 定义更新标题的工具函数
function updateTitleBarCount() {
    const filteredCount = myDataStore.getCount();
    topTitleBar.setTitle(`当前记录: ${filteredCount}`);
}

// 监听Store的关键事件
myDataStore.on({
    datachanged: updateTitleBarCount, // 数据新增/删除时触发
    filterchange: updateTitleBarCount, // 过滤条件变化时触发
    refresh: updateTitleBarCount // 兼容部分版本的刷新事件，保险起见加上
});

方法二：MVVM绑定（更优雅的模块化写法） #

如果你的项目用了ExtJS的MVVM架构，推荐用这种方式，代码更简洁且自动响应变化：

1. 定义ViewModel #

在ViewModel中添加计算属性，自动监听Store的记录数变化：

Ext.define('YourApp.view.main.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    stores: {
        myStore: {
            model: 'YourDataModel'
        }
    },
    formulas: {
        filteredRecordCount: function(get) {
            // 自动监听Store的count属性变化
            return get('myStore.count');
        }
    }
});

2. 绑定TitleBar的标题 #

在组件定义中直接通过ViewModel绑定标题：

const topTitleBar = Ext.create('Ext.TitleBar', {
    docked: 'top',
    // 直接绑定ViewModel中的计算属性
    title: '当前记录: {filteredRecordCount}'
});

const myList = Ext.create('Ext.List', {
    viewModel: 'YourApp.view.main.MyViewModel',
    store: '{myStore}', // 绑定ViewModel中的Store
    dockedItems: [topTitleBar],
    itemTpl: '{yourFieldName}'
});

注意事项 #

• 如果是远程过滤（remoteFilter: true），Store的getCount()需要等到服务器返回数据后才会更新，此时你需要额外监听Store的load事件来更新标题。
• 若批量执行过滤或数据操作，可能会多次触发事件，但setTitle()方法是幂等的，不会有性能问题。

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