最近看到Extjs的示例中有仿操作系统桌面的代码，并且展示效果很美观，结合楼控这个系统的Web端展示需求，目前前端采用Extjs。楼控相关的操作会设计成桌面中的不同应用。
Extjs初次入手看起来很复杂，但是由于其自带的示例代码很丰富，通常在了解一些基本概念后，参照着示例代码一步一步去做，我认为是最好的学习方式了。
目前我参照着Extjs中仿照桌面的示例代码，做出了如下的画面：
从图中我们可以看出，我目前在仿照着这个示例代码中的GridPanel、TabPanel、Window这些基本的组件，做出了一个简易的仿数据库连接的一个工具。目前这个工具只实现了：
1.从这个Web服务器默认的数据库中读取表结构功能
2.点击表名分页查询相应表中的数据的功能
其中涉及到的js部分的功能是：
1.同步读取数据
2.异步读取数据
3.TreePanel、TabPanel、GridPanel的应用
下面在此记录一下在做这个页面过程中需要了解的基础知识。
1. ExtJS 4中动态加载路径
动态加载这个概念是在这种情况下提出的，即我们知道Extjs文件数量多且很多还很大，通常一次性加载完所有的JS文件， 对于比较大型的项目来说，把所有js文件放在同一个目录下面，通常不便于管理。所有引入了动态加载这个概念，即浏览器可以智能的找到所用到的js代码应该加载的js文件路径。
Extjs动态加载通常采用Ext.Loader来完成。
<script type="text/javascript">
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled : true,
disableCaching: false,
paths : {
‘Ext.ux.desktop‘: ‘/TacControlServerWeb/szxdesktop/js/‘,
}
});
});
</script>上面的代码启用了动态加载， 禁用了浏览器缓存， 以及指定了 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/‘
});
2. ExtJS中类
ExtJS引入了类的概念，我们可以以面向对象的思想去编写JS代码了
1）ExtJS中，创建一个类时，其内部处理过程包括一些前置处理为创建类做准备，也包括一些类创建后的后置处理，如下图所示
前置处理包括：
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操作
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() {
}
});在该方法中async为true表示异步请求，为false表示同步阻塞请求（即请求完成后，才进行后面语句的执行）
上面的三点即是常用到的三点，至于tabpanel、gridpanel等的使用，可以在要用到的时候，参考示例或者api即可。
版权声明：本文为博主原创文章，未经博主允许不得转载。