1. Zuhause
  2. Frage und Antwort
  3. Problem mit ExtJS vbox Layout in einem hbox Layout verschachtelt

Problem mit ExtJS vbox Layout in einem hbox Layout verschachtelt

2010-03-19 6 views
9

Ich versuche, ein Layout zu erhalten wie folgt aussehen: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.pngProblem mit ExtJS vbox Layout in einem hbox Layout verschachtelt

ich jede Menge Spaß gehabt haben versucht, diese Funktion zu erhalten. Ich habe endlich etwas, das fast funktioniert, aber nur, weil ich in der 3.2 Beta von Ext JS aufgehört habe.

Ich bin mit einem letzten Problem übrig. Der folgende Code zeigt die Panels fast korrekt an, das rechte Panel dehnt sich jedoch nicht aus, um die rechte Hälfte des Containers zu füllen.

Wenn ich eine Layout-Konfiguration hinzufüge (im Code auskommentiert) und das Layout-Attribut entferne, dann habe ich alle drei Bereiche vertikal angeordnet, anstatt die beiden hbox-Bereiche zu vergrößern, um den Platz und die vbox zu füllen Platten übereinander.

Ich würde es wirklich schätzen, wenn jemand den folgenden Code überblickt und darauf hinweist, was ich vermisse oder ob ein Fehler in ExtJS 3.2b aufgetreten ist.

Dank

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>

Quelle

2010-03-19 Stephen Moretti

Antwort

7

So, nach einer Führung von Jay Garcia Ich habe dies in Momenten festgelegt.

ich meine Ansichtsfenster zu setzen brauchte ich benötigen, um das Layout Attribut in die vbox und die hbox zu sein von Layout-Typ „fit“

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

dann hinzuzufügen (vorher fand ich, dass das Layout Attribut mit dem layoutConfig type-Attribut geschraubt Dinge, sie so entfernt)

  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] 
      };

diese zwei Änderungen gab mir ein schönes Layout, genau so, wie ich es wollte angezeigt werden soll.

Dank Jay (. PS gehen Jay Buch "ExtJS in Aktion" kaufen;))

Quelle

2010-03-19 17:51:36

+0

Ihre layoutConfig total fixiert mein Layout Laufversagen. Danke :) – Stevko

Verwandte Themen

 Verwandte Themen