How To Move Data Between Two Multiselects

Posted By Vitaliy | April 22, 2012 | ExtJS 4.0.7
0 2938
Reply to thread
Drag-and-Drop version here

Js Code

{
	itemId: 'toright',
	text: '>',
	handler: function () {
		var form = this.up('form');
		var values = form.down('#left').getValue();
		if (values.length) {
			var left = form.down('#left').store;
			var right = form.down('#right').store;
			var record;
			Ext.Array.each(values, function (v) {
				record = left.findRecord('text', v);
				left.remove(record);
				right.add({ text: v });
			});
		}
	}
}
            

How to use Ext.ux.form.MultiSelect

Posted By Vitaliy | March 24, 2012 | ExtJS 4.0.7
0 3106
Reply to thread

Js Code

Ext.Loader.setConfig({
	enabled: true,
	paths: {
		'Ext.ux': '/Scripts/ext/ext-4.0.7-gpl/ux'
	}
});

Ext.define('Ext.ux.PairSelector', {
	extend: 'Ext.panel.Panel',
	alias: 'widget.pairselector',
	requires: ['Ext.ux.form.MultiSelect'],
	width: 600,
	height: 300,
	border: false,
	layout: {
		type: 'hbox',
		align: 'stretch'
	},
	items: [{
		itemId: 'first',
		xtype: 'multiselect',
		cls: 'multiselect-no-border',
		minSelections: 1,
		maxSelections: 1,
		margin: 0,
		flex: 1,
		store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
	},
	{
		itemId: 'second',
		xtype: 'multiselect',
		cls: 'multiselect-no-border',
		minSelections: 1,
		maxSelections: 1,
		margin: 0,
		flex: 1,
		store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
	},
	{
		xtype: 'panel',
		layout: {
			type: 'vbox',
			align: 'center',
			pack: 'center'
		},
		defaults: {
			xtype: 'button',
			width: 80,
			disabled: true
		},
		items: [
			{ action: 'add', text: 'Add >' },
			{ action: 'remove', text: '< Remove', margin: '1 0 0 0' }
		],
		width: 100
	},
	{
		itemId: 'third',
		xtype: 'multiselect',
		cls: 'multiselect-no-border',
		minSelections: 1,
		maxSelections: 1,
		margin: 0,
		flex: 1,
		store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
	}],
	initComponent: function () {
		this.callParent(arguments);

		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');
		var add = this.down('button[action=add]');
		var remove = this.down('button[action=remove]');

		first.on('change', this.onInputSelectChange, this);
		second.on('change', this.onInputSelectChange, this);
		third.on('change', this.onOutputSelectChange, this);

		add.on('click', this.onAddClick, this);
		remove.on('click', this.onRemoveClick, this);

		third.store.on('datachanged', this.onThirdStoreChanged, this);
	},
	onInputSelectChange: function () {
		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');
		var add = this.down('button[action=add]');

		if (first.isValid() && second.isValid() && third.store.getCount() == 0) {
			add.enable();
		}
	},
	onOutputSelectChange: function () {
		var third = this.getComponent('third');
		var remove = this.down('button[action=remove]');

		if (third.isValid()) {
			remove.enable();
		}
	},
	onAddClick: function (button) {
		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');

		var v1 = first.getValue();
		var v2 = second.getValue();

		var v = v1 + ',' + v2;

		third.store.add({ text: v });
		third.setValue(v);
	},
	onRemoveClick: function (button) {
		var third = this.getComponent('third');
		var v = third.getValue();
		var r = third.store.findRecord('text', v);

		third.store.remove(r);
		button.disable();
	},
	onThirdStoreChanged: function (store) {
		var add = this.down('button[action=add]');
		add.setDisabled(store.getCount() > 0);
	},
	showError: function (msg) {
		Ext.Msg.alert('Error', msg);
	},
	submit: function () {
		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');

		first.getEl().mask('loading...');
		second.getEl().mask('loading...');

		Ext.defer(function () {
			first.store.loadData([
				{ text: 'a' },
				{ text: 'b' },
				{ text: 'c' }
			]);
			first.getEl().unmask();
		}, 1000);

		Ext.defer(function () {
			second.store.loadData([
				{ text: '1' },
				{ text: '2' },
				{ text: '3' }
			]);
			second.getEl().unmask();
		}, 2000);
	},
	setList3: function (values) {
		if (typeof values == 'undefined' || !values) {
			this.showError('input value');
			return;
		}
		var a = values.split(',');
		if (a.length != 2) {
			this.showError('input valid value in format: V1,V2');
			return;
		}

		var v1 = a[0];
		var v2 = a[1];

		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');

		var r1 = first.store.findRecord('text', v1);
		if (!r1) {
			this.showError('value ' + v1 + ' is not found');
			return;
		}

		var r2 = second.store.findRecord('text', v2);
		if (!r2) {
			this.showError('value ' + v2 + ' is not found');
			return;
		}

		first.setValue(v1);
		second.setValue(v2);

		var v = v1 + ',' + v2;

		if (third.store.getCount() == 1) third.store.removeAt(0);
		third.store.add({ text: v });
		third.setValue(v);
	},
	clear: function () {
		var first = this.getComponent('first');
		var second = this.getComponent('second');
		var third = this.getComponent('third');

		first.store.loadData([]);
		second.store.loadData([]);
		third.store.loadData([]);

		var add = this.down('button[action=add]');
		var remove = this.down('button[action=remove]');

		add.disable();
		remove.disable();
	}
});

Ext.onReady(function () {
		Ext.widget('window', {
		title: 'Test Window',
		width: 600,
		height: 400,
		autoShow: true,
		layout: 'fit',
		items: [
			{
				xtype: 'pairselector'
			}
		],
		buttons: [
			{
				text: 'submit',
				handler: function () {
					var win = this.up('window');
					var selector = win.down('pairselector');

					selector.submit();
				}
			},
			{
				text: 'setList3',
				handler: function () {
					var win = this.up('window');
					var selector = win.down('pairselector');
					Ext.Msg.prompt('Input value', null, function (button, value) {
						if (button == 'ok') selector.setList3(value);
					}, this, false, 'b,2');
				}
			},
			{
				text: 'clear',
				handler: function () {
					var win = this.up('window');
					var selector = win.down('pairselector');
					selector.clear();
				}
			}
		]
	});
});