cuadrícula extjs - cómo hacer ancho de columna 100%

Question

La propiedad width tiene un ancho de píxel.

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

si tengo sólo una columna cómo puedo hacer ancho de columna = 100% o si tengo varias columnas - Cómo hacer último tramo columna hasta el final de la rejilla?

Answer 1

Para ExtJS3, establezca forceFit en los GridPanels viewConfig. Ver: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

Para ExtJS 4 establece forceFit directamente en la GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit y usarlo en conjunción con flex en sus columnas.

Ejemplo para 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'  
    } 
}); 

Ejemplo para 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

Para ExtJS 4, el uso de la flexión en lugar de anchura. Si establece flex: 1 y solo hay una columna, tomará un ancho del 100%. Si tiene dos columnas y establece flex: 1 en ambas, ambas tendrán 50% de ancho.

Flex distribuye el ancho disponible entre las columnas por relación. Por ejemplo, puede decir flex: 2 para una columna y flex: 1 para otras dos columnas y el resultado sería que la primera sería el doble del ancho de las otras dos. También puede usar valores decimales para flexión, p. 0.5

Answer 3

Agregue flex : 1 a la columna que desea estirar.

Answer 4

conjunto Flex a 1

Column.Flex = 1; 

Answer 5

Tenga en cuenta que si usted tiene una sola columna de la rejilla hay una diferencia significativa entre el uso de items:[{}] y items:{} notación.

De hecho, esto no funcionará como se espera (al menos en ExtJS 4.2):

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

Si usted acaba de quitar los corchetes que mágicamente comenzará a funcionar como se espera (es decir, que tendrá una sola columna se extiende para llenar el ancho de la rejilla).

Esto casi me vuelve loco ;-P.