PDA

View Full Version : adding an arbitrarily-sized icon to a button



epalm
28 Nov 2009, 7:25 PM
I'm starting out with an Panel holding a few Buttons. I want to add icons to the buttons which are 22x22, bigger than the "standard" 16x16 size.



nav: new Ext.Panel({
id: 'nav',
region: 'west',
width: 150,
layout: 'anchor',
defaults: {
anchor: '100%',
height: 40,
},
items: [
new Ext.Button({ text: 'Dashboard', icon: 'dashboard.png' }),
]
}),
This gets me
<button id="ext-gen13" class="x-btn-text" type="button" style="background-image: url(https://localhost/dashboard.png);">Dashboard</button> and the button looks like iconoverlap.png (http://www.extjs.com/forum/attachment.php?attachmentid=17454&stc=1&d=1259464389)

FireBug tells me the element has "padding-left:18px;" so I'd like to change that to something more fitting for my oversize icons. I add a style property to my button:


new Ext.Button({ style: { paddingLeft: '30px' }, text: 'Dashboard', icon: 'dashboard.png' }),This gets me
<button id="ext-gen13" class="x-btn-text" type="button" style="background-image: url(https://localhost/dashboard.png);">Dashboard</button> and the button looks like iconoverlap2.png (http://www.extjs.com/forum/attachment.php?attachmentid=17455&stc=1&d=1259464878) which is unexpected to say the least.

How can I accommodate arbitrarily-sized icons to buttons?

enriqueaf
29 Nov 2009, 10:34 AM
There are several ways of doing so. One of them is using, css and adding to your initial config:
cls: Selecting wich class you want to add and later adding the css styles that you need for configuring it in the right way.