Cosa si intende per proprietà 'flex' di qualsiasi layout ExtJS4?

Question

Ho visto esempi in cui viene specificato un numero contro flex, come dire

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1} 

Ciò che è trasmesso da questa proprietà? La documentazione specificata è un po 'difficile da capire, quindi una spiegazione più semplice sarebbe di grande aiuto!

Answer 1

di evitare di usare la descrizione di documentazione, che lei ha detto di aver trovato un po 'complicato:

Flex viene utilizzato come una proprietà nei layout hbox e VBOX, e indica la quantità di spazio che questo componente occuperà nel suo contenitore genitore.

È possibile utilizzare qualsiasi numero maggiore di zero come valore di proprietà flex: alcune persone preferiscono utilizzare numeri interi per semplicità, altri che ho visto utilizzano valori come 0.25 per rappresentare più facilmente le percentuali.

un esempio di base di flex in azione:

var myPanel = Ext.create('Ext.panel.Panel', { 
    width: 100, 
    height: 100, 
    layout: { 
     type: 'hbox', 
     align: 'stretch' // Stretches child items to the height of this panel. 
    }, 
    items: [{ 
     xtype: 'container', 
     html: 'Container one!', 
     flex: 5 // This takes up 50% of the container. 
    }, { 
     xtype: 'container', 
     html: 'Container two!', 
     flex: 3 // This takes up 30% of the container. 
    }, { 
     xtype: 'container', 
     html: 'Container three!', 
     flex: 2 // This takes up 20% of the container. 
    }] 
}); 

La chiave qui è sapere che non è il valore di ogni flessione che definisce il layout, ma come questi valori tutti in relazione tra loro. Se aggiungessi un altro contenitore con un flex di 10 in questo layout, occuperebbero metà del layout, poiché 10 è la metà di 10 + 5 + 3 + 2 = 20.

Spero che questo aiuti!

Answer 2

E 'utilizzato nel layout VBox e HBOX:

opzione

Questa configurazione è da applicare agli elementi figlio del container gestito da questo layout. Ogni articolo figlio con una proprietà flex verrà flesso orizzontalmente in base al valore relativo del flex di ogni articolo rispetto alla somma di tutti gli articoli con un valore flessibile specificato. Qualsiasi elemento figlio che ha un flex = 0 o flex = indefinito sarà non "flesso" (la dimensione iniziale non verrà modificata).

Vedi http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox ecc

Answer 3

Consente di considerare un esempio di questo, se v'è un contenitore padre con larghezza 100, e avendo elemento di tre bambini con i seguenti configurazioni:

1st Element - width:70 
2nd Element - flex:2 
3rd Element - flex:1 

Così ora, il motore prima allocare 70 alla prima elemento. E poi dividerà la larghezza disponibile rimanente nel rapporto di 2: 1 e assegnerà 20 al secondo e il 10 al terzo elemento.

Così, flex è un modo per specificare le larghezze relative tra gli elementi figlio. Inoltre, solo per aggiungere, l'uso pesante di flex può creare problemi nei layout fluidi dato che il flex agisce generalmente sulla larghezza disponibile rimanente che può essere pari a 0 se la larghezza totale del contenitore viene ridotta e questo può portare alla sovrapposizione dei campi. Example here.