extJs 4 lưới tùy biến - Tổng hàng ở cuối

Question

Tôi muốn có một mạng lưới chỉ có hai cột, một là dành cho tên và một cho tỷ lệ phần trăm. Hàng cuối cùng sẽ có 'Tổng' làm tên và tổng phần trăm là 'phần trăm'. Hàng này chỉ có kiểu dáng khác với các hàng khác. Xin vui lòng hướng dẫn tôi làm thế nào tôi có thể thực hiện điều này. Cảm ơn ..

Answer 1

Có tính năng lưới để thực hiện chính xác điều đó. Nó được bao phủ here trong tài liệu với một số ví dụ về cách sử dụng nó.

Bạn cũng có thể tùy chỉnh kiểu bằng cách cung cấp triển khai của riêng bạn của lớp x-grid-row-summary trong css của bạn.

EDIT

Dưới đây là một số ví dụ về cách thiết lập các bản tóm tắt phong cách hàng, như bạn có thể thấy có một số cách để đi về nó. Nhận ra rằng dòng tóm tắt không thể được tham chiếu cho đến khi sự kiện viewready xảy ra, nó không phải là sẵn sàng tại sự kiện afterrender, vì vậy tôi đặt tất cả các logic này trong một listener viewready:

Ext.create('Ext.grid.Panel', { 
    features: [{ 
     ftype: 'summary' 
    }], 
    // other grid configs ... 
    listeners: { 
     viewready: function(grid) { 

      // get reference to the summary row 
      var summaryRow = grid.view.el.down('tr.x-grid-row-summary'); 

      // this will apply a css class to the row, in this example, 
      // I am applying the extjs grid header style to my summary row 
      summaryRow.addCls('x-grid-header-ct'); 

      // or, to do it all in javascript as you mentioned in the comment 
      // first you would create a style object, I took these style 
      // properties from the .x-grid-header-ct 
      aStyleObject = { 
       cursor: 'default', 
       zoom: 1, 
       padding: 0, 
       border: '1px solid #d0d0d0', 
       'border-bottom-color': '#c5c5c5', 
       'background-image': 'none', 
       'background-color': '#c5c5c5' 
      } 
      // then you pass the style object using setStyle 
      summaryRow.setStyle(aStyleObject); 

      // or you could set the style for each cell individually using 
      // addCls or setStyle: 
      Ext.Array.each(summaryRow.query('td'), function(td) { 
       var cell = Ext.get(td); 
       cell.addCls('some-class'); 
       // or 
       cell.setStyle(anotherStyleObject); 
      }); 
     } 
    } 
}); 

Answer 2

nếu chúng ta có hàng tóm tắt (like this), đơn giản là chúng ta có thể sử dụng CSS trên trang cụ thể.

<style> 
.x-grid-row-summary .x-grid-cell{ 
    background-color: #f00 !important; 
    font-size: x-large !important; 
}