Question

I am loading a grid dynamically in extjs. As you can see below the column “Created” is not wide enough to display whole text in it. I want to set every column’s width such that it display’s its text completely.

Is this possible to do? Any suggestion?

Thanks for help.

Answer 1

Thanks bensiu, I implemented the login. However, I cannot say that this is the ideal solution but it solves my purpose.

First, i navigate through data and find the longest string in that column (including header name of that column).

// Store the longest string for each column in columns[col].maxstring 

// Define a hidden label
{
    xtype: 'label',
    id: 'lblTab',
    hidden: true
}

var lblTab = Ext.getCmp('lblTab');
var hiddenField = Ext.util.TextMetrics.createInstance(Ext.getCmp('lblTab').el);
var widthValue = 0;

// Iterate through each columns to set its maximum width
for(var col in columns) {
    // find width of string
    widthValue = hiddenField.getWidth(columns[col].maxstring);

    // set column width
    colModel.setColumnWidth(columns[col].index, widthValue + 20, false);  
}

I hope this helps somebody.