构建施耐德楼控系统数据库后台服务器示例工程三（Web端展示）

ゝ一世哀愁。 2022-08-03 14:43 120阅读 0赞

最近看到Extjs的示例中有仿操作系统桌面的代码，并且展示效果很美观，结合楼控这个系统的Web端展示需求，目前前端采用Extjs。楼控相关的操作会设计成桌面中的不同应用。  
Extjs初次入手看起来很复杂，但是由于其自带的示例代码很丰富，通常在了解一些基本概念后，参照着示例代码一步一步去做，我认为是最好的学习方式了。  
目前我参照着Extjs中仿照桌面的示例代码，做出了如下的画面：  
![桌面][20150809232410947]  
从图中我们可以看出，我目前在仿照着这个示例代码中的GridPanel、TabPanel、Window这些基本的组件，做出了一个简易的仿数据库连接的一个工具。目前这个工具只实现了：  
1.从这个Web服务器默认的数据库中读取表结构功能  
2.点击表名分页查询相应表中的数据的功能  
其中涉及到的js部分的功能是：  
1.同步读取数据  
2.异步读取数据  
3.TreePanel、TabPanel、GridPanel的应用

下面在此记录一下在做这个页面过程中需要了解的基础知识。

## 1. ExtJS 4中动态加载路径 ##

动态加载这个概念是在这种情况下提出的，即我们知道Extjs文件数量多且很多还很大，通常一次性加载完所有的JS文件， 对于比较大型的项目来说，把所有js文件放在同一个目录下面，通常不便于管理。所有引入了动态加载这个概念，即浏览器可以智能的找到所用到的js代码应该加载的js文件路径。  
Extjs动态加载通常采用Ext.Loader来完成。

上面的代码启用了动态加载， 禁用了浏览器缓存， 以及指定了 ExtJS 的所部署的路径。  
在ExtJS中有类为Ext.ux.desktop.Desktop,我们指定了Ext.ux的路径为’/TacControlServerWeb/szxdesktop/js/’下，找到Desktop.js 这个文件。  
我们还可以这么使用Ext.Loader:

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/',
         MyDesktop: '/TacControlServerWeb/szxdesktop/'
    
    });

![Ext.Loader][]

## 2. ExtJS中类 ##

ExtJS引入了类的概念，我们可以以面向对象的思想去编写JS代码了  
1）ExtJS中，创建一个类时，其内部处理过程包括一些前置处理为创建类做准备，也包括一些类创建后的后置处理，如下图所示  
![内部处理][20150810002611182]

#### 前置处理包括： ####

className定义这个类的名称空间和名字；  
loader 查找类的依赖，如果这些依赖不存在则尝试加载它们；  
extend 在新类中添加从父类中继承的所有方法和属性；  
statics 为当前类定义添加统计分析相关的方法和属性；  
inheritableStatics 此阶段添加来自父类的统计方法及属性（如果存在）；  
config 为配置项创建get和set方法；  
mixins 继承所有mixin类的方法和属性；  
xtype 为新类定义xtype；  
alias 为新类定义别名；

#### 后置处理包括： ####

alias 将新类的别名注册到类管理器；  
singleton 为新类创建一个单例实例；  
alternateClassName 为创建的新类定义其它的名称；  
uses 导入新类所使用的所有其它类；  
2）下面是数据库工具的定义类

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: '数据库',
                iconCls:'icon-grid'
            };
        },
    
        createWindow : function(){ 
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('grid-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'database-win',
                    title:'数据库',
                    width:740,
                    height:480,
                    iconCls: 'icon-grid',
                    animCollapse:false,
                    constrainHeader:true,
                    layout: 'border',
                    items: [
                        {
    
                           region:'west',
                           xtype:"szxdesktop.app.database.TableTree",
                           width: 170,
                           padding: 0,
                           listeners: {
                                "cellclick":function(tree, td, cellIndex,record, tr, rowIndex, e, eOpts){ 
                                    var tabs=Ext.ComponentQuery.query("[tableTabPanelId=szxdesktop.app.database.DatabaseWindowTabPanel]")[0];
                                    if(tabs.items.containsKey(record.data.id)){
                                        tabs.setActiveTab(Ext.getCmp(record.data.id));
                                    }else{
                                        var col = [];
                                        Ext.Ajax.request({
                                            url: "szxrest/DatabaseRest/getDatabaseTableColumnName",    
                                            method: "GET",
                                            async: false,   //ASYNC 是否异步( TRUE 异步 , FALSE 同步)
                                            params: {
                                                tableName:record.data.text
                                            },
                                            success: function(response, opts) { 
                                                col = Ext.JSON.decode(response.responseText);
                                            }, 
                                            failure: function() {  
                                            }  
                                        });
                                        var jsonStoreFieldCol = [];
                                        Ext.Ajax.request({
                                            url: "szxrest/DatabaseRest/getDatabaseTableColumnName2JsonStoreField",    
                                            method: "GET",
                                            async: false,   //ASYNC 是否异步( TRUE 异步 , FALSE 同步)
                                            params: {
                                                tableName:record.data.text
                                            },
                                            success: function(response, opts) { 
                                                jsonStoreFieldCol = Ext.JSON.decode(response.responseText);
                                                console.log(jsonStoreFieldCol[0].name);
                                            }, 
                                            failure: function() {  
                                            }  
                                        });
                                        var colName = jsonStoreFieldCol[0]==null?'':jsonStoreFieldCol[0].name;
                                        var tab =  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:jsonStoreFieldCol
                                                             })//creategrid
                                            ],
                                            title: record.data.text+" 表",
                                            iconCls:'grid-shortcut32'
                                        }).show();
                                        tabs.setActiveTab(tab);
                                    }
    
                                }
    
                            }
                       },
                       {
                           tableTabPanelId:"szxdesktop.app.database.DatabaseWindowTabPanel",
                           region:'center',
                           xtype:"tabpanel",
                           bodyStyle: 'padding: 0px;',
                           layout: 'fit',
                           items: [],
                           padding: 0
                       }//tabpanel
                ]//items
                });
            }
            return win;
        }
    });

extend表示继承父类所有属性  
alias则是定义这个类的别名，即简称  
requires则类似java中的import，即加载该类中使用到的其他的类定义

## 3. Ajax情求 ##

我使用的Ext下面的方法进行的Ajax操作

在该方法中async为true表示异步请求，为false表示同步阻塞请求（即请求完成后，才进行后面语句的执行）

上面的三点即是常用到的三点，至于tabpanel、gridpanel等的使用，可以在要用到的时候，参考示例或者api即可。

[20150809232410947]: /images/20220731/bba107bf72df45ca904d73ba8e6dce6e.png
[Ext.Loader]: /images/20220731/687d9647ec144f9f8c2de5869c2de153.png
[20150810002611182]: /images/20220731/10720fb2f32a4f4391275e9b3c990b1b.png