extjs combobox基础文本框宽度为0

Question

我有一个组合框，这是显示和隐藏在特定的情况下。如果我不隐藏组合框，它将呈现并正常工作。

但是，一旦我隐藏它并再次显示它，组合框的宽度设置不正确，它呈现如下：

​

​

它应该呈现为：

​

​

呈现combobox的元素的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>

我使用的创建combobox的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);
}