本文介绍怎么刷新ExtJS的Grid表格前面的Ext.grid.RowNumberer行序列号，比如，如果有四行，序号是：1、2、3、4，再不刷新的情况下，如果删除了第3行，那么序号就会变成1、2、4。看下下面的代码，即可实现如下图1所示的刷新序列号的效果。

图1：序列号刷新

   上图1的实现代码如下：

Ext.onReady(function() {
    Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'name', type: 'string'},
         {name: 'email',  type: 'string'},
         {name: 'phone',   type: 'string'}
     ]
    });
    var myStore = Ext.create('Ext.data.Store', {
        model : 'User',
        data : [{
            'name' : 'yedward',
            'email' : 'yed@123.com',
            'phone' : '13234'
        }]
    });
    var myGrid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store : myStore,
    columns: [
        { xtype : 'rownumberer'},
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email' },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    buttons : [{
        text : '新增',
        handler : function () {
            var emptyRow = {
                'name' : '',
                'email' : '',
                'phone' : ''
            };
            myStore.add(emptyRow);
        }
    }, {
        text : '删除',
        handler : function() {
            var selections = myGrid.getSelectionModel().getSelection();
            myStore.remove(selections);
            myGrid.getView().refresh(); // 删除一行记录以后，行序列号重新排序
        }
    }]
    });
}); 

   本例的核心是利用grid.getView().refresh()来刷新视图！

建议继续学习：

1. ExtJS源码研究笔记之总评    (阅读：3073)
2. JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述    (阅读：3066)
3. Ext JS 4 布局和容器：Layouts、Containers    (阅读：2179)