I have a Sencha Ext.js Gridpanel, and the text in the last column is extending beyond the edge of the grid. Any idea why this is happening?

Question

I have a Sencha Ext.js Gridpanel, and the text in the last column is extending beyond the edge of the grid. Any idea why this is happening? The last column (Reference) is also not resizable. I am a total novice to ExtJS. Screenshot below. Problem areas marked in blue.

Answer 1

You probably have set a fix width for every column?

In that case you could just set a flex value (e.g. 1) to your last column.

That way the column will take up the "free" space to the right.

You could of course give the flex value to any other column. In my opinion the main problem is the "not used" space.

Here is a code example:

columns: [
    { text: 'First column', dataIndex: 'fc', width: 200 },
    { text: 'Second column', dataIndex: 'sc'; width: 50 },
    { text: 'Third column', dataIndex: 'tc', flex: 1 }
],

Answer 2

As suggested by @KaMun you have a problem of unusued space! A nice way to quickly build the width of every column using the entire grid's space is the flex config of columns.

For my grids, by default I like give every columns the same "weight" (flex = 1) by defining it in the columns'defaults. If you are sure some columns will always have the same size, you could always override the flex config specifying the width of the column.

In the next example, the last column will have a fixed width of 120, while the other two columns will divide the remaining space in 50%-50% way, cause they share the same weight (flex = 1):

columns: {    
    defaults: {
        flex: 1
    },        
    items: [
        { text: "First Name", dataIndex: "firstName"},
        { text: "Last Name", dataIndex: "lastName"},            
        { text: "Birth Date", dataIndex: "birthDate", xtype: "datecolumnn", width: 120}
    ]
}