Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Ext.ux.form.MultiSelectGrid

  1. #1
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134

    Default Ext.ux.form.MultiSelectGrid

    plugin:

    Code:
    Ext.ns('Ext.ux.form');		
    Ext.ux.form.MultiSelectGrid = Ext.extend(Ext.form.Field,{
    	delimiter: ',',
    	anchor: 0,
    	minMultiSelectGridections:0,
    	valueField:1,
    	unselectRowText: this.unselectRowText || 'Unselect All',
    	unselectRowTooltip: this.unselectTooltip || 'Unselect the all item',
    	unselectRowIconCls: this.unselectIconCls || 'unselectOption',	
    
    	selectRowText: this.selectRowText || 'Select All',
    	selectRowTooltip: this.selectTooltip || 'Select the all item',
    	selectRowIconCls: this.selectIconCls || 'selectOption',	
    
    	reloadText: this.reloadText || 'Reload',
    	reloadTooltip: this.reloadTooltip || 'Reload the all item',
    	reloadIconCls: this.reloadIconCls || 'reloadOption',		
    	
    	blankText:Ext.form.TextField.prototype.blankText,
    	maxMultiSelectGridections:Number.MAX_VALUE,
    	minMultiSelectGridectionsText: this.minMultiSelectGridectionsText || 'Minimum {0} item(s) required',
    	maxMultiSelectGridectionsText: this.maxMultiSelectGridectionsText || 'Maximum {0} item(s) allowed',
    	defaultAutoCreate: {
    		tag: "div"
    	},
    	autoScroll: false,
    	scroll: false,
    	initComponent: function(config){
    		var css = '.ux-scroll-xy {overflow-y: hidden; overflow-x: hidden;}';
    		Ext.util.CSS.createStyleSheet(css);
    		this.addClass('ux-scroll-xy');
    		Ext.apply(this, config);
    		Ext.apply(this.initialConfig, config);
    		
    
    		Ext.ux.form.MultiSelectGrid.superclass.initComponent.apply(this, arguments);
            this.addEvents({
                'dblclick' : true,
                'click' : true,
                'change' : true
            });
    	},
    	onRender: function(ct, position){
    		Ext.ux.form.MultiSelectGrid.superclass.onRender.call(this, ct, position);
    		var fs = this.fs = new Ext.form.FieldSet({
    			title: this.legend,
    			renderTo: this.el,
    			width: this.width,
    			height: this.height,
    			style: "padding:0;",
    			tbar: this.tbar
    		});
    		
    		this.csm = new Ext.grid.CheckboxSelectionModel();
    		this.gird = new Ext.grid.GridPanel({
    			border: false,
    			store: this.store,
    			stripeRows: true,
    			height: this.height,
    			layout: 'fit',
    	         viewConfig: {
                    forceFit: true
                },
    			hideHeaders: true,
    			loadMask: true,
    			autoExpandColumn: this.valueField,
    			cm: new Ext.grid.ColumnModel({
    				columns: [this.csm, {
    					header: this.valueField,
    					id: this.valueField,
    					dataIndex: this.valueField
    				}]
    			}),
    			sm: this.csm,
    			bbar: [{
    				text: this.selectRowText,
    				tooltip: this.selectRowTooltip,
    				iconCls: this.selectRowIconCls,
    				scope: this,
    				handler: this.selectGridRecords
    			},
    			'-', {
    				text: this.unselectRowText,
    				tooltip: this.unselectRowTooltip,
    				iconCls: this.unselectRowIconCls,
    				scope: this,
    				handler: this.unselectGridRecords
    			},
    			'-', {
    				text: this.reloadText,
    				tooltip: this.reloadTooltip,
    				iconCls: this.reloadIconCls,
    				scope: this,
    				handler: this.reload
    			}]			
    		});
    		fs.add(this.gird);
    		this.hiddenName = this.name || Ext.id();
    		var hiddenTag = {
    			tag: "input",
    			type: "hidden",
    			value: "",
    			name: this.hiddenName
    		};
            this.gird.on('click', this.onViewClick, this);
    		this.hiddenField = this.el.createChild(hiddenTag);
    		this.hiddenField.dom.disabled = this.hiddenName != this.name;
    		fs.doLayout();
    		if( this.store.proxy ) { 
    		
    			this.store.load();
    			this.store.on('load',function(){
    				if(this.value){
    					this.setValue(this.value);
    				}
    			}, this);
    		}
    	},
    	afterRender: function(){
    		Ext.ux.form.MultiSelectGrid.superclass.afterRender.call(this);
    	},
    	getValue: function(){
    		var ids = new Array();
    		if (typeof(this.gird) != 'undefined' && this.gird.getSelectionModel().getSelected()) {
    			Ext.each(this.gird.getSelectionModel().getSelections(), function(item, index){
    				ids[index] = item.data[this.valueId];
    			}, this);
    			return ids.join(',');
    		}
    		return ids;
    	},
    	
    	setValue: function(value){
    		if(value != '' && value != null){
    		var set = value.toString().split(',');
    		this.v = set;
    		this.gird.getSelectionModel().getSelections();
    		Ext.each(this.gird.store.data.items, function(item, index){
    			Ext.each(set, function(item1, index1){
    				if (item.data[this.valueId] == item1) {
    					this.gird.getSelectionModel().selectRow(index, true);
    				}
    			}, this);
    		}, this);
    		
    		}
    		else{
    			this.gird.getSelectionModel().clearSelections();
    		}
    		this.hiddenField.dom.value = this.getValue();
    		this.validate();
    	},
    	validateValue: function(value){
    		if (this.getValue() != '') {
    			value = this.getValue().toString().split(',');
    		}
    		else {
    			value.length = 0;
    		}
    		
    		if (value.length < 1){
    			if (this.allowBlank) {
    				this.clearInvalid();
    				return true;
    			}
    			else {
    				this.markInvalid(this.blankText);
    				return false;
    			}
    		}
    		if (value.length < this.minMultiSelectGridections) {
    			this.markInvalid(String.format(this.minMultiSelectGridectionsText, this.minMultiSelectGridections));
    			return false;
    		}
    		if (value.length > this.maxMultiSelectGridections) {
    			this.markInvalid(String.format(this.maxMultiSelectGridectionsText, this.maxMultiSelectGridections));
    			return false;
    		}
    		return true;
    	},
        onViewClick: function(vw, index, node, e) {
            this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
            this.hiddenField.dom.value = this.getValue();
            this.fireEvent('click', this, e);
            this.validate();
        },
    	disable: function(){
    		this.disabled = true;
    		this.hiddenField.dom.disabled = true;
    		this.fs.disable();
    	},
    	enable: function(){
    		this.disabled = false;
    		this.hiddenField.dom.disabled = false;
    		this.fs.enable();
    	},
    	reload: function(){
    		if( this.store.proxy ) { 
    			this.store.on('load',function(){
    				if(this.v){
    				this.setValue(this.v);
    				}
    			}, this);	
    			this.store.load();
    		}
    	},
    	unselectGridRecords: function () {
    		this.gird.getSelectionModel().clearSelections();
    		this.hiddenField.dom.value = this.getValue();
    		this.validate();
    	},
    	selectGridRecords: function () {
    		this.gird.getSelectionModel().selectAll();
    		this.hiddenField.dom.value = this.getValue();		
    		this.validate();
    	}	
    }); 
    Ext.reg('multiselectgrid', Ext.ux.form.MultiSelectGrid);
    use:
    Code:
    ....
    var myfield = {
    		xtype: 'multiselectgrid',
    		fieldLabel: 'field Label',
    		unselectRowText: 'Unselect All',
    		unselectRowTooltip: 'Unselect the all item',
    		selectRowText: 'Select All',
    		selectRowTooltip: 'Select the all item',
    		reloadText: 'Reload',
    		reloadTooltip: 'Reload the all item',
    		minMultiSelectGridectionsText: 'Minimum {0} item(s) required',
    		maxMultiSelectGridectionsText: 'Maximum {0} item(s) allowed',
    		labelStyle: 'font-weight:bold',
    		name: 'list_ids',
    		width: 592,
    		height: 200,
    		bodyStyle: 'background-color:#ffffff;',
    		allowBlank: false,
    		enableJson: true,
    		store: new Ext.data.JsonStore({
    			proxy: new Ext.data.HttpProxy({
    				url: 'list.php',
    				method: 'post'
    			}),
    			fields: [{
    				name: 'list_id'
    			}, {
    				name: 'list_name'
    			}],
    			root: 'rows'
    		}),
    		valueField: 'list_name',
    		valueId: 'list_id',
    		labelField: 'Label'
    };
    
    ....
    plugin1.png


    plugin1b.png

    Plugin by paul999 & demon222 ;-)

  2. #2
    Ext User
    Join Date
    May 2010
    Location
    Poland, Warsaw
    Posts
    6

    Default

    I'm going to do documentation...

    If I'll be able, I'll write!

    ------------------------------------------

    Ext.ux.form.MultiSelectGrid
    Ext.ux.form.OptionsGrid

  3. #3
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134

    Default

    This plugin has been modified to support Ext.data.SimpleStore
    Regards.

  4. #4

    Default

    thanks, let me try it first !

  5. #5

    Default

    nice job mates! looks greate!

    it's very usefull...

  6. #6
    Ext User
    Join Date
    May 2010
    Location
    Poland, Warsaw
    Posts
    6

    Default

    I fixed a bug for IE.


    Replace:
    PHP Code:
                hideHeaderstrue,
                
    loadMasktrue,
                
    autoExpandColumnthis.valueField,
                
    cm: new Ext.grid.ColumnModel({
                    
    columns: [this.csm, {
                        
    headerthis.valueField,
                        
    idthis.valueField,
                        
    dataIndexthis.valueField,
                       
    width'100%'
                    
    }] 
    On:

    PHP Code:
                hideHeaderstrue,
                
    loadMasktrue,
                
    autoExpandColumnthis.valueField,
                
    cm: new Ext.grid.ColumnModel({
                    
    columns: [this.csm, {
                        
    headerthis.valueField,
                        
    idthis.valueField,
                        
    dataIndexthis.valueField
                    
    }] 

    ------------------------------------------

    Ext.ux.form.MultiSelectGrid
    Ext.ux.form.OptionsGrid

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    566

    Default

    This looks great. How do I preset the values?

  8. #8
    Ext User
    Join Date
    May 2010
    Location
    Poland, Warsaw
    Posts
    6

    Default

    PHP Code:
    .setValue('1,2,3,5'); 
    Or, load on the form...

    PHP Code:
    data: {"name""1,2,3,4"


    ------------------------------------------

    Ext.ux.form.MultiSelectGrid
    Ext.ux.form.OptionsGrid

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    566

    Default

    Thanks. Seems the values were not taking in IE8. I changed the code slightly and it seems to work. You may want to review the change to make sure I did not break something else.

    I just added the value property to my config.

    value: '1,3'

    Fo the change, I moved the "if( this.store.proxy ) { " part after doLayout

    Code:
    	onRender: function(ct, position){
    		Ext.ux.form.MultiSelectGrid.superclass.onRender.call(this, ct, position);
    		var fs = this.fs = new Ext.form.FieldSet({
    			title: this.legend,
    			renderTo: this.el,
    			width: this.width,
    			height: this.height,
    			style: "padding:0;",
    			tbar: this.tbar
    		});
    		
    		this.csm = new Ext.grid.CheckboxSelectionModel();
    		this.gird = new Ext.grid.GridPanel({
    			border: false,
    			store: this.store,
    			stripeRows: true,
    			height: this.height,
    			layout: 'fit',
    	         viewConfig: {
                    forceFit: true
                },
    			hideHeaders: true,
    			loadMask: true,
    			autoExpandColumn: this.valueField,
    			cm: new Ext.grid.ColumnModel({
    				columns: [this.csm, {
    					header: this.valueField,
    					id: this.valueField,
    					dataIndex: this.valueField
    				}]
    			/*hideHeaders: true,
                loadMask: true,
                autoExpandColumn: this.valueField,
                cm: new Ext.grid.ColumnModel({
                    columns: [this.csm, {
                        header: this.valueField,
                        id: this.valueField,
                        dataIndex: this.valueField,
                       width: '100%'
                    }] */
    			}),
    			sm: this.csm,
    			bbar: [{
    				text: this.selectRowText,
    				tooltip: this.selectRowTooltip,
    				iconCls: this.selectRowIconCls,
    				scope: this,
    				handler: this.selectGridRecords
    			},
    			'-', {
    				text: this.unselectRowText,
    				tooltip: this.unselectRowTooltip,
    				iconCls: this.unselectRowIconCls,
    				scope: this,
    				handler: this.unselectGridRecords
    			},
    			'-', {
    				text: this.reloadText,
    				tooltip: this.reloadTooltip,
    				iconCls: this.reloadIconCls,
    				scope: this,
    				handler: this.reload
    			}]			
    		});
    		//moved this part to end or this method
    		/*if( this.store.proxy ) { 
    		
    			this.store.load();
    			this.store.on('load',function(){
    				if(this.value){
    					this.setValue(this.value);
    					console.log(this.value);
    				}
    				
    			}, this);
    		}*/
    		fs.add(this.gird);
    		this.hiddenName = this.name || Ext.id();
    		var hiddenTag = {
    			tag: "input",
    			type: "hidden",
    			value: "",
    			name: this.hiddenName
    		};
            this.gird.on('click', this.onViewClick, this);
    		this.hiddenField = this.el.createChild(hiddenTag);
    		this.hiddenField.dom.disabled = this.hiddenName != this.name;
    		fs.doLayout();
    		if( this.store.proxy ) { 
    		
    			this.store.load();
    			this.store.on('load',function(){
    				if(this.value){
    					this.setValue(this.value);
    					console.log(this.value);
    				}
    				
    			}, this);
    		}
    	},

  10. #10
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134

    Default

    Thanks for testing this plugin, and the correctness of the action in IE8. The code has been modified to Your uwagi.Mam hope you are happy with this plugin. If you have any comments or suggestions, please write ...
    greet
    Radek

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: 29 Apr 2010, 6:00 AM
  2. Replies: 3
    Last Post: 16 Apr 2010, 4:42 AM
  3. Problem with select field in Ext.form.ComboBox in Ext.form.FormPanel
    By philiparad in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 9 Feb 2010, 11:03 PM
  4. Replies: 6
    Last Post: 27 Jul 2009, 11:19 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •