View Full Version : [solved] Grid Grouping & Renderers ... column not wrapping

4 Jul 2009, 2:52 PM
here is the code:

// espisodes grid (episodesGP)
// columns
var cmEP = new Ext.grid.ColumnModel([
{id:'episodeid',header: "ID", width: 30, sortable: true, hidden: true, dataIndex: 'episodeid'},
{header: '#', width: 30, sortable: true, dataIndex: 'episodeno'},
{header: 'Name', width: 270, renderer: renderEPTopic, sortable: true, dataIndex: 'episodetitle'},
{header: 'Thumb', width: 150, renderer: renderEPThumb, sortable: true, dataIndex: 'episodethumbpath'},
{header: 'Season', width: 50, hidden: true, dataIndex: 'seasonno'}
// group view
var vEP = new Ext.grid.GroupingView({
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Episodes" : "Episode"]})'
// episodesGP grid
var episodesGP = new Ext.grid.GridPanel({
store : ds_episodes,
cm : cmEP,
view : vEP,
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
stripeRows : true

here are the rendering functions:

//func: renderEPTopic
function renderEPTopic(value, p, record){
return String.format( '<span align="justify" width="270"><b>{0}</b><p>{1}</p></span>', value, record.data.episodeplot );
//func: renderEPThumb
function renderEPThumb(value, p, record){
return String.format( '<img src=' + '../../mylin/' + '{0} width="150" height="100" />', value );

thats the datastore:

var ds_episodes = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'general/myqueries.php?a1=302&a2=2&a3=1&a4=1&a5=0',
method: 'POST'
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
{name: 'episodeid', type: 'int'},
{name: 'seasonno', type: 'int'},
{name: 'episodeno', type: 'int'},
{name: 'episodetitle', type: 'string'},
{name: 'episodeplot', type: 'string'},
{name: 'episodeaired', type: 'string'},
{name: 'episodethumbpath', type: 'string'}
sortInfo:{field: 'episodeno', direction: "ASC"},

and attached is a screenshot of the output

My question is, how can i get the second line in the east grid "Name" and function renderEPTopic to be wrapped and not continue in a single line?

thank u all

6 Jul 2009, 9:45 AM
no one?

6 Jul 2009, 10:26 AM
Add this in your CSS Style

.x-grid3-cell-inner, .x-grid3-hd-inner {white-space: normal !important;}

6 Jul 2009, 11:34 AM
Add this in your CSS Style

.x-grid3-cell-inner, .x-grid3-hd-inner {white-space: normal !important;}

Thanks alot :) that fixed it