JSFiddle - React, Tailwind, and code Playground

EXT - grid with variant field editor

by Ben Clayton

HTML

<link rel="stylesheet" href="http://www.infxsolutions.com/script/Ext_V3.0/css/xtheme-gray.css">
<link rel="stylesheet" href="http://www.infxsolutions.com/script/Ext_V3.0/css/ext-all.css">

JavaScript

// http://www.sencha.com/forum/showthread.php?29853-set-field-type-in-editor-grid-based-on-a-combo-box-selection&p=141782&viewfull=1#post141782



var store = new Ext.data.SimpleStore({
	data: [
		['Value 1', 'text', 'text'],
		['Value 2', 'number', 1],
		['Value 3', 'date', new Date()]
	],
	fields: ['name', 'type', 'value']
});

var comboStore = new Ext.data.SimpleStore({
	id: 0,
	data: [
		['text', 'Text'],
		['number', 'Number'],
		['date', 'Date']
	],
	fields: ['type', 'name']
});

var typeEditor = new Ext.form.ComboBox({
	store: comboStore,
	mode: 'local',
	triggerAction: 'all',
	valueField: 'type',
	displayField: 'name',
	editable: false	
});

var typeRenderer = function(value) {
	var rec = comboStore.getById(value);
	return rec ? rec.get('name') : '';
}

var colModel = new Ext.grid.ColumnModel({
	columns: [
		{header: 'Name', dataIndex: 'name', sortable: true, editor: new Ext.form.TextField({})},
		{header: 'Type', dataIndex: 'type', sortable: true, renderer: typeRenderer, editor: typeEditor},
		{header: 'Value', dataIndex: 'value', sortable: true, editable: true}
	],
	editors: {
		'text': new Ext.grid.GridEditor(new Ext.form.TextField({})),
		'number': new Ext.grid.GridEditor(new Ext.form.NumberField({})),
		'date': new Ext.grid.GridEditor(new Ext.form.DateField({}))
	},
	getCellEditor: function(colIndex, rowIndex) {
		var field = this.getDataIndex(colIndex);
		if (field == 'value') {
			var rec = store.getAt(rowIndex);
			return this.editors[rec.get('type')];
		}
		return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
	}
});

var grid = new Ext.grid.EditorGridPanel({
	ds: store,
	cm: colModel
});

Ext.onReady(function(){
	new Ext.Viewport({
		layout: 'fit',
		items: [grid]
	});
});