extjs combobox underlying textbox width is 0

Question

I have a combobox which is shown and hidden in particular scenario. The combo box renders and works fine if I don't hide it.

But once I hide it and show it again, the width of combo box is not set properly and it renders like this:

It should have been rendered as:

The HTML code of the element where combobox is rendered is:

    <tr valign="top" id="branchNameTr">
        <td class="td-label" id="branchNameTd">*Branch Name:</td>

        <td nowrap="" cellpadding="0" class="td-input" style="padding-left:10px;float:left">
            <span id="branchName" style="float: left"></span>
            <img border="0" alt="Branch Name " id="branchTooltip" style="float:left;padding-left:5px" src="images/info2.jpg">


        </td>
    </tr>

The JS code to create combobox I am using is:

    createRelease.branchNameList = new Ext.form.ComboBox({
        name : 'branchName',
        fieldLabel : 'Branch Name',
        store : createRelease.branchNameListStore,
        typeAhead : true,
        mode : 'local',
        forceSelection : true,
        displayField : 'branchName',
        valueField : 'branchNameId',
        triggerAction : 'all',
        emptyText : "select branch",
        selectOnFocus : true,
        minListWidth : "178",
        renderTo : 'branchName'
    });

On conditional basis, I am hiding the branchNameTr row as well calling hide method on the combobox like this:

if (packageGroupName == 'MCP') {
    document.getElementById("branchNameTr").className = "";
    createRelease.branchNameList.show();
    createRelease.branchNameList.doLayout();
} else {
    document.getElementById("branchNameTr").className = "hidden";
    createRelease.branchNameList.hide();
}

As you can see, I am calling show and doLayout method in "if" block which only results in the first screenshot shown above. What can I try to fix the width.

Answer 1

Why do you explicitly hide the combo? Hiding the containing element is enough.

In my experience, the best way to hide some element completely is the setDisplayed method, so you should try this:

if (packageGroupName == 'MCP') {
    Ext.get("branchNameTr").setDisplayed(true);
} else {
    Ext.get("branchNameTr").setDisplayed(false);
}