IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

叶德华的博客 2016-02-12 17:44:49 累计浏览 1,840 次
本机暂存

   本文介绍怎么刷新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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 出租车几何学:一个全新的几何世界 (累计阅读 4,519)
  2. ExtJS源码研究笔记之总评 (累计阅读 4,464)
  3. JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述 (累计阅读 4,109)
  4. 终极攻略――未知高度元素垂直居中 (累计阅读 3,705)
  5. 前端代码的阻抗失配 (累计阅读 2,105)
  6. js代码因逗号不规范导致IE不兼容的问题 (累计阅读 1,700)
  7. 多列等高方案 (累计阅读 1,433)
  8. Fixed-Height Cards: More Fragile Than They Look (累计阅读 61)
  9. CSS reading-flow和reading-order属性简介 (累计阅读 47)
  10. The State of CSS Centering in 2026 (累计阅读 50)