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

在有条件的基础上，我隐藏了branchNameTr行，并在组合框上调用了hide方法，如下所示：

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方法，这只会导致上面显示的第一个屏幕截图。 我可以尝试固定什么宽度。

Answer 1

为什么显式隐藏该组合？ 隐藏包含元素就足够了。

以我的经验，完全隐藏某些元素的最佳方法是setDisplayed方法，因此您应该尝试以下方法：

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