使用Comet长轮询在Ext JS中更新模型和存储

时间:2012-12-01 08:57:02

标签: javascript ajax model-view-controller extjs comet

我已经使用Ext.Ajax.request()实现了Comet解决方案,以便在发生超时或收到成功响应时重新初始化相同的请求。

    var http = {

    requestId: 0,
    request: function(timeout){

        Ext.Ajax.request({
            url: '/echo/json/',
            timeout: timeout || 10000,
            method: 'POST',
            scope: http,    // scoped to the http object
            params: {
                json: Ext.encode({ 
                    data: [
                        {
                            id: 1,
                            type: 'notification',
                            timestamp: Ext.Date.format(new Date(), 'timestamp'),
                            from: 1445261,
                            to: 1402804,
                            read: false,
                            important: true,
                            content: 'Lorem ipsum...'
                        } 
                    ]
                }),
                delay: 5
            },
            success: function(resp) {
                if (resp.status === 200){
                    console.log('success');                
                    this.request();   
                }
            },
            failure: function(resp, opts) {
                if (resp.timedout === true) {
                    console.log('failure');  
this.request();                       
                } else {                   
                }
            },
            callback: function(options, success, resp) {
                if (this.requestId === 0) {
                    this.requestId = resp.requestId;
                } 
            }
        }); 

    }

};

http.request();​

我想在Ext JS MVC中实现它,并利用本机代理从服务器获取数据并通过模型将其加载到Store中。

查看文档我无法看到如何完成此操作,因为您似乎无法访问Ext.Ajax.request方法中的成功和失败回调。

有没有人知道如何使用Ext MVC架构实现长轮询?

上面的示例代码使用JSFiddle ajax JSON响应echo:

http://jsfiddle.net/Dd8q4/

1 个答案:

答案 0 :(得分:1)

我看到它的方式有3种方法:

  1. 更有趣的一个,干净且可能更具挑战性的是扩展代理类以保持连接活跃。有一个代理扩展示例可以使用Flicker API(sencha blog entry)。这可能有助于您入门。

  2. 手动解析响应并从响应数据创建Model对象并手动将它们插入到商店中。

  3. 使用商店回调方法可以像处理Ajax请求一样永久加载商店。向下滚动到store API的动态加载部分,以获取使用回调函数加载商店的示例。还有一个load事件监听器在读取数据后启动。