problème avec ExtJS mise en page de Vbox nichée dans une mise en page hbox

J'essaie d'obtenir une mise en page pour ressembler à ceci: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png problème avec ExtJS mise en page de Vbox nichée dans une mise en page hbox

J'ai eu toutes sortes de plaisir à essayer d'obtenir ce travail. J'ai finalement obtenu quelque chose qui fonctionne presque, mais seulement parce que j'ai laissé tomber dans le 3.2 beta d'Ext JS.

Il me reste un dernier problème. Le code ci-dessous affichera les panneaux presque correctement, cependant, le panneau de droite ne s'étire pas pour remplir la moitié droite du conteneur. Si j'ajoute une configuration de configuration (montrée dans le code commenté) et supprime l'attribut layout, alors je me retrouve avec les trois panneaux disposés verticalement, plutôt que les deux panneaux hbox étant étirés pour remplir l'espace et la vbox les panneaux étant les uns au-dessus des autres.

J'apprécierais vraiment que quelqu'un passe un oeil sur le code ci-dessous et indique ce qui me manque ou si j'ai rencontré un bogue dans ExtJS 3.2b.

Merci

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>

Source

2010-03-19 Stephen Moretti

Ainsi, après une avance de Jay Garcia, je l'ai résolu ce dans les moments.

je devais mettre ma fenêtre pour être de type de mise en page « ajustement »

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

je besoin d'ajouter l'attribut de mise en page dans la vbox et hbox (anciennement je trouve que l'attribut de mise en page avec l'layoutConfig attribut vissée les choses, afin de les enlevés)

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

ces 2 modifications m'a donné une belle mise en page, exactement comme je le voulais afficher.

Merci Jay (. PS aller acheter le livre de Jay "ExtJS en action";))

Source

2010-03-19 17:51:36

Votre layoutConfig totalement fixe mon échec de l'exécution de la mise en page. Merci :) – Stevko

Dans ExtJS 3.4 il y a une TableLayout: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.layout.TableLayout

Source

2013-08-14 21:10:29 BMF

Bon à savoir. Merci –

J'ai voté par erreur par erreur si vous faites un montage sur ce que je voudrais retourner mon vote vers le bas. –

problème avec ExtJS mise en page de Vbox nichée dans une mise en page hbox

Répondre

Questions connexes