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属性，因为它被放置在布局“合适”的窗口中，因此该窗口将执行所有大小调整（无需在面板上指定）

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

祝你好运！

Answer 2

请注意，Ext.Toolbar设置了默认的 minHeight 值（＆＃34; 2.6em＆＃34;，iirc） - 您可能需要在配置中覆盖它。

Answer 3

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

}, ' ', {

ExtJS工具栏无法正确呈现

3 个答案: