PDA

View Full Version : How can I change the style of items selected



Kenzo59
3 Oct 2012, 8:41 AM
Hi,
I have a itemselector (xtype : 'itemselector'), and I would like to change style of selected items.Code :
{

anchor: '100%',
xtype: 'itemselector',
name: 'hosts',
id: 'hosts-field',
fieldLabel: 'Host name',
imagePath: '../ux/images/',
store: hostStore,
displayField: 'strHostName',
valueField: 'strHostName',
triggerAction : 'query',
allowBlank: false,
buttons: ['add', 'remove'],
height: 200,
renderTpl: [

// body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
'<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>',

// Label cell
'<tpl if="labelOnLeft">',
'<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
'{beforeLabelTpl}',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'{afterLabelTpl}',
'</td>',
'</tpl>',

// Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
'<td class="{baseBodyCls} {fieldBodyCls}" colspan="{bodyColspan}" role="presentation">',
'{beforeBodyEl}',

// Label just sits on top of the input field if labelAlign === 'top'
'<tpl if="labelAlign==\'top\'">',
'{beforeLabelTpl}',
'<div id="{id}-labelCell" style="{labelCellStyle}">',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'</div>',
'<div id="{id}-bodyEl">',
'</div>',
'{afterLabelTpl}',
'</tpl>',

'{beforeSubTpl}',
'{[values.$comp.getSubTplMarkup()]}',
'{afterSubTpl}',

// Final TD. It's a side error element unless there's a floating external one
'<tpl if="msgTarget===\'side\'">',
'{afterBodyEl}',
'</td>',
'<td id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
'<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none;width:{errorIconWidth}px"></div>',
'</td>',
'<tpl elseif="msgTarget==\'under\'">',
'<div id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
'{afterBodyEl}',
'</td>',
'</tpl>',

'</tr>',
{
disableFormats: true
}
]


Regards,
New user of ExtJs

Kenzo59
4 Oct 2012, 12:20 AM
Please anyone can help me ?

Kenzo59
4 Oct 2012, 4:26 AM
It's urgent please. Anybody can help me...

metalinspired
4 Oct 2012, 9:15 AM
first wrap your code into


trying to read your code posted in its current way hurts people eyes :)