ExtJS怎么刷新Grid表格前面的行序列号

本文介绍怎么刷新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()来刷新视图!

本文标题:ExtJS怎么刷新Grid表格前面的行序列号

本文链接:http://yedward.net/?id=35

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章