Extjs GridPanel 如何判断数据渲染完毕。

Question

我的页面有两个部分，一个form和一个iframe。form提交表单，action为a.jsp。
a.jsp与数据库交互，得到数据，一条条通过Store.insert方法插入，GridPanel加载数据源，渲染后，返回HTML到父页面的iframe中。
因为查询数据库有一段时间，所以我在form提交前，通过js调用，parent.ExtWaitSerach(1)方法，从而保证页面上会有一个loading图标。在a.jsp 中，我为GridPanel添加了监听事件，afterrender(),目的是想在GridPanel渲染后，调用
parent.ExtWaitSerach(0)，让loading图标消失。
正常来讲，应该先让随着loading图标的消失，GridPanel应该马上显示数据。但是当GridPanel加载很多数据的时候，如200条（我觉得不算多啊），就过有一段时间才显示数据。感觉像延迟一样。试了很多办法。无果。希望大家可以讨论讨论。我想要求教的就是，当GridPanel数据加载过后，应该触发什么事件，此时我在调用parent.ExtWaitSerach(0)让loading图标消失就达到目的。希望在这里可以找到答案。效果如下图：
查询时：查询后：

Answer 1

首先，你要显示Loading图标，直接设置loadMask为true就可以了，会自动显示加载图标的，例如:
new Ext.grid.GridPanel({
    loadMask: true
});另外,你想数据加载完后触发事件，这样写就可以：
store.on('load', function () {
     //这个函数会在数据加载完后触发
});

Answer 2

并不是说你让loading图标消失数据就显示，是查询数据的时候。数据没有加载完毕就一直显示loading图标的
你也可以控制loading图标的，在beforeload的时候显示图片，在load回调事件中隐藏或是删除图标即可
你说你数据一条一条的insert进去，这样当然是很慢了。你可以将数据一次性返回，用loadData(data);
设置进去，或是查询的时候直接reload，带上你查询的参数即可完成查询的。
grid.getEl().mask('Loading...');//添加loading，在beforeload或是insert数据时候调用
grid.getEl().unmask();//删除loading，在数据插入完毕或是load回调函数中调用

Answer 3

对于，store的load事件，我也有监听。不过没有效果。因为我是采用，myStore.insert(<%=i%>, new tempRecord）;方式，所以也就是说每次insert后，store都会load一下吧。store根本无法判断谁是最后一条插入的数据。
你说的loadMask我有试过，但是因为我的页面布局里，Grid是显示在iframe里的，如果loadMask就只会显示在iframe中，这样子页面就很不好看。而且，loadMask是指Grid加载store时显示遮蔽，但是我的store是从内存中读取的，时间很快，所以根本不会显示load图标或是一闪而过吧。请看第二张图，分页下标，数据已经读取出来了，但是Grid没有渲染数据。

Answer 4

按照你的方法我改用了loaddata的方式。可是，我该监听store还是grid呢。监听grid的事件，根本没有进入。监听store，仍然grid加载数据延迟。请问我应该监听哪个事件呢？

Answer 5

不是Store加载慢的问题，是Grid渲染Store中的问题。Grid一次渲染200条数据确实不怎么快，可是一定会有一个事件标志它结束吧。看着3.2的API，各种事件各种尝试，无果，哪位知道一下呗。

Answer 6

store改变会造成gridview更新，整个过程类似
store 有任何数据改变，load remove insert 之类都会 fire 各种event ，造成gridview去做各种更新gridview 画200条数据的速度取决于列的个数，看你的grid貌似后面还有很多列。一般的机器render 10个列200条数据完全不应该卡，除非碰到小霸王学习机。
之所以要用事件，是因为整个store.load过程是异步的，如果你是数据读到本地然后loadData进去，完全是同步的，也就不需要用事件，直接在loadData之后把那个消息提示去掉就ok还是推荐用 loadMask 来做这个消息提示

Answer 7

我感觉你说的很有道理。确实我对store的load事件有监听，监听函数中关闭提示消息。问题不是出在我的电脑卡，而是提示消息关闭后到Grid数据完全显示中间会相隔2秒或3秒。这段让客户感觉不爽。这段时间我觉得是Grid从store中取出数据，然后翻译成一些HTML代码（可能是翻译成Table之类吧）显示到网页上。我希望监听某个事件，表示这一过程完毕，然后再关闭提示消息。

Answer 8

难道真的与机子有关？
我这边数据10W+
每页50条，2000多页
就开始加载数据的时候得等个5秒左右
loading...一消失，数据马上出来你说的这个情况没遇到过用的就是loadMask：true

Answer 9

那你就直接添加
grid.getEl().mask('Loading...');//添加loading，在你插入数据或是loadData数据的地方调用
setTimeout(function () {
       grid.getEl().unmask();//删除loading，用setTimeout 5秒后删除
}, 5*1000);

Answer 10

store load 完会干两件事
1. gridview 刷新
2. loadMask的hideMask
照你说的表现来看是 先调用了 2， 然后再调用的1，也就说明他先绑定的 2 事件，然后再绑定的1， 如果改一下绑定顺序呢？
initEvents : function(){
        Ext.grid.GridPanel.superclass.initEvents.call(this);        if(this.loadMask){
            this.loadMask = new Ext.LoadMask(this.bwrap,
                    Ext.apply({store:this.store}, this.loadMask));
        }
    },
在gridpanel.js 里可以搜到关于loadMask的这段绑定，所以你可以不给grid的构造函数里传loadMask:true， 而是在 new 完grid之后，人工创建loadMask， 比如
var myGrid = new Grid(...);
grid.loadMask = new Ext.LoadMask(grid.bwrap, Ext.apply.....);
未经测试，只是一种想法