View Full Version : [FIXED-757] Read Only Ext.ux.form.MultiSelect

19 Mar 2010, 11:16 PM
Ext version tested:

Ext 3.1.2
Adapter used:

Extension used:

css used:

only default ext-all.css
Browser versions tested against:

Chrome 4
FF 3.6
Safari 4
Operating System:

WinXP Pro

It is not possibile to have a read only multiselect (Ext.ux.form.MultiSelect)
Test Case:

function buildSimpleStore(aLimit) {
var vStore = new Array();
for (var i = 0; i < aLimit; i++) {
var vOption = new Array();
vOption.push("" + i);
vOption.push("Element " + i);
return vStore;
Ext.onReady(function () {
var vAvailableStore = buildSimpleStore(5);
var vViewport = new Ext.Viewport({
layout: 'border',
items: [{
id: 'myform',
xtype: 'form',
title: 'Test ItemSelector',
region: 'center',
autoHeight: true,
layout: 'form',
items: [{
xtype: 'multiselect',
fieldLabel: 'Readonly MultiSelect',
id: "mymulti",
name: "mymulti",
//disabled : true,
delimiter: ';',
value: "2",
readOnly: true,
store: vAvailableStore,
hideTrigger: true
buttons: [{
text: 'Submit',
handler: function () {
url: 'TestItemSelector.html'

See this URL : http://www.extjs.com/forum/showthread.php?t=94715

Steps to reproduce the problem:

Run the test case. In the Multiselect, user can change selected value and so when they are submitted, they are changed
The result that was expected:

user should be not able to change selected values
The result that occurs instead:

User can change values

Debugging already done:

readOnly property is not managed
Possible fix:

a quick fix is to consider the readOnly property in the onViewBeforeClick (get a look to the code below)
maybe a more complete solution should be "move" selected value on top and/or don't display unselected values. Maybe this behaviour should be enable by properties
Warning: of couse when the multiselect field is submitted, original untouchable values must be submitted (if the field is not disabled)

onViewBeforeClick: function (vw, index, node, e) {
if (this.disabled || this.readOnly) {