View Full Version : Ext JS grid problem

25 Sep 2014, 4:54 AM

I am simpy trying to create a grid and I am looking at following example which is present on ext js docs

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "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', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody()

Question is , when I removed flex property from email colmun I am getting one extra column after last column. Please tell me what is the recommended way of creating grid.So that if I expand it no extra column will appear at last and when I shrink it autoscroll should appear. Kindly suggest.

26 Sep 2014, 3:17 AM
flex property causes the column to take any space which is left over by the other columns. so if you have 2 columns with width: 80 and one with flex:1, if the total width of the grid panel is 200, width of the column with flex will be 40 (200-80-80). if you have flex for one or more columns, you wont see the empty space at the end (which you refer to as extra column). what you can do is to use flex in at least 1 column and also use minWidth in that column. that way, the column is minimum minWidth broad and if more space is available, it expands to fill it.

some more info: flex works with ratios. if you have 2 columns with flex: 1 and flex: 2, the 2nd column will be double as broad as the first.