Thursday, June 6, 2013

ExtJS: Grid: How to get/set values of a specific cell of a row in grid

Imagine you have an ExtJs grid having 3-4 columns and several rows.
Let us consider the below grid.
Please note it has to be an ExtJs grid.

Field Type Control
Name
Age
Sex

Now what I want to do is if I change the "Type" field of any row, the "Control" field of the corresponding row should get set to a defined value automatically.

For eg.
1. Name : I select "Varchar" in Type field - its Control field should get changed to "TextField".


How do I do it? Here it is...

You will have to write your code in the "change" event of the dropdown box.
In our case it will be the "Type" combobox.

 
 listeners: {
                change: function (field, newValue, oldValue) {
                    // if type selected is varchar   
                    if (newValue == 'Varchar') {
                        // get the handler to the grid 
                        var grid = this.up().up();
                        // get selection model of the grid  
                        var selModel = grid.getSelectionModel();
                        // set control of the record to text  
                        //NOTE: 'control' here is the value set in the dataIndex property of the Control combobox  
                        selModel.getSelection()[0].set('control', 'TextField');
                    }
                }
            }

JSFiddle Demo

That's it! Now you can test by changing the type of any row to varchar. Control of the corresponding row will get set to text instantaneously.

Cheers!

4 comments:

  1. Alternatve way to do the same
    http://jsfiddle.net/ypandey/86fZ9/

    ReplyDelete
  2. HI
    I am new to extjs and i am facing a problem like the above post.
    I tried this but i got an error like below.
    'Uncaught TypeError: selModel.getSelection is not a function'
    Y it is coming?
    Please do help me

    ReplyDelete