Extjs 6现代。如何在加载商店时更新TitleBar标题

时间:2018-03-23 16:06:22

标签: extjs

我有一个TitleBar停靠在列表顶部的列表。 TitleBar的标题应该显示商店中的记录数,这些记录可以改变(因为用户过滤)。我怎么能做到这一点?

2 个答案:

答案 0 :(得分:0)

在您的视图控制器中,您可以在load事件域中收听列表的商店store事件:

Ext.define(`app.view.list.Controller`, {
    extend: 'Ext.app.ViewController',

    listen: {
        store: {
            '#storeId': {
                load: 'onStoreLoad'
            }
        }
    },

    onStoreLoad: function (store) {
        var count = store.getTotalCount();

        // Update TitleBar title...
    }
});

答案 1 :(得分:0)

更好的方法是使用绑定,小提琴:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.Viewport.add({
            xtype: 'container',
            layout: 'fit',
            viewModel: {
                stores: {
                    people: {
                        data: (function() {
                            var data = [],
                                i;

                            for (i = 1; i <= 100; ++i) {
                                data.push({
                                    name: 'P' + Ext.String.leftPad(i.toString(), 3, '0')
                                });
                            }

                            return data;
                        })(),
                        filters: [{
                            disableOnEmpty: true,
                            property: 'name',
                            operator: 'like',
                            value: '{theFilter.value}'
                        }]
                    }
                }
            },
            items: [{
                xtype: 'list',
                itemTpl: '{name}',
                bind: '{people}'
            }, {
                xtype: 'toolbar',
                docked: 'top',
                items: [{
                    xtype: 'textfield',
                    reference: 'theFilter'
                }]
            }, {
                xtype: 'component',
                docked: 'bottom',
                bind: 'Total is: {people.count}'
            }]
        });
    }
});