Extjs4 Quick Start 2-basic knowledge (1)

Original http://www.cnblogs.com/good-temper/archive/2013/04/02/2996544.html

First of all, I would like to state that most of the content introduced here comes from the "extjs Chinese Learning manual". This is like a blog post from a senior. If you want to quickly learn about extjs4, you can take a look.

1.1 download extjs4: Http://extjs.org.cn/(can also go to the official), version 4.1.1 1.2 add extjs files to the ProjectYou can directly add the new ext file to the project's webroot file and put all the downloaded files into the file after pressurization. However, this will often cause myeclipse to become stuck directly, and the file size may be more than 200 MB, this is absolutely unacceptable for a small project. You don't have to worry about it. experienced people know that most of the packages are source code, demos, and API documentation. There are actually few projects to be introduced. The file to be introduced is as follows: 1.3 extjs Layout 　　　　 Fit layout:In the fit layout, child elements automatically fill the entire parent container. Note: In fit layout, setting the width of its child elements is invalid. If multiple components are placed in the fit layout, only the first child element is displayed. Border layout:The border layout is also called the border layout. It separates the pages into the west, east, south, north, and center sections, we need to specify the region parameter in its items to specify a specific location for its child elements. Our main face frame adopts this layout. Note: The North and South sections can only be set to height, while the West and East Sections can only be set to width ). The North South West east region becomes larger, and the center region becomes smaller. The parameter split: True can be used to adjust the size of four areas except the center. The collapse function is activated when the collapsible parameter is set to true. The title must be set because the collapse button contains the TITLE section. The center area is required and cannot be folded. The center area automatically fills in the remaining space in other areas. In extjs4.0, when the specified layout is border and the center area is not specified, an error message is displayed. Accordion layout:The accordion layout is also called the accordion layout. In the accordion layout, only one panel is active at any time. Each side can be expanded and folded. Accordion layout: the accordion layout is also called the accordion layout. In the accordion layout, only one panel is active at any time. Each side can be expanded and folded. Card Layout:This layout is used to manage multiple child components, and only one child component can be displayed at any time. This layout is most commonly used in the wizard mode, that is, distribution submission. Anchor Layout:The component is fixed at a certain position of the parent container. When the size of the child component in the anchor layout changes to the container size, the component that uses the anchor layout will re-render the position and size according to the specified rules. Absolute Layout:Inherit Ext. layout. container. anchor Layout mode, and added the x/y configuration option to locate the child components. The purpose of the absolute layout is to expand the layout attributes and make the layout easier to use. Column Layout:It is generally called column layout. This layout aims to create a multi-column format. You can specify a percentage or a fixed width for each column. 1.4 extjs codeOne of the features of extjs is object-oriented programming, which allows us to write some processing code on the interface and front-end like writing Java code. However, for a non-professional front-end developer, it is really hard to get familiar with ext, so I think we are passing through the party (occasionally used only ), you only need to know some basic classes. (1). The extjs4 code starts with an Ext. Application ({}) method, which is equivalent to the main function in our project. (2). Like Net, extjs4 also has the namespace concept, and the naming structure is usually the same as the file structure, which is similar to the Java package. (3 ). extjs itself provides error handling mechanisms and debugging functions, but I think it is generally not used as an amateur, as long as it runs normally and no exception is thrown, debugging Chrome/Firefox + console. log () can be done in general.
(4) You can view the API documentation for others. Below is the definition of an extjs tabpanel class

Ext. define ('sxpt. view. tabpanel ', {// class name extend: 'ext. tab. panel ', // parent class initcomponent: function () {// initialization method Ext. apply (this, {// Ext. apply (x1, x2) to copy the object X1 to X2. The purpose is to copy this Panel to 'content-panel 'as the homepage ID: 'content-panel', Region: 'center', ults: {activetab: 0, border: false, items: [{ID: 'homepage', Title: 'homepage', iconcls: 'home', items: [{xtype: 'textfield', name: 'name', fieldlabel: 'test'}]}); this. callparent (arguments );}});

You can take a look at the general meaning of this piece of code in combination with the information, the focus is to be familiar with the extjs4 encoding method.

1.5 extjs data definition and storageThere are two core objects in extjs: Model class and store storage class. The former can be understood as the Java model class and defines the format of stored data, it can be understood as an instantiated model class set. Generally, list data sent from the background is stored in store. The following is an example:

Model:Ext. define ('sxpt. model. user', {extend: 'ext. data. model ', fields: ['loginid', 'name', 'role', 'email', 'grade ']});Store:Ext. define ('sxpt. store. user', {extend: 'ext. data. store', requires: 'sxpt. model. user', model: 'sxpt. model. user', autoload: True, // whether to automatically load, that is, whether to automatically request data from the background pagesize: 1, // set the page size Proxy: {// This is the request proxy, implement Asynchronous backend request data type: 'ajax ', URL: 'user _ getstudent', Reader: {type: 'json', root: 'Ls', successproperty: 'success', totalproperty: 'totalcount '}}});

　　1.6 extjs requests data from the backgroundExtjs itself is based on the jquery framework, so the method of data request is the same as that of jquery, but it is often easier to use. Note that extjs uses JSON format data to interact with the background. Of course, you can also use XML format. The main method for extjs to request data from the background is Ext. ajax. request, there should be other methods, but I have used this one currently (the proxy of the store above also uses this one). Who makes me an amateur. Check the Code:

Ext. ajax. request ({URL: "Link", // response. write ("[{Username: 'likeshan', age: 20}, {Username: 'liudehua', Age: 50}]"); Params: {ID: 1 }, // pass the parameter to the server Timeout: 60000, // set the request timeout time method: "Post", success: function (response, Operation) {Ext. array. each (eval_r (response. responsetext), function (item) {// note that the eval must contain JavaScript executable code, which is the code recognized by Js, here is an array. This is the alert (item. username) ;}) ;}, failure: function (response, Operation) {alert (response. responsetext );}});

Note that extjs4 uses asynchronous requests in most cases, that is, after a request is initiated, the request is completed externally, therefore, you must note that the data obtained after the request can only be accessed in Ajax internal methods, such as success and store load methods. At the beginning, I have put a lot of attention in this regard. So what do we do if we want to get data synchronously? Set async in Ext. Ajax. Request to false. You can see the following example:

VaR name; Ext. ajax. request ({URL: 'common _ login_userinfo ', method: 'post', async: false, // synchronous request data success: function (result, request) {name = ext. JSON. decode (result. responsetext ). lui. role ;}}); console. log (name); // If synchronization is not set, the output here is generally undefine (that is, null). Why? I have said that it is an asynchronous request. If the request has been completed, the correct value may be output (for example, when a breakpoint is paused in the previous step). At the beginning, I found that there are values, however, the console output was undefine, and it was so crazy.

Write it here today, and write basic 2 tomorrow, focusing on the MVC structure of extjs. Haha, go out for a run and check the interview book to prepare for a job. The Freshman cannot afford to hurt (Sorry ^ sorry.