Hi all,

I am using MULTISELECT/ITEMSELECTOR in a project as in http://dev.sencha.com/deploy/dev/exa...lect-demo.html demo page, but needed it to be "multi-column", i.e. the ListView object used in the control had to show not only the "text" field of the datastore.

The only change needed is in line #166 of the original MultiSelect.js file, from

Code:
this.view = new Ext.ListView({
	multiSelect: true,
	store: this.store,
	columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
	hideHeaders: true
});
to

Code:
this.view = new Ext.ListView({
	multiSelect: true,
	store: this.store,
	columns: this.columns,
	hideHeaders: false
});
Obviously now you must provide the COLUMNS object in the calling page, as in this example:

Original multiselect-demo.js
Code:
var msForm = new Ext.form.FormPanel({
	title: 'MultiSelect Test',
	width: 700,
	bodyStyle: 'padding:10px;',
	renderTo: 'multiselect',
	items:[{
		xtype: 'multiselect',
		fieldLabel: 'Multiselect<br />(Required)',
		name: 'multiselect',
		width: 250,
		height: 200,
		allowBlank: false,
		store: [[123,'One Hundred Twenty Three'],
				['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
				['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
(...)
Modified multiselect-demo.js
Code:
var ds = new Ext.data.ArrayStore({
	autoDestroy: true,
	storeId: 'ds',
	idIndex: 0,  
	fields: ['id', 'desc_eng', 'desc_ita'],
	data: [
		['123', 'One Hundred Twenty Three', 'Cento Venti Tre'],
		['1', 'One', 'Uno'], 
		['2', 'Two', 'Due'], 
		['3', 'Three', 'Tre'], 
		['4', 'Four', 'Quattro'], 
		['5', 'Five', 'Cinque'],
		['6', 'Six', 'Sei'], 
		['7', 'Seven', 'Sette'], 
		['8', 'Eight', 'Otto'], 
		['9', 'Nine', 'Nove']
	],
	sortInfo: {
		field: 'id',
		direction: 'ASC'
	}
});

var msForm = new Ext.form.FormPanel({
	title: 'MultiSelect Test',
	width: 700,
	bodyStyle: 'padding:10px;',
	renderTo: 'multiselect',
	items:[{
		xtype: 'multiselect',
		fieldLabel: 'Multiselect<br />(Required)',
		name: 'multiselect',
		width: 250,
		height: 200,
		allowBlank: false,
		store: ds,
		valueField: 'id',
		columns: [{
			header: 'ID',
			id: 'id',
			dataIndex: 'id',
			width: .2,
			sortable: false
		},{
			header: 'Desc ENG',
			dataIndex: 'desc_eng',
			width: .4,
			sortable: false
		},{
			header: 'Desc ITA',
			dataIndex: 'desc_ita',
			width: .4,
			sortable: false
		}],
(...)
This is the final result.



PLEASE NOTE: I am not changing the ORIGINAL MultiSelect.js file for obvious reasons!
This is only to explain the small change done to get the result!
Please use instead an Override like this in your page!

Code:
Ext.override(Ext.ux.form.MultiSelect, {
	onRender: function(ct, position){
		Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);

		var fs = this.fs = new Ext.form.FieldSet({
			renderTo: this.el,
			title: this.legend,
			height: this.height,
			width: this.width,
			style: "padding:0;",
			tbar: this.tbar
		});
		fs.body.addClass('ux-mselect');

		this.view = new Ext.ListView({
			multiSelect: true,
			store: this.store,
		//	columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
			columns: this.columns,
			hideHeaders: false
		});
		fs.add(this.view);

		this.view.on('click', this.onViewClick, this);
		this.view.on('beforeclick', this.onViewBeforeClick, this);
		this.view.on('dblclick', this.onViewDblClick, this);

		this.hiddenName = this.name || Ext.id();
		var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
		this.hiddenField = this.el.createChild(hiddenTag);
		this.hiddenField.dom.disabled = this.hiddenName != this.name;
		fs.doLayout();
	},
});