ExtJS工具栏没有正确渲染

问题描述：

我有一个窗口，我想在顶部添加一个工具栏，还有一个用于在其余区域加载内容的面板。不幸的是，当我添加内容面板时，工具栏会扩大到不成比例的大小。我试过硬编码的大小，但似乎并不奏效。我究竟做错了什么？ExtJS工具栏没有正确渲染

预先感谢答复：

// 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); 
    } 

    })

答

看来你是使用工具栏工作不正常：

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

在这里，你告诉这个面板中，“把你的一个项目，并使其作为像我一样大“。这就是“合适”的布局。所以很自然地，它将需要您在items中给它的工具栏，并将其扩大到与面板一样大。

Ext.Panel对象有一个tbar配置属性，旨在保存您的工具栏。您不需要工具栏的面板和另一个面板来显示您的内容。相反，将工具栏添加到您的内容面板。另外，不要担心显式渲染工具栏或在事实之后添加项目。这是更好，更清晰的对象一起写在那里他们将进行初始化（如果可能的话）

这里是我会建议创建内容面板：

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

还请注意，我拿出你的面板的height属性，因为它被放在一个布局为“fit”的窗口中，所以窗口将完成所有的尺寸（不需要在面板本身上指定）。

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

祝你好运！

工作就像一个魅力，并感谢您的解释！ – maximus 2011-03-18 17:00:13

答

请注意，Ext.Toolbar具有默认值minHeight value set（“2.6em”，iirc） - 您可能必须在配置中覆盖此值。

答

这不是你的问题，但我有一个缩小的ExtJS代码不渲染的问题。 tbar在项目之间有一个间隔，即使未改变的工具栏正确显示。我认为Sencha有一个专门的功能，但它修复了它。

}, ' ', {

ExtJS工具栏没有正确渲染

相关推荐