Preface
As the basic form of Ext JS components, these two are no difficult place.
But the development process encountered in IE browser, zoom in, reduce the size of the window, will cause these two components disappear. Click on some place to show it again. Do not report any mistakes. Normal in other browsers.
the condition of the problem
Because it is based on the original project to import Ext JS, so the form of the page is not through the standard first create a form component, and then add form field of the way.
Here is the use of pure HTML form and input, and then use Ext JS to input render into Combobox and Datefield.
tell me about the mechanism that ComboBox produces:
1. Find original input by ID
2. Find this input of the parent (original input can be deleted)
3. Create a new Ext JS Combobox component, render to the original input of the parent. (ID set to original input ID)
Copy Code code 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
});
The Date Field produces a similar mechanism.
Program Search
Use IE Developer to see the changes in the component after the window changes.
Found that the component is still in.
Ext JS composed of a comobox mainly:
Set a table in a Div, a TR in the table, two TD in TR, and the second TD is the main display component. Look at some general content:
Copy Code code as follows:
<TD role= "Presentation" class= "X-form-item-body" id= "Xxxx-bodyel" colspan= "3" style= "width:100%"; >
Initially thought is the original input destory off, resulting in render, change into hide (), or setdisabled, or setvisable are not.
The above TD still exists on the page, but the position has changed, it is no longer below the table.
Appears to be caused by CSS. In IE Developer delete x-form-item-body, ie in normal, happy.
Look at the definition of x-form-item-body in Ext JS
Copy Code code as follows:
. x-form-item-body {
position:relative;
}
Very simple, just one line. Seems to be the result of this relative position.
should not ext JS itself css, in their own page to join:
Copy Code code as follows:
<style>
. x-form-item-body {
Position:static!important;
}
</style>
Static is the default value of position, quite with no set value.
Everything's fine ^^
But there's a problem, Chrome and Firefox don't have that problem. For insurance purposes, changes to the original function should be less affected.
Plus conditional comments:
Copy Code code as follows:
<!--[If ie]>
<style>
. x-form-item-body {
Position:static!important;
}
</style>
<! [endif]-->
Only under IE, the above code will be effective.
