PDA

View Full Version : buttongroup icons



n00b
19 Aug 2011, 5:42 AM
Hi,

I'm trying to make a unusable buttongroup menu (M$ office like).

The buttons must have the icon on top, with the text below. The thing is that the icon is not centered. I used the examples in the src, but it does not work ! Below is the capture of what it does.

27581

As you can see, the yellow mail is aligned to the left. I'd like it to be centered (the second button's height is too short, but this is on purpose;))
This is the code used to produce the capture :

{ xtype: "buttongroup", title: "Messages", columns: 2,defaults: { scale: "large",iconAlign:"top" }, items: [
{ height:66,width:150,text: "Envoyer le message", iconCls: "sendz"},
{ height:45,width:150,text: "Enregistrer le brouillon", iconCls: "floppyz"}
]
}

I tried by removing the width and height, but it doesn't solve the issue, plus, the buttons become too short (scale "large" is always bigger than 3 small buttons, and medium is smaller than 3 small buttons...)

aacoro
19 Aug 2011, 6:58 AM
Hi,

I'm trying to make a unusable buttongroup menu (M$ office like).

The buttons must have the icon on top, with the text below. The thing is that the icon is not centered. I used the examples in the src, but it does not work ! Below is the capture of what it does.

27581

As you can see, the yellow mail is aligned to the left. I'd like it to be centered (the second button's height is too short, but this is on purpose;))
This is the code used to produce the capture :

{ xtype: "buttongroup", title: "Messages", columns: 2,defaults: { scale: "large",iconAlign:"top" }, items: [
{ height:66,width:150,text: "Envoyer le message", iconCls: "sendz"},
{ height:45,width:150,text: "Enregistrer le brouillon", iconCls: "floppyz"}
]
}

I tried by removing the width and height, but it doesn't solve the issue, plus, the buttons become too short (scale "large" is always bigger than 3 small buttons, and medium is smaller than 3 small buttons...)


Hi,

Did you tried to use a layout? Default it is placing things horizontally beginning at the left side.


componentLayout (http://docs.sencha.com/ext-js/4-0/#/api/-cfg-componentLayout) : String/ObjectThe sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.
Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields (http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.Base)) come with their own componentLayout managers.


The default layout manager (http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Auto) will be used on instances of the base Ext.Component (http://docs.sencha.com/ext-js/4-0/#/api/Ext.Component) class which simply sizes the Component's encapsulating element to the height and width specified in the setSize (http://docs.sencha.com/ext-js/4-0/#/api/Ext.container.ButtonGroup-method-setSize) method.

Otherwise you have enough 'cls' and other css properties that you can use to do aligning?? Or do I see this wrong??

I hope you have read: http://docs.sencha.com/ext-js/4-0/#/api/Ext.container.ButtonGroup

n00b
19 Aug 2011, 7:50 AM
Of course, a simple css would fix that, but what is weird is that on the examples bundled with the src, icons are centered, without any layout specified or any css implementation.

Moreover, I was "porting" a extjs 3.3 app to extjs 4 and on 3.3, icons were centered automatically without any hack, this is what is weird.

I already tried all the existing layouts types with the align:center property, didn't work either :/

skirtle
22 Aug 2011, 3:03 PM
I just tried your code (with 4.0.2 and 4.0.5) and it worked fine.

Could you post the CSS for those 2 iconCls? It should look something like this:


.sendz {
background-image: url(image.gif);
}

Note it's background-image not background and there's no need to put !important on the end.

Have you tried using Firebug or the Chrome Developer Tools to dig into the CSS rules to see which ones are messing this up for you? In my testing, the SPAN element that has the spanz class also matches this rule:


.x-btn-icon-text-top .x-btn-icon {
background-position: center top;
}

Does that rule get applied for you? Is in overruled by another rule?

rafaelrp
25 May 2012, 12:25 PM
Same problem for me :(