Next, let's take a few simple examples of ext components. Note: Article Some of the content is taken from the materials I have seen during my learning process.
Ext2.0 restructured the framework greatly. The most important thing is to form a well-structured and hierarchical component system, which forms an ext control. The ext component is defined by the component class. Each component has a specified xtype attribute value. You can use this value to obtain a component type or define a component of the specified type.
The ext component system is shown in the following figure:
Components can be roughly divided into three categories: basic components, toolbar components, and form element components.
Basic components include
So many components are cool. The component can be directly created by using the keyword "new". For example, you can create a window box as mentioned in the previous article.
VaR win = new Ext. window ();
In addition to this creation method, some configuration attributes are usually added to the constructor to initialize the component. For example, create a panel:
<HTML>
<Head>
<LINK rel = "stylesheet" type = "text/CSS" href = "extjs/resources/CSS/ext-all.css"/>
<SCRIPT src = "extjs/ext-base.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "extjs/ext-all.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "extjs/ext-lang-zh_CN.js" type = "text/JavaScript"> </SCRIPT>
<Script language = "JavaScript">
Function panel (){
VaR Params = {Title: "hello", width: 300, height: 200, HTML: "VaR Panel = new Ext. Panel (Params );
Panel. Render ("Panel ");
}
</SCRIPT>
</Head>
<Body>
<Input type = "button" onclick = "Panel ()" value = "display panel">
<HR/>
<Div id = "Panel"> </div>
</Body>
</Html>
Key Code :
Function panel (){
VaR Params = {Title: "hello", width: 300, height: 200, HTML: "VaR Panel = new Ext. Panel (Params );
Panel. Render ("Panel ");
}
Params is a parameter for setting panle. Title: title, width: width, height: height, HTML: content displayed on the panel
VaR Panel = new Ext. Panel (Params); this Code creates a panel and sets panel properties in the constructor.
Panel. Render ("Panel"); indicates the DIV element ID on the page .,
The code can be abbreviated:
Copy code The Code is as follows: var Panel = new Ext. panel ({renderto: "Panel", title: "hello", width: 300, height: 200, HTML: "
For child element components in the component, the control can be created by means of delayed loading. At this time, the control can be directly implemented by passing the array through the items of the parent container.
Function panel (){
VaR Params = {
Title: "hello ",
Width: 300,
Height: 200,
HTML: "Items :[
New Ext. Panel ({Title: "Panel1", height: 100 }),
New Ext. Panel ({Title: "panel2", height: 100 })
]
};
VaR Panel = new Ext. Panel (Params );
Panel. Render ("Panel ");
}
To make the component display different effects, we need to set parameters in the constructor.
Because all components are inherited from Ext. component, all components may have common attributes, such
