A Preliminary Study on Using extjs to build client Layer 3

In software architecture, especially in B/S architecture, it is very popular to use three-tier architecture (data layer, middle layer, and performance Layer) to build software. However, this is always a server patent. In the traditional concept, the client is only responsible for displaying data. If the client is also engaged in three layers, it is indeed an incredible event.

Why is it necessary to build a layer-3 client?

Extjs is a powerful framework that gives developers great freedom and fine granularity. During development, developers need to write a lot of code to configure and use a component. If the workload is heavy, the efficiency is low, and the reusability is low, it is fatal. Therefore, smart developers should actively use the object-oriented functions in extjs to simplify their work. Customize your own components. In order to improve your efficiency. Therefore, in addition to three layers on the server side, we can also create three layers on the client side, customize components, and simplify the work.

Basic knowledge

Ext. NS () (or ext. namespace () function ). It is believed that few people use this function to build a new namespace. The concept is the same as that of the C # namespace or Java package. We can find the source code. In fact, this function only creates the same class as the namespace. For example, ext. NS ('buzz. Data. Ity ity '); creates a class named Buzz. Data. utility. With this concept, we can do it well.

I will not talk about the differences between Instance functions and static functions, but mainly about how to implement them in Js. It may be intuitive to use examples.

1 Ext. NS ('test. cls ');
2 test. CLs = function (){
3
4}
5 test. Cls. staticshow = function (){
6 alert ('this is a static function ');
7}
8
9 test. Cls. Prototype. instanceshow = function (){
10 alert ('this is an instance function ');
11}

 

The call is as follows:

1 var temp = new test. CLs ();
2 temp. instanceshow ()
3 test. Cls. staticshow ()

 

Data access layer

1 Ext. NS ('buzz. Data. Ity ity ');
2 buzz. Data. Utility. buildhttpstroe = function (){
3 return New Ext. Data. Store ({
4 Proxy: New Ext. Data. httpproxy ()
5 });
6}

 

This layer is used to return a store object for basic encapsulation.

Middle Layer

 

1 Ext. NS ('buzz. User );
2 buzz. User = ext. Data. Record. Create ([
3 {Name: 'personname', mapping: 'name', type: 'string '},
4 {Name: 'personid', mapping: 'id', type: 'int '}
5]); // data model, corresponding to the server data model
6
7 buzz. User. load = function (URL, loadedcallback ){
8 var ST = buzz. Data. Utility. buildhttpstroe ();
9 ST. Proxy. getconnection (). url = URL;
10 st. reader = new Ext. Data. jsonreader ({root: 'data'}, Buzz. User );
11 st. On ('load', loadedcallback );
12 St. Load ();
13} // static method used to return data from the server. The return type is Buzz. user. The parameter URL is the address of the data to be called, and loadedcallback is the callback function.

 

In the middle layer, we create a buzz. User class (namespace), which is directly created from the record object, which is customized and corresponds to the server data model. Use mapping for ing. The buzz. User. Load Method is a static method. It can be used without instantiation.

Presentation Layer

 

1 Ext. onready (function (){
2 Ext. Get ('btn1 '). On ('click', function (){
3 buzz. User. Load ('json1. ashx', callback );
4 });
5 });
6
7 function callback (St, res, OP ){
8 For (VAR I = 0; I <res. length; I ++ ){
9 alert (string. format ('{0}, {1}', Res [I]. get ('personid'), Res [I]. get ('personname ')));
10}
11}
12

 

The callback function has three parameters: ST: store object; Res: Record array; OP: other additional options.

This article serves only as an example. In actual development, more considerations are needed.