Solution to ComboBox and DateField disappearing in IE_extjs

Foreword

As the basic Form components of Ext JS, there is nothing difficult about these two.
However, during the development process, we encountered that in the IE browser, zooming in and out of the window size would cause these two components to disappear. Clicking on certain places can display them again. No errors are reported. It works fine in other browsers.

The situation where the problem occurred

Because Ext js is imported on the basis of the original project, the form in the page is not created through the standard form component first, and then add The form field method is used.
What we use here is pure html form and input, and then use Ext js to render the input into Combobox and DateField.

Let’s talk about the mechanism of combobox generation:

1. Find the original input by Id
2. Find the parent of this input (the original input can be deleted)
3. Create a new Ext js Combobox component and render to the parent of the original input. (id is set to the original input id)

Copy code The code is as follows:

var comboInput = Ext .get(inputId);
var comboInputParent = comboInput.parent();
comboInput.destroy();
var store = Ext.create('Ext.data.Store', {
fields : ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});

Ext.create('Ext.form.ComboBox', {
id: inputId,
store: store,
displayField: 'name',
valueField: 'abbr',
typeAhead : true,
renderTo : comboInputParent
});

Date Field has a similar mechanism.

Solution exploration

Use IE Developer to view the changes in components after the window changes.
Found that the component is still there.

The main steps of Ext js to form a Comobox are:

Put a table in a div, a tr in the table, and two tds in the tr. The second td is the main display component. . Take a look at some general content:

Copy code The code is as follows:

At first I thought it was the original The input is destoryed, making it impossible to render. Changing it to hide(), or setDisabled, or setVisable will not work.

The above td still exists on the page, but its position has changed and it is no longer under the table.

It seems to be caused by Css. Delete x-form-item-body in IE Developer. It works normally in IE. I'm happy.

Look at the definition of x-form-item-body in Ext js

Copy the code The code is as follows:

.x-form-item-body {
position: relative;
}

It’s very simple, just one line. It seems that this relative position causes of.

You should not use the CSS of Ext js itself. Add it to your own page:

Copy the code The code is as follows:

static is the default value of position, which is equivalent to no set value.
Everything is normal ^^
But there is a problem. Chrome and Firefox do not have this problem. To be on the safe side, changes to the original functions should have as little impact as possible.
Add conditional comments:

Copy code The code is as follows:

The above code only takes effect under IE.