View Full Version : Button layout

14 Nov 2011, 2:21 AM
Hi all,

I create a button via

xtype: 'button',
icon: 'testicon.png',
tooltip: 'clickme'

The button tag is now wrapped by a table that sets a rectangle around my testicon.png. But I only want the testicon.png as a button and now table wrap.

Is there a possibility to "kill" this table and just have a button? Hopefully you understood what I mean, if not, just ask. My english is not the best ;)

Thanks and kind regards,


14 Nov 2011, 9:20 AM
You English is well enough to get your point across!

In the Ext.Button source, there is a template that is placed in the onRender method:

onRender : function(ct, position){
// hideous table template
Ext.Button.buttonTemplate = new Ext.Template(
'<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',
'<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i>&#160;</i></td></tr>',
'<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',
this.template = Ext.Button.buttonTemplate;

var btn, targs = this.getTemplateArgs();

btn = this.template.insertBefore(position, targs, true);
btn = this.template.append(ct, targs, true);
* An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
* this references a <tt>&lt;button&gt;</tt> element. Read only.
* @type Ext.Element
* @property btnEl
this.btnEl = btn.child(this.buttonSelector);
this.mon(this.btnEl, {
scope: this,
focus: this.onFocus,
blur: this.onBlur

this.initButtonEl(btn, this.btnEl);


So you can see the first two lines of this method it is checking for some template properties that you can use instead of the default one.

15 Nov 2011, 12:05 AM
Dear Mitchell ,

thanks for that great response! But there is still a little unpleasant problem. First at all, I killed the table by creating my own button class that extends the Ext.Button. Than I set a template class attribute and it looked like this:

BrickButton = Ext.extend(Ext.Button, {

template: new Ext.Template('<em><button type="{0}" style="cursor: help"></button></em>'),
initComponent: function () {
Ext.apply(this, {
width: 16,
icon: '/test.png'


Ext.reg('Me.brickButton', BrickButton);

Of course, this is only the configuration to test it works and then I'll set some more attributes. This works not that bad, but the problem is, that there are two borders or shades at the right and at the bottom. I cannot find any CSS responsible for this (using Firebug).

This is how it looks like now:


Any idea where this comes from?

Thanks and kind regards,