表格删除某行后行号不连续问题解决办法

ExtJS自带表格组件中的行号，  new Ext.create('Ext.grid.RowNumberer',{'text':'行号',flex:1}),

var tagGrid=Ext.create('Ext.grid.Panel',{
    	hidden:true,
		store:tagStore,
	    viewConfig:{
	       columnsText: '列',
           sortAscText: '升序',
           sortDescText: '降序'
	    },
	    columns:[
	     new Ext.create('Ext.grid.RowNumberer',{'text':'行号',flex:1}),
	    {header:'标签时间',dataIndex:'time',flex:3},
	    {header:'标签内容',dataIndex:'tag',flex:5},
	    {header:'标签对应起始页',dataIndex:'page',flex:2},
	    { flex:1,
	    	xtype:'actioncolumn',
				align:'center',
				items:[{
					text:'edit',
					icon:'image/bianji.jpg',
					handler: function(grid,rowIndex,colIndex,item,e){
					     grid.getStore().removeAt(rowIndex);
					     grid.view.refresh();
					}	
		       }]
	    }]
	});

在删除某一行或某几行后，行号会变得不连续。因为源码中的函数如下：

renderer: function(value, metaData, record, rowIdx, colIdx, store) {
         if (this.rowspan){
             metaData.cellAttr = 'rowspan="'+this.rowspan+'"';
         }
 
         metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
         return store.indexOfTotal(record) + 1;
     }

返回值是  store.indexOfTotal(record) + 1;  所以即使删除了这一行，它的行号还是这条数据在整个store中的位置。

可以把这个返回值改成  return rowIdx + 1;

这样在删除某一行的代码后面添加一句刷新的代码就行了，如：

                        xtype:'actioncolumn',
				align:'center',
				items:[{
					text:'edit',
					icon:'image/bianji.jpg',
					handler: function(grid,rowIndex,colIndex,item,e){
					     grid.getStore().removeAt(rowIndex);
					     grid.view.refresh();
					}	
		                 }]