PDA

View Full Version : how more than one item selector use in a window?



ps_arunkumar
15 Feb 2013, 3:51 AM
Hi,


i add one more selected view in singe item selector. click add button , data add to my selected view. but i click save button only selected view data show. how i get myselected view data also.


i attached screenshot below

41872

also i attached my js file
/*

This file is part of Ext JS 4


Copyright (c) 2011 Sencha Inc


Contact: http://www.sencha.com/contact


GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.


If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


*/
/*
* Note that this control will most likely remain as an example, and not as a core Ext form
* control. However, the API will be changing in a future release and so should not yet be
* treated as a final, stable API at this time.
*/


/**
* @class Ext.ux.form.ItemSelector
* @extends Ext.form.field.Base
* A control that allows selection of between two Ext.ux.form.MultiSelect controls.
*
* @history
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
*
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
* @xtype itemselector
*/
Ext.define('Ext.ux.form.ItemSelector', {
extend: 'Ext.ux.form.MultiSelect',
alias: ['widget.itemselectorfield', 'widget.itemselector'],
alternateClassName: ['Ext.ux.ItemSelector'],
requires: ['Ext.ux.layout.component.form.ItemSelector', 'Ext.button.Button'],

hideNavIcons:false,


/**
* @cfg {Array} buttons Defines the set of buttons that should be displayed in between the ItemSelector
* fields. Defaults to <tt>['top', 'up', 'add', 'remove', 'down', 'bottom']</tt>. These names are used
* to build the button CSS class names, and to look up the button text labels in {@link #buttonsText}.
* This can be overridden with a custom Array to change which buttons are displayed or their order.
*/
buttons: ['top', 'up', 'add', 'remove', 'down', 'bottom'],


buttonsText: {
top: "Move to Top",
up: "Move Up",
add: "Add to Selected",
remove: "Remove from Selected",
down: "Move Down",
bottom: "Move to Bottom"
},


/**
* @cfg {Array} multiselects An optional array of {@link Ext.ux.form.MultiSelect} config objects, containing
* additional configuration to be applied to the internal MultiSelect fields.
*/
multiselects: [],


componentLayout: 'itemselectorfield',


fieldBodyCls: Ext.baseCSSPrefix + 'form-itemselector-body',




bindStore: function(store, initial) {
var me = this,
toField = me.toField,
fromField = me.fromField,
tonewField = me.tonewField,
models;


me.callParent(arguments);


if (toField) {
// Clear both field stores
toField.store.removeAll();
fromField.store.removeAll();
tonewField.store.removeAll();


// Clone the contents of the main store into the fromField
models = [];
me.store.each(function(model) {
models.push(model.copy(model.getId()));
});
fromField.store.add(models);
}
},


onRender: function(ct, position) {
var me = this,
baseCSSPrefix = Ext.baseCSSPrefix,
ddGroup = 'ItemSelectorDD-' + Ext.id(),
ddGroup1 = 'ItemSelectorDD-' + Ext.id(),
commonConfig = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup,
dropGroup: ddGroup,
flex: 1,
hideLabel: true
},
commonConfig1 = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup1,
dropGroup: ddGroup1,
flex: 1,
hideLabel: true
},
fromConfig = Ext.apply({
//listTitle: 'Available',
listTitle: (this.legendFrom || 'Available'),
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
}
}
}, me.multiselects[0], commonConfig),
toConfig = Ext.apply({
//listTitle: 'Selected',
listTitle: (this.legendTo || 'Selected'),
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
},
change: me.onToFieldChange,
scope: me
}
}, me.multiselects[1], commonConfig),
tonewConfig = Ext.apply({
listTitle: 'mySelected',
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick1,
scope: me
},
change: me.onToFieldChange1,
scope: me
}
}, me.multiselects[1], commonConfig1),
fromField = Ext.widget('multiselect', fromConfig),
toField = Ext.widget('multiselect', toConfig),
tonewField = Ext.widget('multiselect', tonewConfig),
innerCt,
buttons = [];
buttons1 = [];


