Building Schneider Building Control system Database Background Server example project three (web-side display)

Recently saw ExtJS's example has the imitation operating system desktop code, and the performance is very beautiful, combined with the building control of the system's web-side display requirements, the current front-end adoption of ExtJS. Building control-related operations are designed to be used in different applications on the desktop.
ExtJS looks complicated for the first time, but because of its rich sample code, usually after understanding some basic concepts, I think it is the best way to learn from the example code.
For now, I have made the following picture, referring to the example code in ExtJS that is modeled after the desktop:

As we can see, I am currently following the basic components of Gridpanel, TabPanel, and window in this sample code to make a simple tool for copying database connections. Currently, this tool only implements:
1. Read table structure functionality from the default database of this Web server
2. Click on the table's page to query the function of the data in the corresponding table.
The function of the JS part involved is:
1. Read Data synchronously
2. Reading data asynchronously
Application of 3.TreePanel, TabPanel and Gridpanel

Here's a look at the basics you need to know to do this page.

1. Dynamic load path in ExtJS 4

Dynamic loading this concept is proposed in this case, that is, we know that the number of ExtJS files and a lot of large, usually one-time loading all the JS files, for larger projects, all JS files under the same directory, usually not easy to manage. All introduced the concept of dynamic loading, that is, the browser can intelligently find the JS code used to load the JS file path.
ExtJS dynamic loading is usually done using Ext.loader.

<script type="text/javascript">Ext.onReady(function() {    Ext.Loader.setConfig({        enabled    : true,        disableCaching: false,        paths    : {            ‘Ext.ux.desktop‘: ‘/TacControlServerWeb/szxdesktop/js/‘,        }    });});</script>

The above code enables dynamic loading, disables browser caching, and specifies the deployed path for ExtJS.
There are classes in ExtJS for Ext.ux.desktop.Desktop, we have specified ext.ux path to '/taccontrolserverweb/szxdesktop/js/', find desktop.js this file.
We can also use Ext.loader in this way:

Ext.Loader.setPath({    ‘Ext.ux‘‘/TacControlServerWeb/szx/ext-4.1.1a/examples/ux/‘,    ‘Ext.ux.desktop‘‘/TacControlServerWeb/szxdesktop/js/‘,    ‘szxdesktop.app.database‘:‘/TacControlServerWeb/szxdesktop/app/database/‘,     Database:‘/TacControlServerWeb/szxdesktop/app/database/‘,     ‘/TacControlServerWeb/szxdesktop/‘});

2. ExtJS in class

ExtJS introduced the concept of class, we can use object-oriented thinking to write JS code
1) in ExtJS, when you create a class, its internal processing includes some pre-processing to prepare for the creation of the class, and some post-processing after the class is created, as shown in

Pre-processing includes:

ClassName defines the namespace and name of this class;
Loader finds dependencies on classes and attempts to load them if those dependencies do not exist;
Extend adds all the methods and properties inherited from the parent class in the new class;
Statics adds methods and properties related to statistical analysis for the current class definition;
Inheritablestatics This phase adds statistical methods and attributes from the parent class, if present;
Config creates get and set methods for configuration items;
Mixins inherits the methods and properties of all mixin classes;
Xtype defines the xtype for the new class;
Alias defines aliases for the new class;

Post-processing includes:

Alias registers the aliases of the new class with the class manager;
Singleton Create a singleton instance for the new class;
Alternateclassname define additional names for the new class that is created;
Uses all other classes used to import the new class;
2) The following is a definition class for database Tools

Ext.define (' Szxdesktop.app.database.DatabaseWindow ', {extend:' Ext.ux.desktop.Module ', alias:"Widget.szxdesktop.app.database.DatabaseWindow", requires: [' ext.* ',' Szxdesktop.app.database.TableTree ',' Szxdesktop.app.database.TableGrid '], ID:' Database-win 'Init: function(){         This. Launcher = {text:' database ', Iconcls:' Icon-grid '}; }, CreateWindow: function(){        varDesktop = This. App.getdesktop ();varWin = Desktop.getwindow (' Grid-win ');if(!win) {win = Desktop.createwindow ({ID:' Database-win ', Title:' database ', Width:740, Height:480, Iconcls:' Icon-grid ', Animcollapse:false, Constrainheader:true, Layout:' border ', items: [{region:' West ', Xtype:"Szxdesktop.app.database.TableTree", Width: the, padding:0, listeners: {"Cellclick": function(tree, TD, Cellindex,record, TR, RowIndex, E, eopts){                                varTabs=ext.componentquery.query ("[Tabletabpanelid=szxdesktop.app.database.databasewindowtabpanel]")[0];if(Tabs.items.containsKey (Record.data.id))                                {Tabs.setactivetab (ext.getcmp (record.data.id)); }Else{varcol = []; Ext.Ajax.request ({URL:"Szxrest/databaserest/getdatabasetablecolumnname", Method:"GET", Async:false,//async whether asynchronous (TRUE asynchronous, FALSE synchronous)Params: {TableName:record.data.text}, Success function(response, opts) {Col = Ext.JSON.decode (response.responsetext); }, Failure: function() {}                                      });varJsonstorefieldcol = []; Ext.Ajax.request ({URL:"Szxrest/databaserest/getdatabasetablecolumnname2jsonstorefield", Method:"GET", Async:false,//async whether asynchronous (TRUE asynchronous, FALSE synchronous)Params: {TableName:record.data.text}, Success function(response, opts) {Jsonstorefieldcol = Ext.JSON.decode (Response.responsetext); Console.log (jsonstorefieldcol[0].name); }, Failure: function() {}                                      });varColName = jsonstorefieldcol[0]==NULL?"': jsonstorefieldcol[0].name;vartab = Tabs.add ({closable:true, Layout:{type:"Fit"}, Id:record.data.id, Items:[ext.create (' Szxdesktop.app.database.TableGrid ', {border:0, gridid:record.data.id+' Tablevalue ', Columns:col, Url:' Szxrest/databaserest/getdatabasetablecolumnvalue ', TableName:record.data.text, Columnname:colname, Jsonstorefields:j Sonstorefieldcol})//creategrid], title:record.data.text+"Table", Iconcls:' Grid-shortcut32 '}). Show ();                                Tabs.setactivetab (tab); }}}, {tab Letabpanelid:"Szxdesktop.app.database.DatabaseWindowTabPanel", Region:' Center ', Xtype:"TabPanel", Bodystyle:' padding:0px; ', Layout:' Fit ', items: [], padding:0}//tabpanel]//items}); }returnWin }});

Extend to inherit all properties of the parent class
Alias is the alias that defines the class, that is, the abbreviation
Requires is similar to import in Java, that is, loading other class definitions used in the class

3. Ajax sentiment

I use the Ext method below to do the Ajax operation

varJsonstorefieldcol = []; Ext.Ajax.request ({URL:"Szxrest/databaserest/getdatabasetablecolumnname2jsonstorefield", Method:"GET", Async:false,//async whether asynchronous (TRUE asynchronous, FALSE synchronous)Params: {TableName:record.data.text}, Success: function(response, opts) {Jsonstorefieldcol = Ext.JSON.decode (Response.responsetext); Console.log (jsonstorefieldcol[0].name); }, Failure: function() {}  });

In this method, Async is true to indicate an asynchronous request, and false to indicate a synchronous blocking request (that is, after the request is completed, only subsequent statements are executed)

The above three points are commonly used to three points, as for the use of TabPanel, Gridpanel, etc., can be used in the time, refer to the example or API.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Building Schneider Building Control system Database Backend Server example project three (web-side display)