problema con ExtJS layout di VBOX annidato in un layout hbox

Sto cercando di ottenere un layout a guardare come questo: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png problema con ExtJS layout di VBOX annidato in un layout hbox

Ho avuto ogni sorta di divertimento che cercano di ottenere questo lavoro. Alla fine ho ottenuto qualcosa che funziona quasi, ma solo perché sono caduto nella versione 3.2 di Ext JS.

Sono rimasto con un ultimo problema. Il codice sottostante mostrerà i pannelli quasi correttamente, tuttavia, il pannello di destra non si estende per riempire la metà destra del contenitore.

Se aggiungo un layout di configurazione (mostrato nel codice commentato) e rimuovo l'attributo di layout, quindi finisco con tutti e tre i pannelli disposti verticalmente, piuttosto che i due pannelli di hbox che vengono allungati per riempire lo spazio e la vbox pannelli uno sopra l'altro.

Mi piacerebbe davvero che qualcuno passasse un occhio sul codice sottostante e sottolineando cosa mi manca o se ho riscontrato un errore in ExtJS 3.2b.

Grazie

Stephen

<html> 
    <head> 
     <script src="/script/ext/adapter/ext/ext-base-debug.js"></script> 
     <script src="/script/ext/ext-all-debug.js"></script> 
     <script type="text/javascript"> 
     Ext.BLANK_IMAGE_URL = '/script/ext/resources/images/default/s.gif'; 
     </script> 

     <script type="text/javascript"> 
     Ext.onReady(function() { 
      var detailPanel = { 
       id : 'detail-panel', 
       contentEl : 'pageDetail', 
       title : 'Detail Panel' 
      }; 

      var workflowPanel = { 
       id : 'workflowpanel', 
       title : 'Page Status', 
       contentEl : 'pageWorkflow' 
      }; 

      var accessPanel = { 
       id : 'accesspanel', 
       title : 'Page Access', 
       contentEl: 'pageAccess' 
      }; 

      var extraPanel = { 
       title : 'extra panel', 
       layoutConfig : { 
        type : 'vbox', 
        align : 'stretch', 
        pack : 'start' 
       }, 
       defaults : { 
        flex : 1, 
        frame : true 
       }, 
       items : [workflowPanel,accessPanel] 
      }; 

      var overviewPanel = { 
       layout : 'hbox', 
/*    layoutConfig : { 
        type :'hbox', 
        align : 'stretch', 
        pack : 'start' 
       }, 
*/    
       defaults :{ 
        frame : true, 
        flex : 1 
       }, 
       items : [detailPanel,extraPanel] 
      }; 


      vp = new Ext.Viewport({ 
       items : [overviewPanel] , 
       renderTo : Ext.getBody() 
      }); 

     }); 
     </script> 

     <link rel="stylesheet" type="text/css" href="/script/ext/resources/css/ext-all.css" /> 
    </head> 
    <body> 
     <div id="overview" class="x-hidden"> 
      <div id="pageDetail"> 
       <dl> 
        <dt>Page URL</dt> 
        <dd>/contact/</dd> 
        <dt>Navigation Title</dt> 
        <dd>Get in touch...</dd> 
       </dl> 
       <dl> 
         <dt>Associate project to types</dt> 
         <dd>&nbsp;</dd> 

         <dt>Associate projects related to other projects</dt> 
         <dd>&nbsp;</dd> 
       </dl> 
      </div> 
      <div id="pageExtra"> 
       <div id="pageWorkflow"> 
        <em>Current Status</em><br> 
         Live on 08/03/2010 23:23 by username 
        <br/> 
        <em>Workflow</em><br> 
        Some status text 
        <dl> 
         <dt>Last Updated</dt> 
         <dd>07/03/2010 10:10</dd> 
         <dt>Updated by</dt> 
         <dd>username*</dd> 
        </dl> 
        <br/> 
       </div> 
       <div id="pageAccess"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae neque risus, non elementum arcu. Donec et convallis ipsum. Vivamus nec viverra nunc.     
       </div> 
      </div> 
     </div>  
    </body> 
</html>

fonte

2010-03-19 Stephen Moretti

Così, dopo un vantaggio da Jay Garcia Ho risolto questo in pochi istanti.

ho bisogno di impostare la mia finestra per essere di tipo di layout "fit"

vp = new Ext.Viewport({ 
    layout : 'fit', 
    items : [overviewPanel] , 
    renderTo : Ext.getBody() 
});

poi avevo bisogno di aggiungere l'attributo di layout nella vbox e hbox (in precedenza ho trovato che l'attributo di layout con l'layoutConfig attributo type avvitato le cose, in modo da rimuovere)

  var extraPanel = { 
       title : 'extra panel', 
       layout : 'vbox', 
       layoutConfig : { 
        type : 'vbox', 
        align : 'stretch', 
        pack : 'start' 
       }, 
       defaults : { 
        flex : 1, 
        frame : true 
       }, 
       items : [workflowPanel,accessPanel] 
      }; 

      var overviewPanel = { 
       layout : 'hbox', 
       layoutConfig : { 
        type :'hbox', 
        align : 'stretch', 
        pack : 'start' 
       }, 
       defaults :{ 
        frame : true, 
        flex : 1 
       }, 
       items : [detailPanel,extraPanel] 
      };

Quei 2 cambi mi ha dato un layout bella, esattamente come lo volevo da visualizzare.

Grazie Jay (. PS andare a comprare il libro di Jay "ExtJS in azione";))

fonte

2010-03-19 17:51:36

tuo layoutConfig totalmente fisso il mio fallimento run layout. Grazie :) – Stevko

In extjs 3.4 c'è un TableLayout: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.layout.TableLayout

fonte

2013-08-14 21:10:29 BMF

Buono a sapersi. Grazie –

Ho votato questo errore per errore se apportassi qualche modifica su di esso, sarei lieto di annullare il mio voto negativo. –

problema con ExtJS layout di VBOX annidato in un layout hbox

risposta

Problemi correlati