MultiselectItemSelector多选框

改造自MultiselectItemSelector(http://extjs.com/learn/Extension:Multiselect)。
原有代码在关闭该控件以后，会遗留大量无效代码，因此，自己用一个 panel + 2个grid来实现，暂不支持拖拽。

 

Ext.namespace('Ext.ux')   

Ext.ux.IconPanel = function(config){   

    Ext.apply(this,config);   

    Ext.ux.IconPanel.superclass.constructor.call(this,config);   

}   

  

Ext.extend(Ext.ux.IconPanel,Ext.Panel,{   

    imagePath:'',   

    drawUpIcon:true,   

    drawDownIcon:true,   

    drawLeftIcon:true,   

    drawRightIcon:true,   

    drawTopIcon:true,   

    drawBotIcon:true,   

       

    //style: 'padding-left:5px;padding-right:5px',   

       

    initComponent: function(){   

       

        Ext.ux.IconPanel.superclass.initComponent.call(this);   

        this.addEvents(   

            ''  

        )   

    },   

    onRender: function(ct, position){   

       Ext.ux.IconPanel.superclass.onRender.call(this,ct,position);   

          

       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= this.getEl();   

        if (!this.toSortField) {   

            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.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});   

        el.createChild({tag: 'br'});   

        this.removeIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});   

        el.createChild({tag: 'br'});   

        if (!this.toSortField) {   

            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'}});   

        }   

        if (!this.readOnly) {   

            if (!this.toSortField) {   

                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'; }   

  

    },   

       

    toTop:function(){   

        this.gridsHolder.fireEvent('toTop');   

    },   

    toBottom: function(){   

        this.gridsHolder.fireEvent('toBottom');   

    },   

    up: function(){   

        this.gridsHolder.fireEvent('up');   

    },   

    down: function(){   

        this.gridsHolder.fireEvent('down');   

    },   

    fromTo: function(){   

        this.gridsHolder.fireEvent('fromTo');   

    },   

    toFrom: function(){   

        this.gridsHolder.fireEvent('toFrom');   

    },   

  

    setGridsHoder: function(gridsHolder){   

        this.gridsHolder = gridsHolder;   

    }   

});   

Ext.ux.MultiSelectWin = function(config){   

    Ext.apply(this,config);   

    Ext.ux.MultiSelectWin.superclass.constructor.call(this, config);   

    this.init();   

};   

  

