Есть viewport, west регион которого отдан под меню. Регион имеет layout: 'accordion'. Items этого аккордиона - меню (xtype: 'menu'). Проблема в том, что кнопки этого меню ни в какую не хотят полностью по горизонтали заполнять пространство левой панели (картинка прилагается). Более того, хочется, чтобы кнопка занимала все пространство при любых изменениях ширины west панели. Что посоветуете?
Код:
Ext.onReady(function(){
var sysTabs = Ext.create('Ext.panel.Panel',{
id: 'sysTabs',
region: 'center',
margins:'3 3 3 0',
enableTabScroll:true,
activeTab: 0,
defaults:{autoScroll:true}
});
var nav = Ext.create('Ext.panel.Panel',{
iconCls: 'icon-plugin',
layout:'accordion',
title: 'Меню',
region: 'west',
width: 200,
collapsible: true,
split:true,
margins:'3 0 3 3',
cmargins:'3 3 3 3',
items: [{
title: "Пункт меню 1",
xtype: "menu",
plain: true,
floating: false,
items: [
{
text: "Пункт меню 1.1",
iconCls: "icon-application_osx_terminal",
handler: function() {
alert('Тут написано: Пункт меню 1.1 \nГото урл: /test/');
}
},
{
text: "Пункт меню 1.2",
iconCls: "icon-xhtml_valid",
handler: function() {
alert('Тут написано: Пункт меню 1.2 \nГото урл: /test/');
}
},
{
text: "Пункт меню 1.3",
iconCls: "icon-xhtml_valid",
handler: function() {
alert('Тут написано: Пункт меню 1.3 \nГото урл: /test/');
}
}]
},{
title: "Пункт меню 2",
xtype: "menu",
plain: true,
floating: false,
items: [
{
text: "Пункт меню 2.1",
iconCls: "icon-xhtml_valid",
handler: function() {
alert('Тут написано: Пункт меню 2.1 \nГото урл: /test/');
}
},
{
text: "Пункт меню 2.2",
iconCls: "icon-xhtml_valid",
handler: function() {
alert('Тут написано: Пункт меню 2.2 \nГото урл: /test/');
}
}]
}]
});
var topPanel = Ext.create('Ext.panel.Panel',{
height: 30,
region: 'north',
border: false,
layout: 'hbox',
layoutConfig: {
align : 'middle',
pack: 'end'
}
});
var viewport = Ext.create('Ext.container.Viewport',{
layout: 'border',
items: [topPanel, nav, sysTabs]
});
});