Как добавить номера строк в сетку ExtJS? - PullRequest
Новая
       24

Как добавить номера строк в сетку ExtJS?

8 голосов
/ 29 марта 2011

В ExtJS GridPanel, есть ли способ спроектировать столбец, единственная цель которого - выступать в качестве столбца с серийным номером? Для этого столбца не требуется свойство dataIndex. Сейчас я использую пользовательскую функцию нумерации строк, но это означает, что нумерация строк определена в файле grid.js, и все столбцы из grid.ui.js необходимо скопировать в grid.js. Я использую Ext дизайнер.

РЕДАКТИРОВАТЬ: Суть моего вопроса: есть ли способ определить номер строки с помощью дизайнера Ext?

Ответы [ 4 ]

16 голосов
/ 29 марта 2011

Все, что вам нужно, это 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}
]);
7 голосов
/ 29 марта 2011

Не ответ, но просто хочу поделиться этим: -

Помимо 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;
}
0 голосов
/ 01 августа 2014

Для версии 4.2 очень и очень просто:

Просто добавьте новый столбец следующим образом: 

{
    xtype: 'rownumberer',
    width: 40,
    sortable: false,
    locked: true
}
0 голосов
/ 10 сентября 2013

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;
        }
    }
});
...