View Full Version : How to wrap the words in value column of PropertyGrid in ExtJs

28 Apr 2011, 5:19 AM

I have a PropertyGrid in which am setting the source dynamically by using setSource().

var propertyPanel = new Ext.grid.PropertyGrid( {
id : 'class-property-panel',
title : 'Details',
region : 'east',
// layout: 'fit',
stripeRows : true,
collapsible : true,
// columnLines : true,
autoScroll : true,
split: true,
collapsed : false,
border : true,
frame : true,
source : {},
listeners : {
// to disable editable option of the property grid
beforeedit : function(e) {
e.cancel = true;

How I will add a custom render so that the data's in value column will auto wrap for each rows as if the content is very lengthy then there is no way to read the whole content?

Please help

9 Jun 2011, 10:53 AM
A solution to this problem is to create a new column model with a renderer that has a style for word-wrap on the value and when the properties panel is updated, call the reconfigure function to use the column model:

var colModel = new Ext.grid.ColumnModel([
{header: "Name", width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
{header: "Value", width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true,
renderer : function(value, metadata, record) {
return "<p style=\"white-space: normal;word-wrap:break-word;\">" + value + "</p>";

onPropertiesGridUpdate: function(props) {
this.propertiesGrid.reconfigure( this.propertiesGrid.getStore(), colModel );