Question

我有一个网格通过json商店获取数据。我想显示网格中的总行数。问题是store.count（）函数在存储加载之前运行，因此它返回0.如何才能让我的count函数只在商店加载后运行？我在MVC工作，这是我的app.js，里面有我的计数逻辑。

感谢您的帮助

    Ext.application({
            name: 'AM',
            appFolder: 'app',
            controllers: [
                    'Users'
            ],
            launch: function(){
                  Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
                  Ext.create('Ext.container.Viewport', {
                            resizable: 'true',
                            forceFit: 'true',
                            layout: 'fit',
                            items:[{
                                    xtype: 'userpanel',
                            }]
                  });
                  var     port = Ext.ComponentQuery.query('viewport')[0],
                          panel = port.down('userpanel'),
                          grid = panel.down('userlist'),
                          label = panel.down('label');
                  var count = grid.store.getCount();
                  var labelText = "Number of people in list: " + count;
                  label.setText(labelText);
            }
    });

商店代码：

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,
    autoSync: true,
    purgePageCount: 0,
    proxy: {
            type: 'rest',
            url: 'json.php',
            reader: {
                    type: 'json',
                    root: 'queue',
                    successProperty: 'success'
            }
    },
sortOnLoad: true,
    //autoLoad: true,
    sorters: [
            {
                    property: 'PreReq',
                    direction: 'DESC'
            },
            {
                    property: 'Major1',
                    direction: 'ASC'
            },
            {
                    property: 'UnitsCompleted',
                    direction: 'DESC'
            }
    ],
listeners:{
            onload: function(){
                    var     port = button.up('viewport'),
                            grid = port.down('userlist'),
                            panel = port.down('userpanel'),
                            label = panel.down('label'),
                            count = grid.store.getCount(),
                            labelText = "Number of people in list: " + count;
                    label.setText(labelText);
            },
            scope: this
    }
});

网格代码：

Ext.define('AM.view.user.List' , {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    store: 'Users',
    height: 'auto',
    width: 'auto',
    //resizable: 'true',
    features:[{
            ftype: 'grouping'
    }],
autoFill: 'true',
    layout: 'fit',
    autoScroll: 'true',
    initComponent: function() {
            function renderTip(value, metaData, record, rowIdx, colIdx, store) {
                    metaData.tdAttr = 'data-qtip="' + value + '"';
                    return value;
            };
            var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
            this.columns=[
                //code for all my columns
            ]
            ];
            this.callParent(arguments);

}
});

Answer 1

尝试在商店中放置一个监听器然后监听onload事件获取计数并以这种方式更新字段。虽然有很多方法可以做到这一点只有一个。

但是在上面的示例中，您永远不会加载您刚刚创建它的商店，这就是您看到零的原因。

Answer 2

想通了，需要为“load”事件添加一个监听器，而不是“onLoad”。代码如下......

Ext.define('APP.store.Store', {
    extend: 'Ext.data.Store',
    model: 'APP.model.Model',
    autoLoad: true,
    autoSync: true,
    purgePageCount: 0,
    proxy: {
            type: 'rest',
            url: 'json.php',
            reader: {
                    type: 'json',
                    root: 'users',
                    successProperty: 'success'
            }
    },
    sortOnLoad:true,
    sorters: [{
            property: 'last',
            direction: 'ASC'
    }],
    listeners: {
            load:{
                    fn:function(){
                            var label = Ext.ComponentQuery.query('#countlabel')[0];
                            label.setText(this.count()+ ' Total Participants);
                    }
            }
    }
});

Extjs MVC在存储加载后运行函数

2 个答案: