PDA

View Full Version : Customize Ext Tools



pathum
12 May 2011, 7:38 PM
Hi All,

I need to customize Ext Tool as a long button other than which defined in Panel Tools.

For that what I have done is this.



width: 900,
toolAlign: 'left',
tools: [{
id: 'donescn',
qtip: 'Done',
href: 'done()',
hidden: false,
toolAlign: 'left'
},
{
id: 'repexcep',
qtip: 'Report',
href: 'showReport()',
hidden: false
}],
toolTemplate: new Ext.XTemplate(
'<tpl if="id==\'donescn\'">',
'<button class="x-tool x-tool-help" href="#" onClick="{href}">Done</button>',
'</tpl>',
'<tpl if="id==\'repexcep\'">',
'<button class="x-tool x-tool-help" href="#" onClick="{href}">Report</button>',
'</tpl>'
),


and then defined a CSS as follows.



button.x-tool-help {
border:1px outset;
background:transparent;
font:normal 11px tahoma,verdana,helvetica;
color: #4E4F4D;
padding-left:3px;
padding-right:3px;
cursor:pointer;
margin:1px;
overflow:visible;
width:auto;
}


The buttons are in the shape in which I need them. But the look and feel is somewhat old sharp edged.

Is there any way I can get the same rounded curves as Ext default buttons?

Any help would be highly appreciated!