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

正如你所看到的，我在＆＃34中调用show和doLayout方法;如果＆＃34;块只会导致上面显示的第一个屏幕截图。我可以尝试修复宽度。

Answer 1

为什么要明确隐藏组合？隐藏包含元素就足够了。

根据我的经验，完全隐藏某些元素的最佳方法是setDisplayed方法，所以你应该试试这个：

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