1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default I want to display one textarea in grid with 4 columns

    I want to display one textarea in grid with 4 columns


    Hi,

    I have 4 columns in grid and I want to display one textarea in all the four columns. how to do this
    here is the screenshot

    textarea.JPG

    here is my code
    Code:
    var colModel = new Ext.grid.ColumnModel({
                columns: [{
                    id: 'investment',
                    header: '',
                    width: 460,
                    sortable: false,
                    dataIndex: 'investment'
                },
                {
                    header: 'IRR',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    viewConfig: {
                        enableRowBody: true
                    },
                    renderer: this.column1,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'msrefNETText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column1'
                },
                {
                    header: 'Equity Multiple',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column2,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'msrefUSDText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column2'
                },
                {
                    header: 'IRR',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column3,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'exitDateText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column3'
                },
                {
                    header: 'Equity Multiple',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column4,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'generalCText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column4'
                }],
                editors: {
                    'text': new Ext.grid.GridEditor(new Ext.form.TextArea({
                        width: 250,
                        disabled: true,
                        align: 'left',
                        id: 'textarea' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    })),
                    'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
                    'date': new Ext.grid.GridEditor(new Ext.form.DateField({ disabled: true, id: 'dateFieldId' + this.dealDetailsInfo.financialProjection.data.Investment.Id, renderer: Ext.util.Format.dateRenderer('m/d/Y') }))
                }
             });

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    extjs-world is on a distinguished road

      0  

    Default


    Do you want to show textarea for specific row or for all rows?

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    I have 5 rows and 4 columns in a editable grid.
    Yes i want to show textarea only in one row

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    extjs-world is on a distinguished road

      0  

    Default


    One of the ways to achieve this is to add the textarea field into the grid row body and remove the column specific values using column renderers. And within grid beforegridedit event disable editing the specific row.
    A detailed example can be found here http://extjs-world.blogspot.com/2011...-multiple.html

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    Hi,

    Its not working for me.
    Can you tell me where you have define "textGridColumnModel" .

    Thanks for your help
    aMaN

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    extjs-world is on a distinguished road

      0  

    Default


    I have defined textGridColumnModel as per my requirements. I thought it is not useful to provide its store/columnmodel definitions in the blog.
    However you can use your own column model. Just add the column renderer and for the row where you want to add the textarea return empty space. (refere to renderer example shown in the blog)
    Please revert if you still have problems.

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    here is my code, please let me know where i am doing wrong

    Code:
    var colModel = new Ext.grid.ColumnModel({
                columns: [{
                    id: 'investment',
                    header: '',
                    width: 460,
                    sortable: false,
                    dataIndex: 'investment'
                },
                {
                    header: 'IRR',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    viewConfig: {
                        enableRowBody: true
                    },
                    renderer: this.column1,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'msrefNETText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column1'
                },
                {
                    header: 'Equity Multiple',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column2,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'msrefUSDText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column2'
                },
                {
                    header: 'IRR',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column3,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'exitDateText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column3'
                },
                {
                    header: 'Equity Multiple',
                    width: 110,
                    sortable: false,
                    align: 'right',
                    renderer: this.column4,
                    editor: new Ext.form.NumberField({
                        disabled: true,
                        id: 'generalCText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    }),
                    dataIndex: 'column4'
                }],
                
                viewConfig : {
                    enableRowBody : true,
                    showPreview: true,
                    getRowClass: function(record,rowIndex, p, ds){
                        if(rowIndex == 6){
                            p.body = "<textarea rows=1 cols=4>";
                            p.body += record.get("docIndex");
                            p.body += "</textarea>";
                        } else {
                            p.body = "";
                        }
                        return 'x-grid3-row-expanded';
                    }
                },
                listeners: {
                    beforeedit: function(editObj){
                        if(editObj.row == 6){
                            return false;
                        }
                    }
                },
                editors: {
                    'text': new Ext.grid.GridEditor(new Ext.form.TextArea({
                        width: 250,
                        disabled: true,
                        align: 'left',
                        id: 'textarea' + this.dealDetailsInfo.financialProjection.data.Investment.Id
                    })),
                    'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
                    'date': new Ext.grid.GridEditor(new Ext.form.DateField({ disabled: true, id: 'dateFieldId' + this.dealDetailsInfo.financialProjection.data.Investment.Id, renderer: Ext.util.Format.dateRenderer('m/d/Y') }))
                },
                getCellEditor: function (colIndex, rowIndex) {
                    if (Ext.getCmp('editableHidden').el.dom.value != "noneditable") {
                        var field = this.getDataIndex(colIndex);
                        if (rowIndex == 2 && (colIndex == 3 || colIndex == 4)) {
                            return this.editors['number'];
                        }
                        if (rowIndex == 4 && (colIndex == 2 || colIndex == 4)) {
                            return this.editors['number'];
                        }
                        if (rowIndex == 5 && (colIndex == 2 || colIndex == 4)) {
                            return this.editors['number'];
                        }
                        /*if (rowIndex == 6 && (colIndex == 1)) {
                            return this.editors['text'];
                        }
                        if (rowIndex == 6 && (colIndex == 2 || colIndex == 3 || colIndex == 4)) {
                            return this.editors['number'];
                        }*/
                        //if(Ext.getCmp('saveBtn').enabled){
                        if (rowIndex == 4 && (colIndex == 1 || colIndex == 3)) {
                            //var rec = store.getAt(rowIndex);
                            //Ext.grid.ColumnModel.setRenderer(colIndex, this.formatDate);
                            return this.editors['date'];
                        }
                        //}    
                        return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
                    }
                }
            });

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    extjs-world is on a distinguished road

      0  

    Default


    In the grid view config for getRowClass you are retrieving docIndex(my sample record item). You have to replace it with your record item e.g : record.get('column2')

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Location
    USA
    Posts
    111
    Vote Rating
    0
    aramaki is on a distinguished road

      0  

    Default


    why do you use grid for that? you a free to specify standalone container with your textarea and bind it with grid to ownerCt, for example.

  10. #10
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    Hey Aramaki

    Can you show me any example or code. how to do this