PDA

View Full Version : [CLOSED] enableOverFlow in Toolbar doesn't work propertly



bts
4 Nov 2011, 11:26 AM
Hello everyone, i have an issue in Ext Designer 1.2 when trying to enable the property "enableOverFlow" from a Toolbar using Button Groups on it, but when i resize the browser the arrow that have to appear for the overflow functionality didn't appear.

I include the images of an interface that i made in Ext Designer 1.2 using a Viewport with a border layout and subpanels to create some kind of control panel.



29036

29037





If any had any solution for this problem or doubt, please post it here.

Best Regards

jsakalos
5 Nov 2011, 11:43 AM
Shouldn't this belong to Designer Bugs thread? Do you want me to move it there?

bts
5 Nov 2011, 8:46 PM
Ok please...

Best Regards

jsakalos
6 Nov 2011, 1:29 AM
Moved.

Phil.Strong
7 Nov 2011, 7:16 AM
It would appear your using 4.x

The overflow button is in fact there but simply not getting the image correctly .. curious
29085

Phil.Strong
7 Nov 2011, 7:50 AM
This is a framework bug in 4.0.5 that is now fixed in 4.0.7 (release). Try exporting and including 4.0.7 download (http://www.sencha.com/products/extjs/download/)

I'm sure yet if we'll be upgrade 1.2.x to use 4.0.7 but until then it will be broken on the canvas and the preview as well.

bts
7 Nov 2011, 8:21 AM
The same result with ExtJS 4.0.7 - There is no button arrow for the overflow Toolbar Menu as you can see in the following image:

29089

bts
8 Nov 2011, 8:50 AM
The code generated by Ext Designer 1.2 just for the Panel with the Toolbar issue is this:


Ext.define('Medidas.view.ui.MyPanel2', {
extend: 'Ext.panel.Panel',

border: 0,
height: 110,
id: 'panelInferior',
layout: {
type: 'fit'
},
collapsed: false,
collapsible: true,
title: 'Barra de Procesos',
titleCollapse: true,
region: 'south',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'toolbar',
border: 0,
enableOverflow: true,
layout: {
align: 'stretchmax',
type: 'hbox'
},
items: [
{
xtype: 'buttongroup',
height: 77,
defaults: {
scale: 'large',
iconAlign: 'top',
margin: '10, 5, 0, 5'
},
bodyPadding: '\'0 20 0 0\'',
headerPosition: 'left',
title: 'Grupo Uno',
items: [
{
xtype: 'button',
allowDepress: false,
iconCls: 'iconProceso',
text: 'Proceso 1',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
iconCls: 'iconProceso01',
text: 'Sub Proceso 1'
},
{
xtype: 'menuseparator'
},
{
xtype: 'menuitem',
iconCls: 'iconProceso02',
text: 'Sub Proceso 2'
},
{
xtype: 'menuitem',
iconCls: 'iconProceso03',
text: 'Sub Proceso 3'
}
]
}
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 2'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 3'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 4'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 5'
}
]
},
{
xtype: 'buttongroup',
height: 77,
defaults: {
scale: 'large',
iconAlign: 'top',
margin: '10, 5, 0, 5'
},
bodyPadding: '\'0 20 0 0\'',
headerPosition: 'left',
title: 'Grupo Dos',
items: [
{
xtype: 'button',
allowDepress: false,
iconCls: 'iconProceso',
text: 'Proceso 1'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 2'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 3'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 4'
}
]
},
{
xtype: 'buttongroup',
height: 77,
defaults: {
scale: 'large',
iconAlign: 'top',
margin: '10, 5, 0, 5'
},
bodyPadding: '\'0 20 0 0\'',
headerPosition: 'left',
title: 'Grupo Tres',
items: [
{
xtype: 'button',
allowDepress: false,
iconCls: 'iconProceso',
text: 'Proceso 1'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 2'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 3'
},
{
xtype: 'button',
iconCls: 'iconProceso',
text: 'Proceso 4'
}
]
}
]
}
]
});

me.callParent(arguments);
}
});


Is there an issue with some combination of attributes ? or some mistake that i made?

Best Regards

bts
8 Nov 2011, 10:15 AM
After spend a time in Ext Designer, i found the "enableOverFlow" issue in a config of the Toolbar that is in "align" config of the "layout" section. If you set the values "middle, stretch or stretchmax" the overFlow functionality of the Toolbar disappear but if set it to "top" the overFlow space menu at the end of the Toolbar appears and the Third Button Group disappear like in this image:

29138

But when i export the code to the webserver using pointing to ExtJS 4.0.7 appears that space without any button arrow menu for the third button group like in the next image:

29140

So, then i remove the button groups and only left the buttons and then scale the buttons to "SMALL" with the icon align to the "LEFT" like in the following code:



... Panel ...
items: [
{
xtype: 'toolbar',
border: 0,
enableOverflow: true,
defaults: {
scale: 'small',
iconAlign: 'left'
},
items: [
{
... Buttons ...


And after that modification the Toolbar finally appears OK like in the following image:

29141

In summary, we need a Toolbar with LARGE buttons and the icon align to the TOP with the OVERFLOW functionality, but with this issue we can't create it. Do you know how can we accomplish the request?

I hope help with this kind of solution that i founded.

Best Regards

bts
8 Nov 2011, 12:55 PM
The overFlow button arrow menu at the end of a Toolbar disappear when you set the "scale" of a button to other value than "small" ... is there a solution for this issue ?

Phil.Strong
9 Nov 2011, 6:44 AM
I've moved this bug into Ext Bugs as it's not a bug with Designer but rather with toolbar functionality in Ext JS 4