PDA

View Full Version : Center button icon in IE


rafaelrp
14 Jun 2012, 12:29 PM
Hello!
I Have a simple bbar, but only in IE the icon was aligned to left.

Here's the code:




bbar: [



{



xtype : 'splitbutton',



text : 'lista',



scale : 'large',



rowspan : 3,



icon : 'imagens/32x32/lista_condutores.png',



iconAlign : 'top',



arrowAlign :'bottom',



menu: [



{



text : 'Lista de Condutores',



icon : 'imagens/16x16/group.png',



handler : function(){



panelLoad('centerPanel', 'lista', 'condutores/lista_condutores/', '');



}



},



{



text : 'cadastro',



icon : 'imagens/16x16/user_add.png',



handler : function(){



panelLoad('centerPanel', 'cadastro', 'condutores/lista_condutor/escad_condutor.php', '');



}



},



'-'



]



}]





Thanks! ~o)
scottmartin
15 Jun 2012, 8:29 AM
Can you send a screen of what you see and what you expect to see?
Does this happen in all versions of IE? or can you test? What version are you using?

Have you tested this on the latest 4.1.1 rc2?

Scott.
rafaelrp
26 Jun 2012, 8:59 AM
Here's the screenshots..

Chrome:
http://desmond.imageshack.us/Himg259/scaled.php?server=259&filename=screen1ev.png&res=landing

IE(8/9):
http://desmond.imageshack.us/Himg857/scaled.php?server=857&filename=screen2sg.png&res=landing

I'm using Ext 4.1

Thanks ! ~o)
scottmartin
26 Jun 2012, 9:16 AM
I do not see this behavior in IE8 using example from API

Can you verify? (4.1, 4.1.1)




Ext.onReady(function(){

// display a dropdown menu:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Options',

scale : 'large',
rowspan : 3,
icon : '../../extjs4/examples/button/images/add.gif',
iconAlign : 'top',
arrowAlign :'bottom',


// handle a click on the button itself
handler: function() {
alert("The button was clicked");
},
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
})
});

});


Regards,
Scott.
rafaelrp
26 Jun 2012, 9:22 AM
It's Extjs 4.1beta

Note: This toolbar is on a viewport



Ext.create('Ext.container.Viewport', {
id: 'mainViewport',
layout: 'border',
autoWidth: true,
items: [
{
region : 'north',
id : 'menuToolbar',
xtype : 'panel',
border : 0,
margins : '0 0 0 0',
bbar: [ (...)


Thanks Scott. !
Mthor
26 Jun 2012, 9:55 AM
I had this issue before. I think I added <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the <head> and all worked. I will do some quick research to make sure that is what I did to fix.
rafaelrp
26 Jun 2012, 10:03 AM
I had this issue before. I think I added <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the <head> and all worked. I will do some quick research to make sure that is what I did to fix.

no result :(

update--------

Work in IE8 but not ie IE9 :)
scottmartin
30 Jun 2012, 11:56 AM
Here is updated version using a viewport:
Using IE9



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
type: 'border'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'Center',
region: 'center'
},
{
xtype: 'toolbar',
height: 80,
region: 'north',
items: [
{
xtype: 'splitbutton',

scale : 'large',
rowspan : 3,
icon : '../../extjs4/examples/button/images/add.gif',
iconAlign : 'top',
arrowAlign :'bottom',

text: 'MyButton',
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
})
},
{
xtype: 'splitbutton',

scale : 'large',
rowspan : 3,
icon : '../../extjs4/examples/button/images/add.gif',
iconAlign : 'top',
arrowAlign :'bottom',

text: 'MyButton',
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
})
},
{
xtype: 'splitbutton',

scale : 'large',
rowspan : 3,
icon : '../../extjs4/examples/button/images/add.gif',
iconAlign : 'top',
arrowAlign :'bottom',

text: 'MyButton',
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
})
}
]
}
]
});

me.callParent(arguments);
}

});

Ext.onReady(function(){

Ext.create('MyApp.view.MyViewport', {});

});

36681
36679

Scott