1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default Unanswered: how more than one item selector use in a window?

    Unanswered: how more than one item selector use in a window?


    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

    download.jpg

    also i attached my js file
    Code:
    /*
    
    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
    Last edited by ps_arunkumar; 15 Feb 2013 at 3:56 AM. Reason: remove unwanted line

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Answers
    3504
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So you want to get the data from the two right item selectors when the getValue is executed?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default getValue get only first itemselector not second?

    getValue get only first itemselector not second?


    Hi,

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

    main script
    Code:
    /*
    
    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

    Code:
    /*
    
    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
    Code:
     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
    Last edited by ps_arunkumar; 17 Feb 2013 at 8:41 PM. Reason: add some content

Thread Participants: 1