行番号をExtJSグリッドに追加するにはどうすればよいですか？

Question

ExtJS GridPanelでは、シリアル番号列として機能することを目的とする列を設計する方法はありますか？この列にはdataIndexプロパティは必要ありません。 今、私はカスタム行番号帳関数を使用していますが、これは行numbererが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; 
     } 
    } 
}); 

---

、以下のコード番号は関係なく、それが何であるかをページ番号のすべての時間を固定されていないので、これ、私には、かなり醜い、Ext.grid.RowNumbererから元rendererです。

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

Answer 3

以下のExtJS 4.2.1作業コード：バージョン4.2の場合

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

非常に非常に簡単：これはいいです

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