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

    })

來源

2011-03-18 maximus

看來你是使用工具欄工作不正常：

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

祝你好運！

來源

2011-03-18 14:47:57

工作就像一個魅力，並感謝您的解釋！ – maximus 2011-03-18 17:00:13

請注意，Ext.Toolbar具有默認值minHeight value set（「2.6em」，iirc） - 您可能必須在配置中覆蓋此值。

來源

2013-01-28 19:21:49 btk

這不是你的問題，但我有一個縮小的ExtJS代碼不渲染的問題。 tbar在項目之間有一個間隔，即使未改變的工具欄正確顯示。我認爲Sencha有一個專門的功能，但它修復了它。

}, ' ', {

來源

2014-04-17 03:07:01 MacGyver

ExtJS工具欄沒有正確渲染

回答

相關問題