extjs grid - jak zrobić szerokość kolumny 100%

Question

Właściwość width ma szerokość w pikselach.

{ 
       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 
      } 

jeśli mam tylko jedną kolumnę Jak mogę szerokość kolumny = 100% lub jeśli mam kilka kolumn - Jak zrobić ostatni odcinek kolumny do końca siatki?

Answer 1

Dla ExtJS3, ustaw forceFit na GridPanels viewConfig. Zobacz: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

Dla ExtJS 4 ustawić forceFit bezpośrednio na GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit i używać go w połączeniu z flex na kolumnach.

Przykład 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'  
    } 
}); 

przykładzie do 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

Dla ExtJS 4 użyć elastycznego zamiast szerokości. Jeśli ustawisz flex: 1 i jest tylko jedna kolumna, zajmie ona 100% szerokości. Jeśli masz dwie kolumny i ustawić flex: 1 na obu, oba będą miały szerokość 50%.

Flex dystrybuuje dostępną szerokość między kolumnami według proporcji. Możesz na przykład powiedzieć flex: 2 dla jednej kolumny i flex: 1 dla dwóch innych kolumn, a wynik będzie taki, że pierwszy będzie dwa razy większy od pozostałych dwóch. Możesz także użyć wartości dziesiętnych dla flexu, np. 0.5

Answer 3

Dodaj flex : 1 do kolumny, którą chcesz rozciągnąć.

Answer 4

zestaw Flex do 1

Column.Flex = 1; 

Answer 5

Zauważ, że jeśli masz jedną kolumnę w sieci istnieje znaczna różnica między używaniem items:[{}] i items:{} notacji.

W rzeczywistości będzie to nie działa zgodnie z oczekiwaniami (przynajmniej w ExtJS 4.2):

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

Jeśli po prostu usunąć nawiasy kwadratowe będzie magicznie zacząć działać zgodnie z oczekiwaniami (czyli trzeba będzie jedną kolumnę rozciąga się, aby wypełnić szerokość siatki).

To prawie doprowadziło mnie do szału ;-P.