ExtJS 工具栏未正确呈现答案

【问题标题】：ExtJS toolbar not rendering correctlyExtJS 工具栏未正确呈现
【发布时间】：2011-07-18 04:54:57
【问题描述】：

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

提前感谢您的回复：

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

  })

【问题讨论】：

标签： javascript-framework extjs

【解决方案1】：

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

}, ' ', {

【讨论】：

【解决方案2】：

请注意，Ext.Toolbar 有一个默认的 minHeight 值集（“2.6em”，iirc）——您可能需要在配置中覆盖它。

【讨论】：

【解决方案3】：

您似乎不正确地使用工具栏：

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

祝你好运！

【讨论】：