extjs组合框底层文本框宽度为0

I have a combobox which is shown and hidden in particular scenario. The combo box renders and works fine if I don't hide it.

我有一个组合框，在特定场景中显示和隐藏。如果我不隐藏它，组合框渲染并正常工作。

But once I hide it and show it again, the width of combo box is not set properly and it renders like this:

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

It should have been rendered as:

它应该被渲染为：

The HTML code of the element where combobox is rendered is:

呈现组合框的元素的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>

The JS code to create combobox I am using is:

我正在使用的创建组合框的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'
    });

On conditional basis, I am hiding the branchNameTr row as well calling hide method on the combobox like this:

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

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

As you can see, I am calling show and doLayout method in "if" block which only results in the first screenshot shown above. What can I try to fix the width.

正如您所看到的，我在“if”块中调用show和doLayout方法，这只会导致上面显示的第一个屏幕截图。我可以尝试修复宽度。

1 个解决方案

#1

Why do you explicitly hide the combo? Hiding the containing element is enough.

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

In my experience, the best way to hide some element completely is the setDisplayed method, so you should try this:

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

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