kveeiv / extjs-boxselect

Ext.ux.form.field.BoxSelect
http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html
MIT License
108 stars 53 forks source link

readOnly mode not displayed correctly #43

Open zgrzybek opened 9 years ago

zgrzybek commented 9 years ago

Setting readOnly on BoxSelect doesn't set readonly attribute on input element, therefore a user is still able to type in new value.

To resolve that new line must be added to fieldSubTpl. which is:

'<tpl if="readOnly"> readonly="readonly"</tpl>',

To fix change:

fieldSubTpl: [
    '<div id="{cmpId}-listWrapper" class="x-boxselect {fieldCls} {typeCls}">',
    '<ul id="{cmpId}-itemList" class="x-boxselect-list">',
    '<li id="{cmpId}-inputElCt" class="x-boxselect-input">',
    '<div id="{cmpId}-emptyEl" class="{emptyCls}">{emptyText}</div>',
    '<input id="{cmpId}-inputEl" type="{type}" ',
    '<tpl if="name">name="{name}" </tpl>',
    '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
    '<tpl if="size">size="{size}" </tpl>',
    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
    '<tpl if="disabled"> disabled="disabled"</tpl>',
    'class="x-boxselect-input-field {inputElCls}" autocomplete="off">',
    '</li>',
    '</ul>',
    '</div>',
    {
        compiled: true,
        disableFormats: true
    }
],

to

fieldSubTpl: [
    '<div id="{cmpId}-listWrapper" class="x-boxselect {fieldCls} {typeCls}">',
    '<ul id="{cmpId}-itemList" class="x-boxselect-list">',
    '<li id="{cmpId}-inputElCt" class="x-boxselect-input">',
    '<div id="{cmpId}-emptyEl" class="{emptyCls}">{emptyText}</div>',
    '<input id="{cmpId}-inputEl" type="{type}" ',
    '<tpl if="name">name="{name}" </tpl>',
    '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
    '<tpl if="size">size="{size}" </tpl>',
    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
    '<tpl if="disabled"> disabled="disabled"</tpl>',
    '<tpl if="readOnly"> readonly="readonly"</tpl>',
    'class="x-boxselect-input-field {inputElCls}" autocomplete="off">',
    '</li>',
    '</ul>',
    '</div>',
    {
        compiled: true,
        disableFormats: true
    }
],