¿Cómo puedo agregar números de fila a una grilla ExtJS?

Question

En un ExtJS GridPanel, ¿hay alguna manera de diseñar una columna cuyo único propósito sea actuar como una columna de número de serie? Esta columna no necesitará una propiedad dataIndex. En este momento, estoy usando una función personalizada de numerador de fila, pero esto significa que el numbeador de fila se define en el archivo grid.js y todas las columnas de grid.ui.js deben copiarse en grid.js. Estoy usando el diseñador de Ext.

EDITAR: El quid de la cuestión es: ¿hay alguna manera de definir un numberer de fila usando el diseñador Ext?

Answer 1

Todo lo que necesita es un Ext.grid.RowNumberer en la definición de su columna.

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

No

una respuesta, sino que sólo quiere compartir esto: -

En la parte superior de la Ext.grid.RowNumberer, puede hacer que este pequeño truco ingenioso que incrementa sus números correctamente de acuerdo con el número de página que son ver si ha implementado PagingToolbar en su grilla.

A continuación se muestra mi ejemplo de trabajo. Extendí el Ext.grid.RowNumberer original para evitar conflictos.

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

---

Y el código de abajo es el original de rendererExt.grid.RowNumberer, que, para mí, bastante fea porque los números se fija todo el tiempo, no importa lo que el número de página que es. código

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

Answer 3

ExtJS 4.2.1 de trabajo a continuación:

// 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

Para la versión 4.2 muy muy fácil:

Sólo añadir una nueva columna de la siguiente manera:

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