// Skip MultiSelect's onRender as we don't want its content
Ext.ux.form.MultiSelect.superclass.onRender.call(me, ct, position);


me.fromField = fromField;
me.toField = toField;
me.tonewField = tonewField;


if (!me.hideNavIcons) {
Ext.Array.forEach(me.buttons, function(name) {
buttons.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick'],
cls: baseCSSPrefix + 'form-itemselector-btn',
iconCls: baseCSSPrefix + 'form-itemselector-' + name,
scope: me
});
//div separator to force vertical stacking
buttons.push({xtype: 'component', height: 3, width: 1, style: 'font-size:0;line-height:0'});


});

Ext.Array.forEach(me.buttons, function(name) {

buttons1.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick1'],
cls: baseCSSPrefix + 'form-itemselector-btn',
iconCls: baseCSSPrefix + 'form-itemselector-' + name,
scope: me
});
//div separator to force vertical stacking
buttons1.push({xtype: 'component', height: 3, width: 1, style: 'font-size:0;line-height:0'});
});
}


innerCt = me.innerCt = Ext.widget('container', {
renderTo: me.bodyEl,
layout: {
type: 'hbox',
align: 'middle'
},
items: [
me.fromField,
{
xtype: 'container',
margins: '0 4',
items: buttons
},
me.toField,
{
xtype: 'container',
margins: '0 4',
items: buttons1
},
me.tonewField
]
});


// Must set upward link after first render
innerCt.ownerCt = me;


// Rebind the store so it gets cloned to the fromField
me.bindStore(me.store);


// Set the initial value
me.setRawValue(me.rawValue);
},

onToFieldChange: function() {
this.checkChange();
},
onToFieldChange1: function() {
this.checkChange1();
},

getSelections: function(list){
var store = list.getStore(),
selections = list.getSelectionModel().getSelection(),
i = 0,
len = selections.length;

return Ext.Array.sort(selections, function(a, b){
a = store.indexOf(a);
b = store.indexOf(b);

if (a < b) {
return -1;
} else if (a > b) {
return 1;
}
return 0;
});
},


onTopBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = selected.length - 1,
selection;


store.suspendEvents();
for (; i > -1; --i) {
selection = selected[i];
store.remove(selected);
store.insert(0, selected);
}
store.resumeEvents();
list.refresh();
},


onBottomBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
store.remove(selection);
store.add(selection);
}
store.resumeEvents();
list.refresh();
},


onUpBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.max(0, store.indexOf(selection) - 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},


onDownBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
max = store.getCount(),
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.min(max, store.indexOf(selection) + 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},


onAddBtnClick : function() {
var me = this,
fromList = me.fromField.boundList,
selected = this.getSelections(fromList);

fromList.getStore().remove(selected);
this.toField.boundList.getStore().add(selected);
},

onAddBtnClick1 : function() {
var me = this,
fromList = me.fromField.boundList,
selected = this.getSelections(fromList);

fromList.getStore().remove(selected);
this.tonewField.boundList.getStore().add(selected);
},


onRemoveBtnClick : function() {
var me = this,
toList = me.toField.boundList,
selected = this.getSelections(toList);

toList.getStore().remove(selected);
this.fromField.boundList.getStore().add(selected);
},
onRemoveBtnClick1 : function() {
var me = this,
tonewList = me.tonewField.boundList,
selected = this.getSelections(toList);

tonewList.getStore().remove(selected);
this.fromField.boundList.getStore().add(selected);
},




onItemDblClick : function(view) {
var me = this;
if (view == me.toField.boundList){
me.onRemoveBtnClick();
}
else if (view == me.fromField.boundList) {
me.onAddBtnClick();
}
},

