La barra de herramientas ExtJS no se representa correctamente

Question

Tengo una ventana donde me gustaría agregar una barra de herramientas en la parte superior, y un panel para cargar contenido en el área restante. Desafortunadamente, la barra de herramientas se expande a un tamaño desproporcionado cuando agrego el panel de contenido. He intentado codificar el tamaño, pero parece que no funciona. ¿Qué estoy haciendo mal?

Gracias de antemano por las respuestas:

// Main application entry point 
    Ext.onReady(function() { 
    var loginWin; 
    var mainWin; 
    var content; 

    var form = new Ext.form.FormPanel({ 
     baseCls: 'x-plain', 
     labelWidth: 70, 
     //url:'', 
     defaultType: 'textfield', 

     items: [{ 
      fieldLabel: ' User Name', 
      name: 'username', 
      anchor:'100%' // anchor width by percentage 
     },{ 
     inputType: 'password', 
     fieldLabel: ' Password', 
      name: 'password', 
      anchor: '100%' // anchor width by percentage 
     }] 
    }); 

    content = new Ext.Panel({ 
     baseCls: 'x-plain', 
     layout:'fit', 
     anchor:'90%', 
     height: 500, 
     items: [ 
      { 
       title: 'blah', 
       html: '<div>hello</div>' 
      } 
     ]  
    }); 

    var tb = new Ext.Toolbar({ 
     height: 100, 
     //renderTo: mainWin 
    }); 
    tb.render('toolbar'); 

    var toolbarPanel = new Ext.Panel({ 
     layout:'fit', 
     anchor:'10%', 
     width:100, 
     items: tb 
    }); 

    var menu = new Ext.menu.Menu({ 
     id: 'mainMenu', 
     style: { 
      overflow: 'visible'  // For the Combo popup 
     }, 
     items: [ 
      { text: 'blah' 
      }, 
      { text: 'blah2' 
      } 
     ] 
    }); 

    tb.add(
     { 
      text: 'Classes', 
      iconCls: 'bmenu', 
      handler: function(){ alert('blah'); } 
     }, 
     { 
      text: 'GPA', 
      iconCls: 'bmenu', 
      handler: function(){ alert('blah'); } 
     }, 
     { 
      text: 'Semester Schedule', 
      iconCls: 'bmenu', 
      handler: function(){ 
      } 
     }, 
     { 
      text: 'Help', 
      iconCls: 'bmenu', // <-- icon 
      handler: function(){ alert('blah'); } 
     } 
    ); 
    tb.doLayout(); 

    if(!mainWin){ 
     mainWin = new Ext.Window({ 
      applyTo:'main-win', 
      resizable: false, 
      modal: true, 
      layout:'fit', 
      width:'80%', 
      height:'100%', 
      y: 0, 
      closeAction:'hide', 
      plain: true, 
      items: [ toolbarPanel, content ] 
     }); 
    } 

    if(!loginWin){ 
     loginWin = new Ext.Window({ 
      applyTo:'hello-win', 
      closable:false, 
      layout:'fit', 
      width:300, 
      height:130, 
      closeAction:'hide', 
      plain: true, 

      items: form, 

      buttons: [{ 
       text:'Login', 
        handler: function(){ 
       loginWin.hide(); 
         mainWin.show(); 
      } 
      },{ 
       text: 'Close', 
       handler: function(){ 
       loginWin.hide(); 
      } 
       }] 
     }); 
     loginWin.show(this); 
    } 

    }) 

Answer 1

Parece que está trabajando con la barra de herramientas de forma inadecuada:

var toolbarPanel = new Ext.Panel({ 
    layout:'fit', 
    anchor:'10%', 
    width:100, 
    items: tb 
}); 

Aquí le está diciendo a este panel, "Tome su un artículo, y que sea lo grande como yo ". Eso es lo que hace el "ajuste" de diseño. Así que, naturalmente, tomará la barra de herramientas que le proporcione en el items y la expandirá tan grande como el panel.

Ext.Panel objetos tienen una propiedad de configuración tbar que está diseñada para contener su barra de herramientas. No necesita un panel para una barra de herramientas y otro panel para su contenido. En su lugar, agregue la barra de herramientas a su panel de contenido. Además, no se preocupe por mostrar la barra de herramientas explícitamente, o agregar elementos después del hecho. Es mejor y más clara para escribir los objetos entre sí, donde serán inicializados (si esto es posible)

Así es como yo recomendaría la creación de su panel de contenido:

content = new Ext.Panel({ 
    baseCls: 'x-plain', 
    layout:'fit', 
    tbar: [ 
    { 
     text: 'Classes', 
     iconCls: 'bmenu', 
     handler: function(){ alert('blah'); } 
    }, 
    { 
     text: 'GPA', 
     iconCls: 'bmenu', 
     handler: function(){ alert('blah'); } 
    }, 
    { 
     text: 'Semester Schedule', 
     iconCls: 'bmenu', 
     handler: function(){ 
     } 
    }, 
    { 
     text: 'Help', 
     iconCls: 'bmenu', // <-- icon 
     handler: function(){ alert('blah'); } 
    }], 
    items: [ 
     { 
      title: 'blah', 
      html: '<div>hello</div>' 
     } 
    ]  
}); 

Nótese también que Saqué el atributo height de su panel, ya que se coloca en una ventana con "ajuste" de diseño, por lo que esa ventana hará todo el tamaño (no es necesario especificarlo en el panel).

mainWin = new Ext.Window({ 
     applyTo:'main-win', 
     resizable: false, 
     modal: true, 
     layout:'fit', 
     width:'80%', 
     height:'100%', 
     y: 0, 
     closeAction:'hide', 
     plain: true, 
     items: [ content ] 
    }); 

¡Buena suerte!

Answer 2

Tenga en cuenta que Ext.Toolbar tiene un valor predeterminado minHeight conjunto de valores ("2.6em", iirc) - puede que tenga que anular esto en su configuración.

Answer 3

Este no es su problema, pero tuve un problema con el código ExtJS minimizado. El tbar tenía un espaciador entre los elementos, aunque la barra de herramientas no modificada se procesara correctamente. Creo que Sencha tiene una función dedicada para esto, pero lo solucionó.

}, ' ', {