ExtJS工具栏无法正确呈现

Question

我有一个窗口,我想在顶部添加一个工具栏,以及一个用于在其余区域中加载内容的面板.不幸的是,当我添加内容面板时,工具栏会扩展到不成比例的大小.我试过硬编码大小,但这似乎不起作用.我究竟做错了什么？

在此先感谢您的回复:

  // 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

看来您使用工具栏的方式不正确：

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

祝你好运！