Ext JS 4 – Wrap Text in One Grid Column

I have a grid that is read only and where I’ve disabled the column menus except for sorting. One column is a “notes” column so the text can easily overflow the cell. By default Ext JS elliptifies the text, but in this case, I just want all the text to display in the cell. I ended up just adding a little bit of css to get it to work.

td.wrap-text div {
    white-space: normal;
}

And in my column definition, used the css class on the td for the grid cell. Below I have a grid panel that occupies the center panel of a border layout.

{
	region: 'center',
	xtype: 'grid',
	store: this.myStore,
	viewConfig: {
		emptyText: 'No data found'
	},
	features: [{ ftype: 'selectable' }],
	columns: [
		{header: 'Date', sortable: true, dataIndex: 'createdDate', xtype: 'datecolumn', format: 'm-d-Y  H:i', flex:1, menuDisabled:true},
		{header: 'Event', sortable: true, dataIndex: 'myEvent', flex:2, menuDisabled:true},
		{header: 'Created By', sortable: true, dataIndex: 'createdBy', flex:2, menuDisabled:true},
		{header: 'Notes', sortable: true, dataIndex: 'description', flex:5, menuDisabled:true, tdCls:'wrap-text'}
	]
};

And, this worked. Even on IE6.

Helpful links:
http://www.learnsomethings.com/2011/08/25/make-all-the-text-in-the-cells-in-only-one-grid-wrap/
http://www.sencha.com/forum/showthread.php?125219-long-text-in-grid-cell

Advertisements

6 comments

  1. Do you have any idea how to change the Row background.. I have tried.. getRowClass method of viewConfig..
    It is not overwriting EXTJS Css..any idea why?

    1. I usually use Firebug or Chrome dev tools to look at the DOM and then use the Ext JS docs to figure out what cls properties there are to set. I usually have to go through a few rounds of trial and error before finding the exact right cls to customize.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s