Results 1 to 2 of 2

Thread: adding an arbitrarily-sized icon to a button

  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    24

    Question adding an arbitrarily-sized icon to a button

    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.

    Code:
    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
    Code:
    <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

    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:

    Code:
    new Ext.Button({ style: { paddingLeft: '30px' }, text: 'Dashboard', icon: 'dashboard.png' }),
    This gets me
    Code:
    <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 which is unexpected to say the least.

    How can I accommodate arbitrarily-sized icons to buttons?
    Attached Images Attached Images

  2. #2

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •