Preface
I decided to write this article for users who use ext2.ArticleThose who have come over from the naive age of HTML embedding some small scripts to generate windows or forms, and give them longCodeThose who struggle against disordered structures.
There are many ways and solutions to solve a problem. It is not necessarily the best solution I have to follow. but I really want to tell you that the following solution is feasible and has a clear structure and is easy to maintain. Simply put, it works!
What is "Big application"
At the same time, viewport boardlayout, tables, and forms should be used in a file. If this is not a big application, what if every table has ten more windows, forms, or boarderlayers?
There is a good word in German: jein (or not) It is a mixture of not and
The above question is, when is the application big? It's big when you think it's big. it means you start to face a bunch of files and problems. it means that you cannot find the one you want in a file. It means you have to stop and clarify the relationship between different components...
We can think that all applications are big applications, and even small applications can be reasonably organized. When we expand its new functions, new code, it will gradually become a real big application.
So the most important thing is to realize that I am writing big applications now .!
Files And Directories
This is the first thing we need to organize. in the directory of Apache or other servers, we can always see some directories. The following is the recommended directory structure:
./CSS (optional connection)
./EXT (connection)
./IMG (connection)
./JS
Index.html
The connection refers to the relative path corresponding to the actual file. The advantage is that when you download a new ext version, you only need to modify it, the application can run in the new version without having to modify a row. If it is not running properly, you can change it back.
The CSS path is used to store all style forms. If you have a global CSS or font, you can also create a directory.
The ext connection is mentioned above.
IMG, which is connected to your image, can also contain subdirectories of some icons.
The JS directory is used to store JavaScript files created in the application.
The HTML file index.html is the application portal. You can rename it as needed, and there may also be more portal files, such as the login portal.
At the same time, you may also need to create a directory for storing the server code, such as classes, which depends on the actual situation of your application.
Index.html
The content of the corresponding index.html file:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "./EXT/resources/CSS/ext-all.css">
<LINK rel = "stylesheet" type = "text/CSS" href = "./CSS/application.css">
<SCRIPT type = "text/JavaScript" src = "./EXT/adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "./ext/ ext-all-debug.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "./JS/application. js"> </SCRIPT>
<Title> A Big application </title>
</Head>
<Body> </body>
</Html>
JS/application. js
We need a file to put the onready function. We call it "application JS". The most streamlined application JS is as follows:
// VIM: Sw = 4: TS = 4: Nu: nospell: FDC = 4
/**
* An Application
*
* @ Author ing. Jozef SAK álomus
* @ Copyright (c) 2008, by ing. Jozef SAK álomus
* @ Date 2. Limit l 2008
* @ Version $ ID $
*
* @ License application. JS is licensed under the terms of the Open Source
* Lgpl 3.0 License. Specified cial use is permitted to the extent that
* Code/component (s) do not become part of another open source or commercially
* Licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
/* Global Ext, application */
Ext. blank_image_url = './EXT/resources/images/default/s.gif ';
Ext. NS ('application ');
// Application main entry point
Ext. onready (function (){
Ext. quicktips. INIT ();
// Code here
}); // EO function onready
// EOF
The header and footer of this file may be different, but you must be sure that ext is set. blank_image_url points to your server. this path points to a 1x1 transparent image, which is used to specify the image position of Ext. incorrect settings may cause rendering problems, such as the loss of icons.
You need to create a global object variable for your application.
Make sure that Ext. onready is your application portal, from which you can create your application.
CSS/application.css
You should put your CSS in this file. If you think that there are not many styles, you do not need to create a file separately. It is also a good idea to put the <style> label in the head of the page.
The opposite is true. Remember that every file has its own location when you write a large application. if you randomly place them in the head, you will encounter many rendering problems in the future without knowing where to find the problem.
Incorrect Method
How do beginners often start to write Ext?
VaR Vp = new Ext. viewport ({
Layout: 'border'
, Items :[
New Ext. Grid. gridpanel ({
Store: New Ext. Data. Store ({
Proxy: New Ext. Data. httpproxy ({...
Wait, write this method, and we will soon write 10000 lines in application. js. Obviously this method won't work.
Split it in the correct way
Even the most complex system contains similar components and elements, and the big applications you want to write are no exception. Therefore, we need to analyze its components, element to have a relationship between them.
First, sit down and think about it. Draw a sketch and list a table. You need to find out where the components in the system are. At least find out the most important one.
Predefined class
Now that you have analyzed and confirmed the application elements, you can start writing them manually. But how can you start? The best way is to inherit the ext component and define all its configuration attributes, or you can define a built-in configuration object. Although it is rarely used to add other functions, but its advantage is its pre-definition. For example, we need to define a "Personnel" table, which has some specified columns, stores, sorting items, editors, and so on.
First, we need to define a window like this.
VaR win = new Ext. Window ({
Title: 'personnel'
, Width: 600
, Height: 400
, Items: {xtype: 'personnelgrid '}
});
Win. Show ();
Write a predefined class
[Note: The following structure may not run in some cases]
The following is an example:
Application. personnelgrid = ext. Extend (ext. Grid. gridpanel ,{
Border: false
, Initcomponent: function (){
Ext. Apply (this ,{
Store: New Ext. Data. Store ({...})
, Columns: [{...}, {...}]
, Plugins: [...]
, Viewconfig: {forcefit: true}
, Tbar: [...]
, Bbar: [...]
});
Application. personnelgrid. superclass. initcomponent. Apply (this, arguments );
} // EO function initcomponent
, Onrender: function (){
This. Store. Load ();
Application. personnelgrid. superclass. onrender. Apply (this, arguments );
} // EO function onrender
});
Ext. Reg ('personnelgrid', application. personnelgrid );
What have we done here, and we have extended Ext. grid. gridpanel creates a new extension class application. personnelgrid, and then register it as a new xtype named personnelgrid
We have defined all the configuration items for this table according to the requirements of the Personnel. From this point, we have created a new component. A code segment that can be applied to all the places needed, for example, in (window, border Panel region, standalone. we can also create it as follows:
VaR Pg = new application. personnelgrid ();
Or use the xtype method (delayed instantiation)
VaR win = new Ext. Window ({
Items: {xtype: 'personnelgrid '}
,....
});
Organization pre-defined class
The above Code does not need or should not be run in onready, because it does not perform any operations on the Dom, it is just to create a JavaScript Object. therefore, it can be written in a JS file of a unit, such as JS/application.personnelgrid.js, which is included in the head of index.html at the same time:
<SCRIPT type = "text/JavaScript" src = "./JS/application. personnelgrid. js> </SCRIPT>
So far, everything is okay. We have made all the files have their own places. next, we need to write our own pre-defined classes and place them in. in the/JS directory, the users are included in index.html, and their instances are used to create our applications. just like assembling a toy.
It looks good.
There are more things to wait for you to do.
Communication between internal components
Like this, we need a layout like this: the connection list on the left and the tag page in the middle. click the link on the left to create a tab. Now, where should we put this logic. event or creationProgramOn the left or in the middle?
None! Why? If we place the logic code for creating and displaying the left and middle pages in the predefined class, it will be invalid if there is no center area, and we cannot create any tabs.
If we put it in the center area, the results will be the same, and there is no left area, and the middle cannot exist.
We can only put it in the layout container that contains the west and center areas, which is the only correct place for the internal component communication code.
What should we do next? The layout container should listen to events in the West Layout and create a tabs for click. Here is an example of this. On the Saki ext example website
Production System
As long as we keep coding code, we will soon include more and more JavaScript files in the page (for example, I will add about 80 included JavaScript files every day ), this will degrade the system performance.
The best solution is to put them in a large file in order and compress them.
In the production system, we should include the following JS
Ext-all.js
App-all.js and
Application. js
For more information about how to compress and mix the code, see the other tutorial.
Conclusion
Specific ext classes have specific technologies. We need to know more about server and client technologies, but the above is a general concept.
Happy Coding
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
