Question

在ExtJS GridPanel中，有没有办法设计一个列，其唯一目的是作为序列号列？此列不需要dataIndex属性。现在，我使用的是自定义行数字函数，但这意味着行数字在grid.js文件中定义，而grid.ui.js中的所有列都需要复制到grid.js中。我正在使用Ext设计师。

编辑：我的问题的关键是：有没有办法使用Ext设计器定义行数量？

Answer 1

您需要的只是列定义中的Ext.grid.RowNumberer。

var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Name", width: 80, sortable: true},
    {header: "Code", width: 50, sortable: true},
    {header: "Description", width: 200, sortable: true}
]);

Answer 2

不是答案，只是想分享一下： -

在Ext.grid.RowNumberer之上，您可以使用这个小巧的黑客，如果您在网格中实现了PagingToolbar，则会根据您正在查看的页码正确增加数字。

以下是我的工作示例。我扩展了原始Ext.grid.RowNumberer以避免冲突。

Kore.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
    renderer: function(v, p, record, rowIndex) {
        if (this.rowspan) {
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        var st = record.store;
        if (st.lastOptions.params && st.lastOptions.params.start != undefined && st.lastOptions.params.limit != undefined) {
            var page = Math.floor(st.lastOptions.params.start/st.lastOptions.params.limit);
            var limit = st.lastOptions.params.limit;
            return limit*page + rowIndex+1;
        }else{
            return rowIndex+1;
        }
    }
});

以下代码是来自renderer的原始Ext.grid.RowNumberer，对我来说，这非常难看，因为无论页码是什么，数字都会一直固定。

renderer : function(v, p, record, rowIndex){
    if(this.rowspan){
        p.cellAttr = 'rowspan="'+this.rowspan+'"';
    }
    return rowIndex+1;
}

Answer 3

下面的ExtJS 4.2.1工作代码：

// Row numberer correct increasing
Ext.override(Ext.grid.RowNumberer, {
    renderer: function(v, p, record, rowIndex) {
        if (this.rowspan) {
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        var st = record.store;

        if (st.lastOptions.page != undefined && st.lastOptions.start != undefined && st.lastOptions.limit != undefined) {
            var page = st.lastOptions.page - 1;
            var limit = st.lastOptions.limit;
            return limit*page + rowIndex+1;
        } else {
            return rowIndex+1;
        }
    }
});

Answer 4

4.2版非常容易：

只需添加一个新列：

{
    xtype: 'rownumberer',
    width: 40,
    sortable: false,
    locked: true
}

如何将行号添加到ExtJS网格？

4 个答案: