Row Expander - Onclick of the row

[pbban]

Hi,

I have implemented Ext.grid.RowExpander for a grid. However the row expands only when the (+) is clicked. However my requirement is that i need to expand the row when user clicks on the row. Also i don't want the (+) to appear.

I am new to Extjs, would you be able to help!

Thanks
pbban

[Condor]

It already does that on 'rowdblclick'. You can modify the RowExpander.onRender method so it also does that on 'rowclick'.

[pbban]

It already does that on 'rowdblclick'. You can modify the RowExpander.onRender method so it also does that on 'rowclick'.

Hi Condor,
Thanks a lot for your reply.

When i dbl-click the row of my grid, it does not expand the row. The row expands only when i click on (+) attached to every row. Am i missing anything? I am using 2.3.0 version

Thanks again
pbban

[Condor]

Yes, Ext 2.3.0 didn't support that yet.

You could change:

Ext.override(Ext.grid.RowExpander, {
    init : function(grid){
        this.grid = grid;
        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);
        view.enableRowBody = true;
        grid.on('render', function(){
            //view.mainBody.on('mousedown', this.onMouseDown, this);
            grid.on('rowclick', this.onRowClick, this);
        }, this);
    },
    onRowClick: function(grid, rowIndex, e) {
        this.toggleRow(rowIndex);
    }
});

[pbban]

Hi,

Thanks for your reply. I am considering upgrading to Extjs 3.3.0 and have downloaded the same. However not able to find the RowExpander.js file in the directory structure.
Would you be able to help me with the location for RowExpander.js

Thanks
Parag

[Condor]

examples/ux/RowExpander.js

[pbban]

Thanks a Ton for the super fast response

[pbban]

Thanks a Ton for the super fast response

I have migrated to Extjs 3.3.0, and am able to perform the click operation on the rows. However not sure how i can remove the (+) symbol that appears with each row. Is there a way to remove that.

Thanks
Pbban

[Condor]

You can remove the image with CSS:

.x-grid3-row-expander {
    background: transparent;
}

or you could configure the entire expander with:

hidden:true