Ext.extend(Ext.ux.MultiSelectWin, Ext.util.Observable,{   

       

    title : '选择窗口',   

    from_legend:'可选',   

    to_legend: '已选',   

    valueField: 'id',   

    displayField: 'name',   

    warningTitle: '提示',   

    minLength:0,   

    maxLength:Number.MAX_VALUE,   

    minLengthText:'至少应选择{0}项',   

    maxLengthText:'最多只能选择 {0}项',   

    /**  

     * 图标面板的config  

     * @type {}  

     */  

    iconConfig:{},   

    targetItem: null,   

    localData:[],   

    selectedData: [],   

    saveFn: Ext.emptyFn,   

    searchFn: Ext.emptyFn,   

    baseParams: null,   

    fieldName: null,   

  

    toSortField:null,   

    fromSortField:null,   

    toSortDir:'ASC',   

    fromSortDir:'ASC',   

    allowDup: false,   

       

    switchToFrom:false,   

    openHeight:320,   

    openWidth:460,   

    ms_height:220,   

    ms_width:200,   

  

  

    init: function(){   

        this.initDataStore();   

           

        this.initComponent();   

    },   

       

    initDataStore: function(){   

        var record = Ext.data.Record.create([   

            {   

                name: this.valueField,   

                type: 'string'  

            },{   

                name: this.displayField,   

                type: 'string'  

        }]);   

        if (this.localMode == true){   

            this.fromStore  = new Ext.data.SimpleStore({   

                fields:[this.valueField, this.displayField]   

            });   

        }   

        else{   

            var baseParams = {   

                    dir : 'asc',   

                    start : 0,   

                    limit : 0   

                };   

  

            if (this.baseParams)   

                baseParams = this.baseParams;   

  

            this.fromStore  = new Ext.data.Store({   

                proxy: new Ext.data.DWRProxy(this.searchFn, true),   

                reader: new Ext.data.ListRangeReader({   

                    totalProperty : 'total',   

                    id : 'id'  

                },record),   

                sortInfo:{field:this.displayField,direction:'ASC'},   

                baseParams : baseParams   

            });   

        }   

           

        this.selectedData = this.targetItem.getArrayValue();          

        this.toStore = new Ext.data.SimpleStore({   

            fields:[this.valueField, this.displayField],   

            data: this.selectedData   

        });   

           

        if(this.allowDup == false){   

            this.fromStore.on('load',function(){   

                this.fromStore.filterBy(function(record){   

                        for (var i=0;i < this.selectedData.length;i++){   

                            if(this.selectedData[i][0] == record.get(this.valueField))   

                                return false;   

                        }   

                        return true;   

                    },this);       

            },this);   

        }   

           

        if(this.localMode == true)   

            this.fromStore.loadData(this.localData);   

        else  

            this.fromStore.load();   

           

    },   

       

    reComputeWH: function(){   

        this.openHeight = this.openHeight;   

        this.openWidth = this.openWidth;   

        this.ms_height = this.openHeight - 100;   

        this.ms_width = (this.openWidth-60)/2;   

    },   

    createIconsPanel: function(){   

        this.iconsPanel = new Ext.ux.IconPanel(this.iconConfig);   

        this.iconsPanel.setGridsHoder(this);           

    },   

    initComponent: function(){   

          

        if(this.openHeight || this.openWidth){   

            this.reComputeWH();   

        }   

        this.addEvents(   

                /**  

                 * @event  

                 */  

                'destroy',   

  

                /**  

                 * @event  

                 */  

                'toTop',   

  

                /**  

                 * @event  

                 */  

                'toBottom',   

  

                /**  

                 * @event  

                 */  

                'up',   

  

                /**  

                 * @event  

                 */  

                'down',   

  

                /**  

                 * @event  

                 */  

                'fromTo',   

  

                /**  

                 * @event  

                 */  

                'toFrom');   

  

        this.on('destroy', this.onDestroy, this);   

        this.on('up', this.onUp, this);   

        this.on('down', this.onDown, this);   

        this.on('toTop', this.onToTop, this);   

        this.on('toBottom', this.onToBottom, this);   

        this.on('fromTo', this.onFromTo, this);   

        this.on('toFrom', this.onToFrom, this);   

           

           

        this.fromGrid = new Ext.grid.GridPanel({   

            title : '可选',   

            hideHeaders:true,   

            width : this.ms_width,   

            height: this.ms_height,   

            autoExpandColumn:'name',   

            layout : 'fit',   

            sm : new Ext.grid.RowSelectionModel(),   

            ds : this.fromStore,   

            cm : new Ext.grid.ColumnModel([{   

                header : "header",   

                sortable : true,   

                dataIndex : this.displayField   

            }]),   

            viewConfig:{forceFit:true}   

        })   

  

        this.fromGrid.on('rowdblclick', this.onFromGriddblclick, this);   

           

        this.toGrid = new Ext.grid.GridPanel({   

            title : '已选',   

            hideHeaders:true,   

            width : this.ms_width,   

            height: this.ms_height,   

            autoExpandColumn:'name',   

            layout : 'fit',   

            sm : new Ext.grid.RowSelectionModel(),   

            ds : this.toStore,   

            cm : new Ext.grid.ColumnModel([{   

                header : "header",   

                sortable : true,   

                dataIndex : this.displayField   

            }]),   

            viewConfig:{forceFit:true}   

        })   

           

        this.toGrid.on('rowdblclick', this.onToGriddblclick, this);   

           

        this.createIconsPanel();   

        this.parentPanel = new Ext.Panel({   

            layout:"table",   

            layoutConfig:{columns:3},   

            items: [this.fromGrid,this.iconsPanel,this.toGrid],   

            frame: true  

        });          

  

        this.selectorWin = new Ext.Window({   

            frame: true,   

            resizable:false,   

            title : this.title,   

            layout:'fit',   

            modal: true,   

            items : [this.parentPanel],   

            width: this.openWidth,   

            height: this.openHeight,   

            buttonAlign:'center',   

            buttons:[{   

                text: '确定',   

                handler: function(){   

                  var records = this.toStore.getRange();   

                  if(this.validateValue(records) == false)   

                     return;   

                  var values = [];   

                  var selectedValue = '';   

                  var selectedText = '';   

                     

                  for (var i=0; i < records.length; i++){   

                    var temp = [];   

                    var v = records[i].get(this.valueField);   

                    var t = records[i].get(this.displayField);   

                    temp.push(v);   

                    temp.push(t);   

                    values.push(temp);   

                       

                    if(selectedValue == ''){   

                       selectedValue = v;   

                       selectedText = t;   

                    }   

                    else{   

                        selectedValue = selectedValue + ',' + v;   

                        selectedText = selectedText + ',' + t;   

                    }   

                  }   

                  this.targetItem.setValue(values);   

                  var formValues = queryPanel.getFormValues();   

                  Ext.apply(formValues,this.baseParams);   

                  formValues.selectedValue = selectedValue;   

                  formValues.selectedText = selectedText;   

                  var fn = this.saveFn.createSequence(function(returnData){});   

                  fn(formValues);   

                     

                  this.selectorWin.close();   

                },   

                scope:this  

            },{    

                text:'取消',   

                handler: function(){   

                    this.selectorWin.close();   

                },   

                scope: this  

            }]   

        })   

           

        this.selectorWin.show();   

    },   

       

    validateValue : function(value){   

        if (value.length < this.minLength) {   

            Ext.Msg.show({   

               title: this.warningTitle,   

               msg: String.format(this.minLengthText, this.minLength),   

               buttons: Ext.Msg.OK,   

               icon: Ext.MessageBox.INFO   

            });   

            return false;   

        }   

        if (value.length > this.maxLength) {   

            Ext.Msg.show({   

               title: this.warningTitle,   

               msg: String.format(this.maxLengthText, this.maxLength),   

               buttons: Ext.Msg.OK,   

               icon: Ext.MessageBox.INFO   

            });   

            return false;   

        }   

        return true;   

    },   

    onFromGriddblclick: function(){   

        this.fireEvent('fromTo');   

    },   

    onToGriddblclick: function(){   

        this.fireEvent('toFrom');   

    },   

    onUp:function(){   

        var store = this.toStore;   

        var sm = this.toGrid.getSelectionModel();   

        var data = sm.getSelections();   

           

        var selectionsArray = [];   

        for (var i=0; i < data.length; i++){   

            selectionsArray.push(store.indexOf(data[i]));   

        }   

        var record = null;   

        selectionsArray.sort();   

        var newSelectionsArray = [];   

        if (selectionsArray.length > 0) {   

            for (var i=0; i<selectionsArray.length; i++) {   

                record = store.getAt(selectionsArray[i]);   

                if ((selectionsArray[i] - 1) >= 0) {   

                    store.remove(record);   

                    store.insert(selectionsArray[i] - 1, record);   

                    newSelectionsArray.push(selectionsArray[i] - 1);   

                }   

            }   

           this.toGrid.getView().refresh();   

           sm.selectRows(newSelectionsArray);   

        }       

    },   

    onDown: function(){   

        var store = this.toStore;   

        var sm = this.toGrid.getSelectionModel();   

        var data = sm.getSelections();   

           

        var selectionsArray = [];   

        for (var i=0; i < data.length; i++){   

            selectionsArray.push(store.indexOf(data[i]));   

        }   

        var record = null;   

        selectionsArray.sort();   

        selectionsArray.reverse();   

        var newSelectionsArray = [];   

        if (selectionsArray.length > 0) {   

            for (var i=0; i<selectionsArray.length; i++) {   

                record = store.getAt(selectionsArray[i]);   

                if ((selectionsArray[i] + 1) < store.getCount()) {   

                    store.remove(record);   

                    store.insert(selectionsArray[i] + 1, record);   

                    newSelectionsArray.push(selectionsArray[i] + 1);   

                }   

            }   

            this.toGrid.getView().refresh();   

            sm.selectRows(newSelectionsArray);   

        }   

    },   

    onToTop: function(){   

        var store = this.toStore;   

        var sm = this.toGrid.getSelectionModel();   

        var data = sm.getSelections();   

           

        var selectionsArray = [];   

        for (var i=0; i < data.length; i++){   

            selectionsArray.push(store.indexOf(data[i]));   

        }   

        var records = [];   

        if (selectionsArray.length > 0) {   

            selectionsArray.sort();   

            for (var i=0; i<selectionsArray.length; i++) {   

                record = store.getAt(selectionsArray[i]);   

                records.push(record);   

            }   

            selectionsArray = [];   

            for (var i=records.length-1; i>-1; i--) {   

                record = records[i];   

                store.remove(record);   

                store.insert(0, record);   

                selectionsArray.push(((records.length - 1) - i));   

            }   

        }   

        this.toGrid.getView().refresh();   

        sm.selectRows(selectionsArray);   

     },   

    onToBottom: function(){   

        var store = this.toStore;   

        var sm = this.toGrid.getSelectionModel();   

        var data = sm.getSelections();   

           

        var selectionsArray = [];   

        for (var i=0; i < data.length; i++){   

            selectionsArray.push(store.indexOf(data[i]));   

        }   

        var records = [];   

        if (selectionsArray.length > 0) {   

            selectionsArray.sort();   

            for (var i=0; i<selectionsArray.length; i++) {   

                record = store.getAt(selectionsArray[i]);   

                records.push(record);   

            }   

            selectionsArray = [];   

            for (var i=0; i<records.length; i++) {   

                record = records[i];   

                store.remove(record);   

                store.add(record);   

                selectionsArray.push((store.getCount()) - (records.length - i));   

            }   

        }   

        this.toGrid.getView().refresh();   

        sm.selectRows(selectionsArray);   

    },   

    onFromTo: function(){   

  

        var records = this.fromGrid.getSelectionModel().getSelections();   

    

        var selectionsArray = [];   

        for (var i=0; i < records.length; i++){   

            selectionsArray.push(this.fromStore.indexOf(records[i]));   

        }   

        if (selectionsArray.length > 0) {   

            if(!this.allowDup)   

                selectionsArray = [];   

            for (var i=0; i<records.length; i++) {   

                record = records[i];   

                if(this.allowDup){   

                    var x=new Ext.data.Record();   

                    record.id=x.id;   

                    delete x;      

                    this.toStore.add([record]);   

                }else{   

                    this.fromStore.remove(record);   

                    this.toStore.add([record]);   

                    selectionsArray.push((this.toStore.getCount() - 1));   

                }   

            }   

        }   

        this.toGrid.getView().refresh();   

        this.fromGrid.getView().refresh();   

        if(this.toSortField)   

            this.toStore.sort(this.toSortField, this.toSortDir);   

        if(this.allowDup)   

            this.fromGrid.getSelectionModel().selectRows(selectionsArray);   

        else    

            this.toGrid.getSelectionModel().selectRows(selectionsArray);       

    },   

    onToFrom: function(){   

        var records = this.toGrid.getSelectionModel().getSelections();    

        var selectionsArray = [];   

        if (records.length > 0) {   

               

            for (var i=0; i<records.length; i++) {   

                record = records[i];   

                this.toStore.remove(record);   

                if(!this.allowDup){   

                    this.fromStore.add([record]);   

                    selectionsArray.push((this.fromStore.getCount() - 1));   

                }   

            }   

        }   

        this.fromGrid.getView().refresh();   

        this.toGrid.getView().refresh();   

        if(this.fromSortField)   

            this.fromStore.sort(this.fromSortField, this.fromSortDir);   

        this.fromGrid.getSelectionModel().selectRows(selectionsArray);       

    },   

       

    onDestroy:function(){   

  

        this.toStore = null;   

        this.toGrid = null;   

        this.fromStore = null;   

        this.fromGrid = null;   

    }   

});   

Ext.reg('multiSelectWin',Ext.ux.MultiSelectWin);  

 

截图