13.05.2012, 00:34
|
 |
Соединяю Node.js и Ext JS
|
|
Регистрация: 25.06.2009
Сообщений: 1,033
|
|
|
В 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
|
|
13.05.2012, 00:36
|
|
Соединяю Node.js и Ext JS
|
|
Регистрация: 25.06.2009
Сообщений: 1,033
|
|
|
Из-за этой проблемы не удается выровнять табы в ribbon-компоненте, который я пытаюсь собрать. Пытался внутрь buttongroup ставить panel, то тоже начинаются проблемы с размерами buttongroup (ведут себя непредсказуемо и содержимое пропадает).
|
|
13.05.2012, 09:50
|
|
С++/C# modest developer
|
|
Регистрация: 07.11.2011
Сообщений: 244
|
|
|
Сообщение от khusamov
|
Почему в компоненте xtype: 'buttongroup' нельзя одновременно использовать опции: {height: 300, layout: "vbox"}?
То есть, когда я задаю эти опции, то размеры buttongroup меняются непредсказуемо, содержимое исчезает или коверкается, а рядом стоящие buttongroup могут пропадать.
|
Посмотрел, по-моему работает очень даже предсказуемо, layout: "vbox" задает вертикальное позиционирование, а height: 300 фиксированную высоту. Не заметил чтобы что-то "коверкалось".
В примере columns: 3, указано, у вас вообще не указано, поэтому когда вы убирайте высоту, кнопки скрываются. |
|
13.05.2012, 17:41
|
|
Соединяю Node.js и Ext JS
|
|
Регистрация: 25.06.2009
Сообщений: 1,033
|
|
|
Цитата:
|
|
В примере columns: 3, указано, у вас вообще не указано
|
Ну так правильно, зачем выставлять колонки если я выставил layout: "vbox"?
|
Цитата:
|
|
по-моему работает очень даже предсказуемо
|
Сегодня тогда сюда скину полный пример, который у меня работает с ошибками. Может тогда будет видно где я допустил ошибку. |
|
13.05.2012, 22:05
|
|
Соединяю Node.js и Ext JS
|
|
Регистрация: 25.06.2009
Сообщений: 1,033
|
|
Вот, сформировал полностью. Если 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>
|
|
14.05.2012, 17:32
|
|
Соединяю Node.js и Ext JS
|
|
Регистрация: 25.06.2009
Сообщений: 1,033
|
|
|
Техподдержка отписала, что это баг и его исправляют:
A bug in Ext JS 4.1. The fix is already in progress...
|
|
|
|