onItemDblClick1 : function(view) {
var me = this;
if (view == me.tonewField.boundList){
me.onRemoveBtnClick1();
}
else if (view == me.fromField.boundList) {
me.onAddBtnClick1();
}
},


setRawValue: function(value) {
var me = this,
Array = Ext.Array,
toStore,tonewStore, fromStore, models;


value = Array.from(value);
me.rawValue = value;


if (me.toField) {
toStore = me.toField.boundList.getStore();
fromStore = me.fromField.boundList.getStore();


// Move any selected values back to the fromField
fromStore.add(toStore.getRange());
toStore.removeAll();


// Move the new values over to the toField
models = [];
Ext.Array.forEach(value, function(val) {
var undef,
model = fromStore.findRecord(me.valueField, val, undef, undef, true, true);
if (model) {
models.push(model);
}
});
fromStore.remove(models);
toStore.add(models);
}
if (me.tonewField) {
tonewStore = me.tonewField.boundList.getStore();
fromStore = me.fromField.boundList.getStore();


// Move any selected values back to the fromField
fromStore.add(tonewStore.getRange());
tonewStore.removeAll();


// Move the new values over to the toField
models1 = [];
Ext.Array.forEach(value, function(val) {
var undef,
model = fromStore.findRecord(me.valueField, val, undef, undef, true, true);
if (model) {
models1.push(model);
}
});
fromStore.remove(models1);
tonewStore.add(models1);
}


return value;
},


getRawValue: function() {
var me = this,
toField = me.toField,
tonewField = me.tonewField,
rawValue = me.rawValue;


if (toField) {
var rawValue1= Ext.Array.map(toField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});

rawValue = rawValue1;// +","+rawValue2;
}
if (tonewField) {
var rawValue1= Ext.Array.map(toField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});
var rawValue2 = Ext.Array.map(tonewField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});
/*for (prop in rawValue1) {
if (rawValue2[prop]) { continue; }else{
rawValue2[prop] = rawValue1[prop];}
}*/
rawValue = rawValue2;
}


me.rawValue = rawValue;
return rawValue;
},


/**
* @private Cascade readOnly/disabled state to the sub-fields and buttons
*/
updateReadOnly: function() {
var me = this,
readOnly = me.readOnly || me.disabled;


if (me.rendered) {
me.toField.setReadOnly(readOnly);
me.fromField.setReadOnly(readOnly);
Ext.Array.forEach(me.innerCt.query('button'), function(button) {
button.setDisabled(readOnly);
});
}
},


onDestroy: function() {
Ext.destroyMembers(this, 'innerCt');
this.callParent();
}


});




any one help me

mitchellsimoens
17 Feb 2013, 8:31 AM
So you want to get the data from the two right item selectors when the getValue is executed?

ps_arunkumar
17 Feb 2013, 8:34 PM
Hi,

now it works fine. now drag not work second itemselector. any other solution apart from this.

main script

/*

This file is part of Ext JS 4


Copyright (c) 2011 Sencha Inc


Contact: http://www.sencha.com/contact


GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.


If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


*/
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);


Ext.onReady(function(){


var ds = Ext.create('Ext.data.ArrayStore', {
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});


/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',


tbar:[{
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
isForm.getForm().findField('itemselector').setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
handler: function(){
var m = isForm.getForm().findField('itemselector');
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
},{
text: 'Toggle delimiter',
handler: function() {
var m = isForm.getForm().findField('itemselector');
if (m.delimiter) {
m.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
} else {
m.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
}
}
}]
}],


items:[{
xtype: 'itemselector',
name: 'ItemSelector1',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',


store: ds,
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
newvalue: ['7', '8', '9'],


allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
msgTarget: 'side'
},{
xtype: 'itemselector',
name: 'ItemSelector2',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',


store: ds,
displayField: 'text',
valueField: 'value',
value: ['7', '8'],
newvalue: ['9'],
allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
msgTarget: 'side'
}],


buttons: [{
text: 'Clear',
handler: function(){
var field = isForm.getForm().findField('itemselector');
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
isForm.getForm().reset();
}
}, {
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});


});




