如何每隔几秒刷新商店/模型?

时间:2015-01-18 03:13:22

标签: extjs

我有一个网格面板(商店和模型与之关联),其中我以行方式显示所有数据。网格面板列包含操作列,如果人员单击,则在选项卡中打开一个新表单样式和用户填充数据并将其保存在db中。我想要的是,每隔几秒钟应该如何刷新商店,以便这些数据也应该自动显示在网格面板中。我该怎么办?

1 个答案:

答案 0 :(得分:0)

您可以通过多种方式处理此问题,我个人只是在表单关闭后重新加载商店,重新加载任何更新而不是仅仅重新加载。

下面的代码显示了如何在ExtJs中使用TaskRunner每隔x秒重新加载一次商店。您还可以在商店的load事件中添加一个setTimeout,这样每次商店加载时都会安排它在x秒内再次加载。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var store = Ext.create('Ext.data.JsonStore', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'characters'
                }
            },
            listeners: {
                load: function() {
                    console.log(this);
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });

        var runner = new Ext.util.TaskRunner(),
            task = runner.start({
                run: function() {
                    store.reload();
                },
                interval: 3000
            });

        // IMPORTANT: Dont forget to call stop at a logical point.
        runner.stop();
    }
});

还有一个fiddle包含您可以使用的代码。

如果我必须使用SetTimeout或TaskRunner选项,我可能会在父面板/容器的render事件中初始化它们,并侦听beforeDestroy事件以阻止它们运行。