Панель инструментов 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
});

Здесь вы говорите этой панели: «Возьми свой один предмет и сделай его таким же большим, как я».Это то, что делает макет "fit".Естественно, он возьмет панель инструментов, которую вы дадите ей в 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 ]
    });

Удачи!

Answer 2

Это не ваша проблема, но у меня была проблема с уменьшенным кодом ExtJS, который не рендерился.У tbar была дистанция между элементами, даже если незавершенная панель инструментов отображалась правильно.Я думаю, что у Сенчи есть специальная функция для этого, но она исправила это.

}, ' ', {

Answer 3

Обратите внимание, что для Ext.Toolbar по умолчанию установлено значение minHeight ("2.6em", iirc) - возможно, вам придется изменить это в своей конфигурации.