itemselector.js


/*

This file is part of Ext JS 4


Copyright (c) 2011 Sencha Inc


Contact: http://www.sencha.com/contact


GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.


If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


*/
/*
* Note that this control will most likely remain as an example, and not as a core Ext form
* control. However, the API will be changing in a future release and so should not yet be
* treated as a final, stable API at this time.
*/


/**
* @class Ext.ux.form.ItemSelector
* @extends Ext.form.field.Base
* A control that allows selection of between two Ext.ux.form.MultiSelect controls.
*
* @history
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
*
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
* @xtype itemselector
*/
Ext.define('Ext.ux.form.ItemSelectorCustom', {
extend: 'Ext.ux.form.MultiSelect',
alias: ['widget.itemselectorfield', 'widget.itemselector'],
alternateClassName: ['Ext.ux.ItemSelector'],
requires: ['Ext.ux.layout.component.form.ItemSelector', 'Ext.button.Button'],

hideNavIcons:false,


/**
* @cfg {Array} buttons Defines the set of buttons that should be displayed in between the ItemSelector
* fields. Defaults to <tt>['top', 'up', 'add', 'remove', 'down', 'bottom']</tt>. These names are used
* to build the button CSS class names, and to look up the button text labels in {@link #buttonsText}.
* This can be overridden with a custom Array to change which buttons are displayed or their order.
*/
buttons: ['top', 'up', 'add', 'remove', 'down', 'bottom'],


buttonsText: {
top: "Move to Top",
up: "Move Up",
add: "Add to Selected",
remove: "Remove from Selected",
down: "Move Down",
bottom: "Move to Bottom"
},


/**
* @cfg {Array} multiselects An optional array of {@link Ext.ux.form.MultiSelect} config objects, containing
* additional configuration to be applied to the internal MultiSelect fields.
*/
multiselects: [],


componentLayout: 'itemselectorfield',


fieldBodyCls: Ext.baseCSSPrefix + 'form-itemselector-body',




bindStore: function(store, initial) {
var me = this,
toField = me.toField,
fromField = me.fromField,
tonewField = me.tonewField,
models;


me.callParent(arguments);


if (toField) {
// Clear both field stores
toField.store.removeAll();
fromField.store.removeAll();
tonewField.store.removeAll();


// Clone the contents of the main store into the fromField
models = [];
me.store.each(function(model) {
models.push(model.copy(model.getId()));
});
fromField.store.add(models);
}
},


onRender: function(ct, position) {
var me = this,
baseCSSPrefix = Ext.baseCSSPrefix,
ddGroup = 'ItemSelectorDD-' + Ext.id(),
ddGroup1 = 'ItemSelectorDD-' + Ext.id(),
commonConfig = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup,
dropGroup: ddGroup,
flex: 1,
hideLabel: true
},
commonConfig1 = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup1,
dropGroup: ddGroup1,
flex: 1,
hideLabel: true
},
fromConfig = Ext.apply({
//listTitle: 'Available',
listTitle: (this.legendFrom || 'Available'),
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
}
}
}, me.multiselects[0], commonConfig),
toConfig = Ext.apply({
//listTitle: 'Selected',
listTitle: (this.legendTo || 'Selected'),
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
},
change: me.onToFieldChange,
scope: me
}
}, me.multiselects[1], commonConfig),
tonewConfig = Ext.apply({
listTitle: 'mySelected',
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick1,
scope: me
},
change: me.onToFieldChange1,
scope: me
}
}, me.multiselects[1], commonConfig1),
fromField = Ext.widget('multiselect', fromConfig),
toField = Ext.widget('multiselect', toConfig),
tonewField = Ext.widget('multiselect', tonewConfig),
innerCt,
buttons = [];
buttons1 = [];


// Skip MultiSelect's onRender as we don't want its content
Ext.ux.form.MultiSelect.superclass.onRender.call(me, ct, position);


