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