ExtJS 3.4 Specialist

Job ID: 31634181

Budget: $10 – $30 USD

I have an ExtJS Toolbar which contains 3 buttons and I´d like to change the CSS style of the third one to change the icon and its tooltip based on already existing ones. I tried a lot of things and I can´t make it work.

How it´s today:
return new Ext.Toolbar({
id: 'j-perspective-nav-west-tb',
items: [
{
text: i18n.g('j.b.projectMenu'),
menu: new Ext.menu.Menu({
id: 'j-project-actions-menu',
items: this.getMenuItems(),
}),
},
'-',
{
text: i18n.g('j.b.changeProject'),
handler() {
this.onChangeProject()
},
id: this.changeProjectButtonId,
scope: this,
},
//'-',
'->',
{
id: 'j-project-minimize-south-icon',
//text: i18n.g("j-b-relateClose"),
iconCls: 'j-project-minimize-south-icon',
//icon: 'j-collapse-folder-icon',
handler: this.collapse,
scope: this,
},
],
})
},

How I would like to be:
<button data-automation="double-chevron-button" class="double-chevron-button sr-label sr-label-left-align with-tooltip panel-collapse-button" style="position: fixed; padding: 0px 0px 4px; z-index: 9999;" aria-label="Collapse this panel"><i class="fa fas fa-angle-double-left panel-collapse-icon" aria-hidden="true" style="cursor: pointer;"></i></button>
Related categories: JavaScript CSS HTML jQuery / Prototype Ext JS