<link rel= "stylesheet" type= "Text/css" href= "<%=basepath %>/ext-3.4/resources/css" /ext-all.css "> <script type=" text/javascript " src=" <%=basepath%>/ext-3.4/adapter/ext/ Ext-base.js "></script> <script type=" Text/javascript " src=" <%=basepath%>/ext-3.4/ Ext-all.js "></script> <!-- introduction of predesigned View Components --> <script type=" Text/javascript " src= "<%=basepath%>/jsp/js/hellowindow.js" ></script> <script type= "Text/javascript" > // when engaged in ExtJS component design, common components often appear, such as view components. If the view component is set to size and title every time you use it, preconfigured // is a prerequisite for setting the properties of a component so that specific properties have a specific default value to use directly ext.onready (function () { var hellowindow = new hellowindow ({ items:{ html: ' <p>This is a window.</p> ' }
});
hellowindow.show (' Windowdiv ');
}); </script>
Hellowindow.js is as follows:
var Hellowindow = ext.extend (ext.window,{
title: ' Hello ',
width:500,
height:300,
//rewrite parent win Dow InitComponent Method
initcomponent:function () {
console.info ("Start Hellowindow component.");
Equivalent to Ext.Window.prototype.initComponent.apply (this,arguments)
HelloWindow.superclass.initComponent.apply (t his,arguments);
}
})<body> <div id= "Windowdiv" ></div> </body>
The ExtJS pre-configuration class practice
often see preconfigured classes in ExtJS files, literally "preconfigured classes." Why does it need to be preconfigured? Who is the configured object? When engaged in the design or use of EXTJS components, common components often appear, such as view components. If the view component is set to size, title, and so on every time it is used, it can be very annoying, and the purpose of the preconfigured class is to predetermine the properties of a component so that specific properties have a specific default value for direct use. This section demonstrates how to define a view component in advance and set the width, height, and caption. First, HTML content:
Code Listing 2-14| file name: CH02/A.5.EXAMPLEA014.HTMLX
At present, the reader does not need to understand all the contents of the HTML file, just know that after the HTML file read (the file structure is resolved, but the picture has not been downloaded), the Ext.onready function defined within the action will be executed. First create the Hellowwindow instance, and then display the form. Note The <div/> ID attribute is assigned to Hellowindow.show as an argument, and if you do not specify a parameter for show (), the animation effect is not generated. The contents of the Hellowindow.js are:
File name: CH01/HELLOWINDOW.JSXvar hellowindow=ext.extend (ext.window,{ title: ' Hello ', width:500, height:300, initcomponent: function () { console.info ("Start Hellowindow component."); HelloWindow.superclass.initComponent.apply (this,arguments); } );
Hellowindow inherits from the Ext.window view component, has predefined title, width, height, and overrides the InitComponent () method. EXTJS2.0 introduces the component Model (ComponentModel), and each view component invokes InitComponent () to initialize the action, which is discussed in detail later in the discussion of the view component. The example is to note how to invoke the InitComponent () of the parent class. When using Ext.extend, the Superclass property is added to the constructor of the subclass, which points to the prototype of the parent class constructor, which is equivalent to the following two ways:
HelloWindow.superclass.initComponent.apply (this,arguments);
Ext.Window.prototype.initComponent.call (this,arguments);
Apply () is also equivalent to call () and can be exchanged for use. It is suggested that the first type of ExtJS be used. Once you have set the properties Ellowindow.js, you can use them only to create an instance. The sample results are shown in Figure 2-5.
No matter how many Hellowindow instances are created, each instance will be 500 pixels wide and 300 pixels high, with the title hello. If you want to modify these default properties, you only need to overwrite the configuration object when the instance is created:Varhellowindow=newhellowindow ({ title: ' Hello,there ', items:{ html: ' <p>thisisawindow.</p > ' } });
Because the inside of the component calls Ext.apply (this, the new configuration object) within the constructor, that is, the property that is overridden with the properties of the new Configuration object, the title is overwritten with "Hello,there". The above example shows that a component with a default value can use a preconfigured class to improve efficiency, especially when developing a large project, which can save a lot of time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
