Szinte csak új típusú komponensek készítésekor foglalkozok CSS szabályok írásával, máskülönben mindig az ExtJS alapértelmezett elemeit használom. Meg is lepődtem, amikor egy olyan feladat előtt álltam, ami egy az egyben CSS-sel megoldható, mégpedig gomboknál kellett az ikont jobb oldalra helyezni. Bár úgy is mondhatnám, hogy meglepődtem, amiért ezt nekem kellett megírni, és nem volt benne az ExtJS-ben alapértelmezetten. :)
Tehát a CSS kiegészítés:
table.x-btn-icon-right button {
background-position: right 2px !important;
padding-left: 0 !important;
padding-right: 18px !important;
}
background-position: right 2px !important;
padding-left: 0 !important;
padding-right: 18px !important;
}
És a hozzá tartozó JavaScript példakód:
new Ext.Window({
title:'Lorem ipsum',
width: 200,
border: false,
buttonAlign: 'center',
buttons: [{
text:'Export',
iconCls:'arrow_down_icon'
}, {
text:'Import',
iconCls:'arrow_up_icon',
cls:'x-btn-icon-right x-btn-text-icon'
}],
// IE:
bodyStyle:'display:none'
}).show();
title:'Lorem ipsum',
width: 200,
border: false,
buttonAlign: 'center',
buttons: [{
text:'Export',
iconCls:'arrow_down_icon'
}, {
text:'Import',
iconCls:'arrow_up_icon',
cls:'x-btn-icon-right x-btn-text-icon'
}],
// IE:
bodyStyle:'display:none'
}).show();
