Come regolare la larghezza del campo di testo ExtJS in base al suo contenitore

Question

Uso ExtJS versione 4.2.1 e ho un layout di tabella.

 Ext.create('Ext.panel.Panel', { 
      width: 1300, 
      height: 700, 
      title: 'Table Layout', 
      layout: { 
       type: 'table', 
       columns: 3, 
       tdAttrs: 
        { 
         width: 500, 
        } 
      }, 
      items: [ 
       { 
        fieldLabel: 'Text1', 
        xtype: 'textfield', 
       }, 
       { 
        fieldLabel: 'Text2', 
        xtype: 'textfield', 
       }, 
       { 
        fieldLabel: 'Text3', 
        xtype: 'textfield', 
       }, 
       { 
        fieldLabel: 'Text4', 
        xtype: 'textfield', 
       }, 
       { 
        fieldLabel: 'Text5', 
        xtype: 'textfield', 
       }, 
       { 
        fieldLabel: 'Text6', 
        xtype: 'textfield', 
       }], 
      renderTo: Ext.getBody() 
     }); 

e il risultato è: ogni larghezza della colonna è 500px e voglio la larghezza di ogni campo di testo regolare con il suo contenitore. in qualche modo una larghezza automatica, ma non ora.

Answer 1

Add larghezza in percentuale per i campi di testo:

Ext.create('Ext.panel.Panel', { 
    width: 1300, 
    height: 700, 
    title: 'Table Layout', 
    layout: { 
     type: 'table', 
     columns: 3, 
     tdAttrs: { 
      width: 500, 
     } 
    }, 
    defaults: { 
     width: '95%' 
    }, 
    items: [ 
     // ... 
    ], 
    renderTo: Ext.getBody() 
});