lưới extjs - cách làm cho chiều rộng cột 100%

Question

Thuộc tính width là chiều rộng pixel.

{ 
       xtype: 'grid', 
       store: store, 
       selModel: Ext.create('Ext.selection.CheckboxModel', { 
        mode: 'SINGLE' 
       }), 
       layout: 'fit', 
       columns: [ 
        { 
         text: "pum", 
         dataIndex: 'SRD_NAME_FL', 
         width: 400 
        } 
       ], 
       columnLines: true 
      } 

nếu tôi chỉ có một cột làm thế nào tôi có thể làm cho độ rộng cột = 100% hoặc nếu tôi có nhiều cột - làm thế nào để làm cho căng cột cuối cùng để kết thúc của lưới?

Answer 1

Đối với ExtJS3, đặt forceFit trên GridPanels viewConfig. Xem: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

Đối ExtJS 4 thiết forceFit trực tiếp trên GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit và sử dụng nó kết hợp với flex trên các cột của bạn.

Ví dụ cho v4

var p = Ext.Create('Ext.grid.Panel',{ 
    forceFit: true, 
    columns: [{ 
     xtype: 'gridcolumn', 
     header: _ll.id, 
     sortable: true, 
     resizable: false, 
     flex: 0, //Will not be resized 
     width: 60, 
     dataIndex: 'Id' 
    }, { 
     xtype: 'gridcolumn', 
     header: __ll.num, 
     sortable: true, 
     resizable: true, 
     flex: 1, 
     width: 100, 
     dataIndex: 'number'  
    } 
}); 

Ví dụ cho v3

var p = new Ext.grid.GridPanel({ 
    viewConfig: { 
      forceFit: true 
    }, 
    columns: [{ 
     xtype: 'gridcolumn', 
     header: _ll.id, 
     sortable: true, 
     resizable: false, 
     fixed: true, //Will not be resized 
     width: 60, 
     dataIndex: 'Id' 
    }, { 
     xtype: 'gridcolumn', 
     header: __ll.num, 
     sortable: true, 
     resizable: true, 
     width: 100, 
     dataIndex: 'number'  
    } 
}); 

Answer 2

Đối ExtJS 4, sử dụng flex thay vì chiều rộng. Nếu bạn đặt flex: 1 và chỉ có một cột, nó sẽ có chiều rộng 100%. Nếu bạn có hai cột và đặt flex: 1 trên cả hai cột, cả hai sẽ có chiều rộng 50%.

Flex phân phối chiều rộng có sẵn giữa các cột theo tỷ lệ. Ví dụ, bạn có thể nói flex: 2 cho một cột và flex: 1 cho hai cột khác và kết quả sẽ là cột đầu tiên sẽ gấp đôi chiều rộng của hai cột kia. Bạn cũng có thể sử dụng giá trị thập phân cho flex ví dụ: 0.5

Answer 3

Thêm flex : 1 vào cột bạn muốn kéo dài.

Answer 4

bộ Flex để 1

Column.Flex = 1; 

Answer 5

Chú ý rằng nếu bạn có một cột duy nhất trong mạng lưới của bạn có sự khác biệt đáng kể giữa việc sử dụng items:[{}] và items:{} ký hiệu.

Trong thực tế này sẽ không hoạt động như mong đợi (ít nhất là trong ExtJS 4.2):

Ext.define('My.SingleColumnGrid', { 
    extend: 'Ext.grid.Panel', 
    store: {type: 'someStore'}, 
    forceFit: true, 
    columns: { 
     items: [ 
      { 
       text: 'Something', 
       flex: 1, 
       dataIndex: 'something' 
      } 
     ] 
    } 
}); 

Nếu bạn chỉ cần loại bỏ dấu ngoặc vuông nó kỳ diệu sẽ bắt đầu làm việc như mong đợi (tức là bạn sẽ có một cột duy nhất mở rộng để lấp đầy chiều rộng lưới).

Điều này gần như khiến tôi phát điên ;-P.