me.fromField = fromField;
me.toField = toField;
me.tonewField = tonewField;


if (!me.hideNavIcons) {
Ext.Array.forEach(me.buttons, function(name) {
buttons.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick'],
cls: baseCSSPrefix + 'form-itemselector-btn',
iconCls: baseCSSPrefix + 'form-itemselector-' + name,
scope: me
});
//div separator to force vertical stacking
buttons.push({xtype: 'component', height: 3, width: 1, style: 'font-size:0;line-height:0'});


});

Ext.Array.forEach(me.buttons, function(name) {

buttons1.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick1'],
cls: baseCSSPrefix + 'form-itemselector-btn',
iconCls: baseCSSPrefix + 'form-itemselector-' + name,
scope: me
});
//div separator to force vertical stacking
buttons1.push({xtype: 'component', height: 3, width: 1, style: 'font-size:0;line-height:0'});
});
}


innerCt = me.innerCt = Ext.widget('container', {
renderTo: me.bodyEl,
layout: {
type: 'hbox',
align: 'middle'
},
items: [
me.fromField,
{
xtype: 'container',
margins: '0 4',
items: buttons
},
me.toField,
{
xtype: 'container',
margins: '0 4',
items: buttons1
},
me.tonewField
]
});


// Must set upward link after first render
innerCt.ownerCt = me;


// Rebind the store so it gets cloned to the fromField
me.bindStore(me.store);


// Set the initial value
me.setRawValue(me.rawValue);
},

onToFieldChange: function() {
this.checkChange();
},
onToFieldChange1: function() {
this.checkChange();
},

getSelections: function(list){
var store = list.getStore(),
selections = list.getSelectionModel().getSelection(),
i = 0,
len = selections.length;

return Ext.Array.sort(selections, function(a, b){
a = store.indexOf(a);
b = store.indexOf(b);

if (a < b) {
return -1;
} else if (a > b) {
return 1;
}
return 0;
});
},


onTopBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = selected.length - 1,
selection;


store.suspendEvents();
for (; i > -1; --i) {
selection = selected[i];
store.remove(selected);
store.insert(0, selected);
}
store.resumeEvents();
list.refresh();
},
onTopBtnClick1 : function() {
var list = this.tonewField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = selected.length - 1,
selection;


store.suspendEvents();
for (; i > -1; --i) {
selection = selected[i];
store.remove(selected);
store.insert(0, selected);
}
store.resumeEvents();
list.refresh();
},


onBottomBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
store.remove(selection);
store.add(selection);
}
store.resumeEvents();
list.refresh();
},
onBottomBtnClick1 : function() {
var list = this.tonewField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
store.remove(selection);
store.add(selection);
}
store.resumeEvents();
list.refresh();
},


onUpBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.max(0, store.indexOf(selection) - 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},
onUpBtnClick1 : function() {
var list = this.tonewField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.max(0, store.indexOf(selection) - 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},


onDownBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
max = store.getCount(),
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.min(max, store.indexOf(selection) + 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},

onDownBtnClick1 : function() {
var list = this.tonewField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
i = 0,
len = selected.length,
max = store.getCount(),
selection,
index;

store.suspendEvents();
for (; i < len; ++i) {
selection = selected[i];
index = Math.min(max, store.indexOf(selection) + 1);
store.remove(selection);
store.insert(index, selection);
}
store.resumeEvents();
list.refresh();
},


onAddBtnClick : function() {
var me = this,
fromList = me.fromField.boundList,
selected = this.getSelections(fromList);

fromList.getStore().remove(selected);
this.toField.boundList.getStore().add(selected);
},

onAddBtnClick1 : function() {
var me = this,
fromList = me.fromField.boundList,
selected = this.getSelections(fromList);

fromList.getStore().remove(selected);
this.tonewField.boundList.getStore().add(selected);
},


onRemoveBtnClick : function() {
var me = this,
toList = me.toField.boundList,
selected = this.getSelections(toList);

toList.getStore().remove(selected);
this.fromField.boundList.getStore().add(selected);
},
onRemoveBtnClick1 : function() {
var me = this,
tonewList = me.tonewField.boundList,
selected = this.getSelections(tonewList);

tonewList.getStore().remove(selected);
this.fromField.boundList.getStore().add(selected);
},




onItemDblClick : function(view) {
var me = this;
if (view == me.toField.boundList){
me.onRemoveBtnClick();
}
else if (view == me.fromField.boundList) {
me.onAddBtnClick();
}
},

onItemDblClick1 : function(view) {
var me = this;
if (view == me.tonewField.boundList){
me.onRemoveBtnClick1();
}
else if (view == me.fromField.boundList) {
me.onAddBtnClick1();
}
},


setRawValue: function(value) {
var me = this,
Array = Ext.Array,
toStore,tonewStore, fromStore, models;


value = Array.from(value);
me.rawValue = value;


if (me.toField) {
toStore = me.toField.boundList.getStore();
fromStore = me.fromField.boundList.getStore();


// Move any selected values back to the fromField
fromStore.add(toStore.getRange());
toStore.removeAll();


// Move the new values over to the toField
models = [];
Ext.Array.forEach(value, function(val) {
var undef,
model = fromStore.findRecord(me.valueField, val, undef, undef, true, true);
if (model) {
models.push(model);
}
});
fromStore.remove(models);
toStore.add(models);
}
if (me.tonewField) {
tonewStore = me.tonewField.boundList.getStore();
fromStore = me.fromField.boundList.getStore();


// Move any selected values back to the fromField
fromStore.add(tonewStore.getRange());
tonewStore.removeAll();


// Move the new values over to the toField
models1 = [];
Ext.Array.forEach(this.newvalue, function(val) {
var undef,
model = fromStore.findRecord(me.valueField, val, undef, undef, true, true);
if (model) {
models1.push(model);
}
});
fromStore.remove(models1);
tonewStore.add(models1);
}


return value;
},


getRawValue: function() {
var me = this,
toField = me.toField,
tonewField = me.tonewField,
rawValue = me.rawValue;


if (toField) {
var rawValue1= Ext.Array.map(toField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});

rawValue = rawValue1;// +","+rawValue2;
}
if (tonewField) {
var rawValue1= Ext.Array.map(toField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});
var rawValue2 = Ext.Array.map(tonewField.boundList.getStore().getRange(), function(model) {
return model.get(me.valueField);
});
var rv2 = 1;
for (prop in rawValue2) {
if(rv2 == 1){
rawValue1.push("grid2_"+rawValue2[prop]);
}else{
rawValue1.push(rawValue2[prop]);
}
rv2++;

}


//rawValue = [3, 4, 6, 'grid2_9'];
rawValue = rawValue1;
}


me.rawValue = rawValue;
return rawValue;
},


/**
* @private Cascade readOnly/disabled state to the sub-fields and buttons
*/
updateReadOnly: function() {
var me = this,
readOnly = me.readOnly || me.disabled;


if (me.rendered) {
me.toField.setReadOnly(readOnly);
me.fromField.setReadOnly(readOnly);
Ext.Array.forEach(me.innerCt.query('button'), function(button) {
button.setDisabled(readOnly);
});
}
},


onDestroy: function() {
Ext.destroyMembers(this, 'innerCt');
this.callParent();
}


});




i passed default value to itemselector is

value: ['7', '8'], //first itemselectory
newvalue: ['9'], //second itemselectory

finally i click save button i get value of two itemselector is

The following will be sent to the server:
ItemSelector1=3%2C4%2C6%2C2%2Cgrid2_7%2C8%2C9&ItemSelector2=7%2C8%2C2%2C4%2Cgrid2_9%2C5%2C6




tell you suggestion