javascript - extjsコンボボックスの基礎となるテキストボックスの幅は0です

Question

特定のシナリオで表示および非表示になるコンボボックスがあります。非表示にしなければ、コンボ ボックスが表示され、正常に動作します。

しかし、一度非表示にして再度表示すると、コンボ ボックスの幅が正しく設定されず、次のようにレンダリングされます。

次のようにレンダリングされているはずです。

コンボボックスがレンダリングされる要素の HTML コードは次のとおりです。

    <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>

私が使用しているコンボボックスを作成するJSコードは次のとおりです。

    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'
    });

条件に基づいて、次のようにコンボボックスで hide メソッドを呼び出して、branchNameTr 行を非表示にしています。

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

ご覧のとおり、「if」ブロックで show および doLayout メソッドを呼び出しているため、上記の最初のスクリーンショットのみが表示されます。幅を修正するにはどうすればよいですか。