Results 1 to 2 of 2

Thread: Ext.ux.form.OptionsGrid

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

    Default Ext.ux.form.OptionsGrid

    Plugin:

    Code:
    Ext.ns('Ext.ux.form');
    Ext.ux.form.OptionsGrid = Ext.extend(Ext.form.Field, {
    	removeRowText: this.removeRowText || 'Remove',
    	clearRowText: this.removeRowText || 'Clear',
    	addRowText: this.addRowText || 'Add',
    	addRowTooltip: this.addTooltip || 'Add a new row',
    	addRowIconCls: this.addIconCls || 'addOption',
    	removeRowTooltip: this.removeTooltip || 'Remove the selected item',
    	clearRowTooltip: this.removeTooltip || 'Clear the all item',
    	removeRowIconCls: this.removeIconCls || 'removeOption',
    	clearRowIconCls: this.clearIconCls || 'clearOption',
    	headerRowName: this.headerRowName || 'Name',
    	headerRowValue: this.headerRowValue || 'Value',
    	validGrid: true,
    	repeatText: this.repeatText || 'Double value in name',
    	delimiter: ',',
    	anchor: 0,
    	minSelections: 0,
    	enableJson: true,
    	firstSeparator: '|',
    	secondSeparator: ',',
    	valueField: 1,
    	blankText: Ext.form.TextField.prototype.blankText,
    	maxSelections: Number.MAX_VALUE,
    	minSelectionsText: this.minSelectionsText || 'Minimum {0} item(s) required',
    	maxSelectionsText: this.maxSelectionsText || 'Maximum {0} item(s) allowed',
    	confirmDelete: this.confirmDelete || 'Are you sure you want to carry out the operation?',
    	warningDelete: this.warningDelete || 'at least a selection of information, delete!',
    	defaultAutoCreate: {
    		tag: "div"
    	}, 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.OptionsGrid.superclass.initComponent.apply(this, arguments);
    		this.addEvents({
    			'dblclick': true,
    			'click': true,
    			'change': true
    		});
    	}, onRender: function (ct, position) {
    		Ext.ux.form.OptionsGrid.superclass.onRender.call(this, ct, position);
    		this.fs = new Ext.form.FieldSet({
    			title: this.legend,
    			width: this.width,
    			height: this.height,
    			layout: 'fit',
    			renderTo: this.el,
    			style: "padding:0;",
    			tbar: this.tbar
    		});
    
    		this.csm = new Ext.grid.CheckboxSelectionModel();
    		this.grid = new Ext.grid.EditorGridPanel({
    			border: false,
    			stripeRows: true,
    			width: this.width,
    			enableColumnHide: false,
    			enableHdMenu: false,
    			layout: 'fit',
    			viewConfig: {
    				forceFit: true
    			}, loadMask: true,
    			clicksToEdit: 1,
    			store: new Ext.data.SimpleStore({
    				fields: [this.valueName, this.valueData]
    			}),
    			cm: new Ext.grid.ColumnModel({
    				menuDisabled: true,
    				columns: [{
    					header: this.headerRowName,
    					id: this.valueName,
    					name: 'name',
    					dataIndex: 'name',
    					editor: new Ext.form.TextField({
    						allowBlank: false
    					})
    				}, {
    					header: this.headerRowValue,
    					id: this.valueData,
    					name: 'value',
    					dataIndex: 'value',
    					editor: new Ext.form.TextField({
    						allowBlank: false
    					})
    				}]
    			}),
    			sm: this.csm,
    			bbar: [{
    				text: this.addRowText,
    				tooltip: this.addRowTooltip,
    				iconCls: this.addRowIconCls,
    				scope: this,
    				handler: this.setRecord
    			}, '-', {
    				text: this.removeRowText,
    				tooltip: this.removeRowTooltip,
    				iconCls: this.removeRowIconCls,
    				scope: this,
    				handler: this.removeRecord
    			}, '-', {
    				text: this.clearRowText,
    				tooltip: this.clearRowTooltip,
    				iconCls: this.clearRowIconCls,
    				scope: this,
    				handler: this.clearRecords
    			}]
    		});
    		this.fs.add(this.grid);
    		this.hiddenName = this.name || Ext.id();
    		var hiddenTag = {
    			tag: "input",
    			type: "hidden",
    			value: "",
    			name: this.hiddenName
    		};
    		this.grid.on('click', this.onViewClick, this);
    		this.hiddenField = this.el.createChild(hiddenTag);
    		this.hiddenField.dom.disabled = this.hiddenName != this.name;
    		this.fs.doLayout();
    	}, afterRender: function () {
    		Ext.ux.form.OptionsGrid.superclass.afterRender.call(this);
    	}, setRecord: function () {
    		var n = this.grid.getStore().getCount();
    		var rec = this.grid.getStore().recordType;
    		var p = new rec({
    			id: n + 1
    		});
    		this.grid.stopEditing();
    		this.grid.store.insert(n, p);
    		this.grid.startEditing(n, 0);
    	}, removeRecord: function (grid, rowIndex, e) {
    		this.grid.stopEditing();
    		var selections = this.grid.getSelectionModel();
    		var records = selections.getSelections();
    		if (typeof(records) == 'undefined' || parseInt(records.length) == 0) {
    			Ext.MessageBox.alert('warning', this.warningDelete);
    		} else {
    			Ext.MessageBox.confirm('prompt box', this.confirmDelete, function (btn) {
    				if (btn == 'yes') {
    					if (records) {
    						Ext.each(records, this.grid.store.remove, this.grid.store);
    						this.hiddenField.dom.value = this.getValue();
    					}
    				}
    			}, this);
    		}
    		this.validate();
    	}, getValue: function () {
    		var data = new Array();
    		if (this.grid.store.getRange().length != 0) {
    			Ext.each(this.grid.store.getRange(), function (item, index) {
    				data[index] = item.data;
    			}, this);
    			return Ext.util.JSON.encode(data);
    		}
    		return null;
    	}, gridValid: function () {
    		var arr = new Array();
    		var values = new Array();
    		var valid = true;
    		var arr = Ext.util.JSON.decode(this.getValue());
    		var a;
    
    		Ext.each(arr, function (item, index) {
    			values[index] = item['name'];
    			if (!item['name'] /* || !item['value'] */ ) {
    				valid = false;
    				this.markInvalid(this.blankText);
    			}
    		}, this);
    
    		for (i = 0; i < values.length; i++) {
    			a = 0;
    			for (j = 0; j < values.length; j++) {
    				if (values[i] && values[j]) {
    					if (values[i] == values[j]) {
    						if (a >= 1) {
    							valid = false;
    							this.markInvalid(this.repeatText);
    						}
    						a++;
    					}
    				}
    			}
    		}
    
    		return valid;
    	}, setValue: function (value) {
    		if (value == '') return false;
    		if (!this.enableJson) {
    			var records = new Array();
    			var vv = new Array();
    			value = value.split(this.firstSeparator);
    			Ext.each(value, function (item, index) {
    				vv = item.split(this.secondSeparator);
    				records[index] = new Array();
    				records[index]['name'] = vv[0];
    				records[index]['value'] = vv[1];
    			}, this);
    		}
    		else {
    			var records = Ext.util.JSON.decode(value);
    		}
    		var rec = this.grid.getStore().recordType;
    		Ext.each(records, function (item, index) {
    			this.grid.store.insert(index, new rec(item));
    		}, this);
    		this.validate();
    	}, clearRecords: function () {
    		this.grid.store.removeAll();
    		this.hiddenField.dom.value = this.getValue();
    		this.validate();
    	}, validateValue: function (value) {
    		value = this.grid.store.getRange();
    		if (value.length < 1) {
    			if (this.allowBlank) {
    				this.clearInvalid();
    				return true;
    			}
    			else {
    				this.markInvalid(this.blankText);
    				return false;
    			}
    		}
    		if (this.validGrid) {
    			if (!this.gridValid()) {
    				return false;
    			}
    		}
    		if (value.length < this.minSelections) {
    			this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
    			return false;
    		}
    		if (value.length > this.maxSelections) {
    			this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
    			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();
    		this.gridValid();
    	}, disable: function () {
    		this.disabled = true;
    		this.hiddenField.dom.disabled = true;
    		this.grid.disable();
    	}, enable: function () {
    		this.disabled = false;
    		this.hiddenField.dom.disabled = false;
    		this.grid.enable();
    	}
    });
    Ext.reg('optionsgrid', Ext.ux.form.OptionsGrid);
    use:

    Code:
    var myfield =  {
    			xtype:'optionsgrid',
    			fieldLabel: 'Label',
    			labelStyle: 'font-weight:bold',
    			name: 'field_option',
    			height: 200,
    			width: 588	
    	};
    plugin2.png


    plugin2b.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 you have any questions, write the post

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

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

Similar Threads

  1. Replies: 2
    Last Post: 29 Apr 2010, 6:00 AM
  2. Replies: 3
    Last Post: 16 Apr 2010, 4:42 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
  •