Làm cách nào để thêm số hàng vào lưới ExtJS?

Question

Trong một ExtJS GridPanel, có cách nào để thiết kế một cột có mục đích duy nhất là hoạt động như một cột số sê-ri không? Cột này sẽ không cần thuộc tính dataIndex. Ngay bây giờ, tôi đang sử dụng một hàm số của hàng tùy chỉnh, nhưng điều này có nghĩa là trình đánh số hàng được định nghĩa trong tệp grid.js và tất cả các cột từ grid.ui.js cần phải được sao chép vào grid.js. Tôi đang sử dụng trình thiết kế Ext.

EDIT: Điểm mấu chốt trong câu hỏi của tôi là: Có cách nào để xác định trình đánh số hàng bằng cách sử dụng trình thiết kế Ext không?

Answer 1

Tất cả những gì bạn cần là Ext.grid.RowNumberer trong định nghĩa cột của mình.

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

Không phải là câu trả lời, nhưng chỉ muốn chia sẻ điều này: -

Ngày đầu của Ext.grid.RowNumberer, bạn có thể có hack này tiện lợi nhỏ mà sẽ increments số của bạn một cách chính xác theo số trang mà bạn đang xem nếu bạn đã triển khai PagingToolbar trong lưới của mình.

Dưới đây là ví dụ làm việc của tôi. Tôi đã mở rộng Ext.grid.RowNumberer gốc để tránh xung đột.

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

---

Và mã dưới đây là bản gốc renderer từ Ext.grid.RowNumberer, trong đó, đối với tôi, khá xấu xí vì những con số là cố định tất cả các thời gian không có vấn đề gì ở trang số nó được. đang

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

Answer 3

ExtJS 4.2.1 làm việc dưới đây:

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

Đối với phiên bản 4.2 rất rất dễ dàng:

Chỉ cần thêm một cột mới như thế này:

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