Javascript-форум - В buttongroup не работают одновременно height и layout: vbox

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - В buttongroup не работают одновременно height и layout: vbox (https://javascript.ru/forum/extjs/28254-v-buttongroup-ne-rabotayut-odnovremenno-height-i-layout-vbox.html)

В buttongroup не работают одновременно height и layout: vbox

Почему в компоненте xtype: 'buttongroup' нельзя одновременно использовать опции: {height: 300, layout: "vbox"}?

То есть, когда я задаю эти опции, то размеры buttongroup меняются непредсказуемо, содержимое исчезает или коверкается, а рядом стоящие buttongroup могут пропадать.

Вот пример:

Ext.create('Ext.panel.Panel', {
    title: 'Panel with ButtonGroup',
    width: 300,
    height:600,
    renderTo: document.body,
    bodyPadding: 10,
    html: 'HTML Panel Content',
    tbar: [{
        xtype: 'buttongroup',
        height: 300,
        layout: "vbox",
        title: 'Clipboard',
        items: [{
            text: 'Paste',
            scale: 'large',
            rowspan: 3,
            iconCls: 'add',
            iconAlign: 'top',
            cls: 'btn-as-arrow'
        },{
            xtype:'splitbutton',
            text: 'Menu Button',
            scale: 'large',
            rowspan: 3,
            iconCls: 'add',
            iconAlign: 'top',
            arrowAlign:'bottom',
            menu: [{ text: 'Menu Item 1' }]
        },{
            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
        },{
            text: 'Copy', iconCls: 'add16'
        },{
            text: 'Format', iconCls: 'add16'
        }]
    }]
});

Исходный рабочий пример находится тут:
http://docs.sencha.com/ext-js/4-1/#!...er.ButtonGroup

Из-за этой проблемы не удается выровнять табы в ribbon-компоненте, который я пытаюсь собрать. Пытался внутрь buttongroup ставить panel, то тоже начинаются проблемы с размерами buttongroup (ведут себя непредсказуемо и содержимое пропадает).

Цитата:

Сообщение от khusamov

Почему в компоненте xtype: 'buttongroup' нельзя одновременно использовать опции: {height: 300, layout: "vbox"}?
То есть, когда я задаю эти опции, то размеры buttongroup меняются непредсказуемо, содержимое исчезает или коверкается, а рядом стоящие buttongroup могут пропадать.

Посмотрел, по-моему работает очень даже предсказуемо, layout: "vbox" задает вертикальное позиционирование, а height: 300 фиксированную высоту. Не заметил чтобы что-то "коверкалось".
В примере columns: 3, указано, у вас вообще не указано, поэтому когда вы убирайте высоту, кнопки скрываются.

Цитата:

В примере columns: 3, указано, у вас вообще не указано

Ну так правильно, зачем выставлять колонки если я выставил layout: "vbox"?

Цитата:

по-моему работает очень даже предсказуемо

Сегодня тогда сюда скину полный пример, который у меня работает с ошибками. Может тогда будет видно где я допустил ошибку.

Вот, сформировал полностью. Если height: 300 убрать, то без ошибок.

Если высоту оставить, то получается ошибка.
См. скриншот: http://shot.qip.ru/008xDs-2Fspxf9iW/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Проблемы с ButtonGroup</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
		<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all-debug.js" type="text/javascript"></script>
		
		<script type="text/javascript">
		
			Ext.Loader.setConfig({ enabled: true });
			
			Ext.onReady(function() {
			
				Ext.create('Ext.panel.Panel', {
				    title: 'Panel with ButtonGroup',
				    width: 300,
				    height:600,
				    renderTo: Ext.getBody(),
				    bodyPadding: 10,
				    html: 'HTML Panel Content',
				    tbar: [{
				        xtype: 'buttongroup',
				        height: 300,
				        layout: "vbox",
				        title: 'Clipboard',
				        items: [{
				            text: 'Paste',
				            scale: 'large',
				            rowspan: 3,
				            iconCls: 'add',
				            iconAlign: 'top',
				            cls: 'btn-as-arrow'
				        },{
				            xtype:'splitbutton',
				            text: 'Menu Button',
				            scale: 'large',
				            rowspan: 3,
				            iconCls: 'add',
				            iconAlign: 'top',
				            arrowAlign:'bottom',
				            menu: [{ text: 'Menu Item 1' }]
				        },{
				            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
				        },{
				            text: 'Copy', iconCls: 'add16'
				        },{
				            text: 'Format', iconCls: 'add16'
				        }]
				    }]
				});
			
			});

		</script>
		
	</head>
	
	<body></body>

</html>

О, кажется нашел проблему.
Если задавать путь:
http://docs.sencha.com/ext-js/4-1/extjs...
то ошибка есть.

Но если задать путь
http://docs.sencha.com/ext-js/4-0/extjs...
То ошибка пропадает!!!

То есть эта ошибка появилась в Ext версии 4.1
вот незадача, однако...

Техподдержка отписала, что это баг и его исправляют:

A bug in Ext JS 4.1. The fix is already in progress...