    /*
     * 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
     * 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.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
        hideNavIcons:false,
        imagePath:"",
        iconUp:"up2.gif",
        iconDown:"down2.gif",
        iconLeft:"left2.gif",
        iconRight:"right2.gif",
        iconTop:"top2.gif",
        iconBottom:"bottom2.gif",
        drawUpIcon:true,
        drawDownIcon:true,
        drawLeftIcon:true,
        drawRightIcon:true,
        drawTopIcon:true,
        drawBotIcon:true,
        delimiter:',',
        bodyStyle:null,
        border:false,
        defaultAutoCreate:{tag: "div"},
        /**
         * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
         */
        multiselects:null,

        initComponent: function(){
            Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
            this.addEvents({
                'rowdblclick' : true,
                'change' : true
            });
        },

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

            // Internal default configuration for both multiselects
            var msConfig = [{
                legend: 'Available',
                draggable: true,
                droppable: true,
                width: 100,
                height: 100
            },{
                legend: 'Selected',
                droppable: true,
                draggable: true,
                width: 100,
                height: 100
            }];

            this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
            this.fromMultiselect.on('dblclick', this.onRowDblClick, this);

            this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
            this.toMultiselect.on('dblclick', this.onRowDblClick, this);

            var p = new Ext.Panel({
                bodyStyle:this.bodyStyle,
                border:this.border,
                layout:"table",
                layoutConfig:{columns:3}
            });

            p.add(this.fromMultiselect);
            var icons = new Ext.Panel({header:false});
            p.add(icons);
            p.add(this.toMultiselect);
            p.render(this.el);
            icons.el.down('.'+icons.bwrapCls).remove();

            // ICON HELL!!!
            if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
                this.imagePath+="/";
            this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
            this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
            this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
            this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
            this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
            this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
            var el=icons.getEl();
            this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
            el.createChild({tag: 'br'});
            this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
            this.toTopIcon.on('click', this.toTop, this);
            this.upIcon.on('click', this.up, this);
            this.downIcon.on('click', this.down, this);
            this.toBottomIcon.on('click', this.toBottom, this);
            this.addIcon.on('click', this.fromTo, this);
            this.removeIcon.on('click', this.toFrom, this);
            if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
            if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
            if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
            if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
            if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
            if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

            var tb = p.body.first();
            this.el.setWidth(p.body.first().getWidth());
            p.body.removeClass();

            this.hiddenName = this.name;
            var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
            this.hiddenField = this.el.createChild(hiddenTag);
        },

        doLayout: function(){
            if(this.rendered){
                this.fromMultiselect.fs.doLayout();
                this.toMultiselect.fs.doLayout();
            }
        },

        afterRender: function(){
            Ext.ux.form.ItemSelector.superclass.afterRender.call(this);

            this.toStore = this.toMultiselect.store;
            this.toStore.on('add', this.valueChanged, this);
            this.toStore.on('remove', this.valueChanged, this);
            this.toStore.on('load', this.valueChanged, this);
            this.valueChanged(this.toStore);
        },

        toTop : function() {
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            var records = [];
            if (selectionsArray.length > 0) {
                selectionsArray.sort();
                for (var i=0; i-1; i--) {
                    record = records[i];
                    this.toMultiselect.view.store.remove(record);
                    this.toMultiselect.view.store.insert(0, record);
                    selectionsArray.push(((records.length - 1) - i));
                }
            }
            this.toMultiselect.view.refresh();
            this.toMultiselect.view.select(selectionsArray);
        },

        toBottom : function() {
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            var records = [];
            if (selectionsArray.length > 0) {
                selectionsArray.sort();
                for (var i=0; i 0) {
                for (var i=0; i= 0) {
                        this.toMultiselect.view.store.remove(record);
                        this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
                        newSelectionsArray.push(selectionsArray[i] - 1);
                    }
                }
                this.toMultiselect.view.refresh();
                this.toMultiselect.view.select(newSelectionsArray);
            }
        },

        down : function() {
            var record = null;
            var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
            selectionsArray.sort();
            selectionsArray.reverse();
            var newSelectionsArray = [];
            if (selectionsArray.length > 0) {
                for (var i=0; i 0) {
                for (var i=0; i 0) {
                for (var i=0; i