Come posso aggiungere numeri di riga a una griglia ExtJS?

Question

In un ExtJS GridPanel, c'è un modo di progettare una colonna il cui unico scopo è quello di agire come una colonna numero di serie? Questa colonna non avrà bisogno di una proprietà dataIndex. In questo momento, sto usando una funzione numberer riga personalizzata, ma questo significa che il numberer riga è definita nel file grid.js e tutte le colonne da grid.ui.js deve essere copiato in grid.js. Sto usando il designer Ext.

EDIT: Il punto cruciale della mia domanda è: C'è un modo per definire una riga numberer utilizzando il progettista Ext?

Answer 1

Tutto ciò che serve è un Ext.grid.RowNumberer nella definizione della colonna.

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

Non una risposta, ma voglio solo condividere questo: -

In cima alla Ext.grid.RowNumberer, si può avere questo piccolo trucco ingegnoso che incrementa i numeri correttamente in base al numero di pagina che si sta visualizzazione se hai implementato PagingToolbar nella tua griglia.

Qui di seguito è il mio esempio di lavoro. Ho esteso l'originale Ext.grid.RowNumberer per evitare conflitti.

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

---

E il codice qui sotto è l'originale renderer da Ext.grid.RowNumberer, che, per me, abbastanza brutto perché i numeri è fissato per tutto il tempo non importa quale numero di pagina che è. Codice

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

Answer 3

ExtJS 4.2.1 lavora sotto:

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

Per la versione 4.2 molto molto facile:

Basta aggiungere una nuova colonna come questo:

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