set field type in editor grid based on a combo box selection

[brikonwall]

I am working on an editable grid, that has 3 columns. First column (Param) is an editable textbox, The second column (Field Type) is a ComboBox and third column (Default Value) is a textbox also but the format will get set depending on what was selected in the ComboBox.

Say like, I have "Number" and "Date" as ComboBox selection options. I am trying to accomplish either of the following two:

1. If I select "Number" in the Field Type column, it will force the users to enter only numbers in the Default Value column's editable textbox. If I select "Date", the Default Value textbox will become a date field.

or

2. If I select "Number" in the Field Type column, it will give an emptyText to tell users to enter only numbers. If "Date" is selected, it will show mm/dd/YYYY as emptyText.

Thanks...

[brikonwall]

I am trying to set the editor type to (textfield or numberfield or datefield) of the following cell in EditorGridPanel. The grid has 3 columns. The first column will always be a textfield. Second field is a combo box with options "Number", "Alphanumeric" and "Date". The third column starts without any set editor. Following is what I am trying to achieve.

1stColumn------2ndColumn ------------3rdColumn
some value------Number---------------[NumberField]
some value------Date-----------------[DateField]
some value------Alphanumeric---------[TextField]
some value------Number---------------[NumberField]
some value------Date-----------------[DateField]
some value------Alphanumeric------[TextField]

This is what I have so far. Yes, all I could do is access the a cell's value.

ComboBox.on('select', function (val, e)
          {
            if (val.getValue()=="Number"){
               var anotherval = selectedRecord.get('actualValue');
               alert(anotherval+" number");
            }
            else 
            if (val.getValue()=="Alphanumeric"){
                var anotherval = selectedRecord.get('actualValue');
               alert(anotherval+" alpha");
            }
            else 
            if (val.getValue()=="Date"){
                var anotherval = selectedRecord.get('actualValue');
               alert(anotherval+" date");
            }
          }
      )

I defined the selectedRecord in the EditorGrid's sm config:

sm: new Ext.grid.RowSelectionModel
          (
            {
	      singleSelect: true,
	      listeners:
              {
	        rowselect: function(sm, row, rec)
                {
	          selectedRecord = rec;
                  selectedSubscrEventsRow = row;
                }
	      }
	    }
          ),

[mjlecomte]

here's another place to look in addition to the form faq in my thread in which there's a post on dependent combo boxes. http://extjs.com/forum/showthread.php?t=6412

Not sure about doing this inside a grid though....

[Condor]

You'll have to override getCellEditor to return the correct editor for the third column based on the setting of the type field (and the default editor for the other 2 columns).

[brikonwall]

You'll have to override getCellEditor to return the correct editor for the third column based on the setting of the type field (and the default editor for the other 2 columns).

Condor thanks for the suggestion. I am very new to Ext and learning as I am trying to develop. How would you suggest overriding getCellEditor to return the correct editor? I mean, can you please give me a code snippet.

Thanks....

[brikonwall]

here's another place to look in addition to the form faq in my thread in which there's a post on dependent combo boxes. http://extjs.com/forum/showthread.php?t=6412

Not sure about doing this inside a grid though....

The reason I need to do it in grid is, whatever users enters or edits in that EditorGrid, everything will get saved in a data storage (XML/Json/Database) after user clicks on Submit. Users have option of adding unlimited records in that EditorGrid. So, when the user revisits this EditorGrid window, all the saved data will populate the grid. The grid is made to handle those kind of functions automatically. If I use form, I will have to add form components on the fly (specially the third column as it depends on the second column's value). Also, I will need to come up with functionality of adding or deleting or undoing all changes. Are any of these possible with Form?

[mjlecomte]

Not saying you can't do it with grid, just saying the only discussions I've seen that indicated success was with forms. I saw a few threads that never posted solutions when using a grid. I honestly haven't put that much thought into it....

If you're just using comboboxes in each cell it seems plausible. If you're actually using different editor types, then.......rrrmmmm dunno.

Oh, didn't see condor's message. Yeah, do what he said......

[Condor]

Example:

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

[josh256]

Thanks Condor, your example works great . I use your example to put a editor in a specific cell.

• In IE6 looks fine but in FF the pick button (pick-button.gif) is broken, How can I fix it?
• There's a better way to do it? I'm new using Ext.

    getCellEditor: function(colIndex, rowIndex) {

        if(colIndex=='1' && rowIndex=='0'){
            return this.editors['comb'];
            }        
        return this.editors['text'];

    } 

Thanks a lot for your help

[Condor]

1. Did you set Ext.BLANK_IMAGE_URL correctly?
2. colIndex and rowIndex are numbers, not strings.