View Full Version : Next line in Grid header.

7 Oct 2013, 3:52 AM
I want to display grid header text in 2 or more lines, depends on requirements.

At the moment I do as below, but does not work.

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name\n Name again', dataIndex: 'name' },
{ text: 'Email\nEamil test', dataIndex: 'email', flex: 1 },
{ text: 'Phone\nPhone number', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody()

Please refer Grid Header text. I want [Name again] in next line. If width of column is not enough then "..." hellip should be at end.

Please help.

7 Oct 2013, 3:56 AM
to insert a break in the header text, you can use the html break element:

Name<br>Name again

7 Oct 2013, 4:00 AM
Thanks for quick answer.

All my text get replaced from language files. These files are provided by customer with "\n".
Is there any common way to replace??
And what about "..." hellip??

7 Oct 2013, 4:17 AM
you can use the JS replace function: http://www.w3schools.com/jsref/jsref_replace.asp

for your 2nd question, sorry i dont know.

7 Oct 2013, 4:19 AM
Thanks Farish.
It is very helpful.