1. #1
    Ext User brikonwall's Avatar
    Join Date
    Jan 2008
    Location
    Falls Chruch, VA, USA
    Posts
    23
    Vote Rating
    0
    brikonwall is on a distinguished road

      0  

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

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


    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...

  2. #2
    Ext User brikonwall's Avatar
    Join Date
    Jan 2008
    Location
    Falls Chruch, VA, USA
    Posts
    23
    Vote Rating
    0
    brikonwall is on a distinguished road

      0  

    Question


    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.

    Code:
    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:

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

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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....

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

  5. #5
    Ext User brikonwall's Avatar
    Join Date
    Jan 2008
    Location
    Falls Chruch, VA, USA
    Posts
    23
    Vote Rating
    0
    brikonwall is on a distinguished road

      0  

    Exclamation


    Quote Originally Posted by Condor View Post
    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....

  6. #6
    Ext User brikonwall's Avatar
    Join Date
    Jan 2008
    Location
    Falls Chruch, VA, USA
    Posts
    23
    Vote Rating
    0
    brikonwall is on a distinguished road

      0  

    Question


    Quote Originally Posted by mjlecomte View Post
    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?

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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......

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Example:

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

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Santiago, Chile
    Posts
    10
    Vote Rating
    0
    josh256 is on a distinguished road

      0  

    Default I have 2 questions

    I have 2 questions


    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.

    PHP Code:

        getCellEditor
    : function(colIndexrowIndex) {

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

        } 


    Thanks a lot for your help

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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