UI器件练手：用Ext JS制作“关于”对话框（适合Ext新手）。

有时候我们接触Ext会不会因为它的羞涩的JS语法让我们感觉到，驯服它不是一件容易的事呢？或许大家初初接触的时候，没错，是有很多的例子，但叹谓之余，仍感觉是老鼠来拉耗子，无从入手呢？ 也许，我们应该静下心来，不一定要拼命地钻，不经意的一个界面，就可以由Ext绘制而成，好像这里为大家介绍的一个软件界面中常见的“关于”对话框。

下图就是最终完成的截图，不会太复杂，正好说明Ext组件的基本运用。

首先，引入必须的CSS样式规则和about.js文件到页面。about.js包含了Ext.ux.edk.aboutDialog类。以下是组件涉及的CSS样式：

.aboutDlg {
width: 308px;
height: 240px;
padding-top: 20px;
}
.aboutDlg_btn {
background-color: #eaeaea;
width: 308px;
height: 56px;
text-align: center;
}
.aboutDlg p {
color: #4b4b4b;
margin: 15px;
}

然后，按以下new语句创建aboutDialog的实例，修改对应的配置项参数(例如你可修改那个图片，this.picture的配置项)，即可创建属于自己软件的关于对话框！启动对话框的代码如下：

Ext.onReady(function(){
(new Ext.ux.edk.aboutDialog({
picture : 'setup_2.jpg'
,AppVersion : .9
,AppText : '"Html、Javascript、DOM是Ajax浏览器页面开发必须掌握的基础知识，否则，页面编程无从谈起。"'
,AppLinkText : 'Ext中文网'
,AppLinkHref : 'http://www.ajaxjs.com'
})).show();
});

我们以Ext.Window写出新的扩展，Ext都是这样，一个个组件都是继承而来的，利用类库就是这个Ext SDK里面已经提供的类，比如现在的这个Ext.Window，在其基础上展开我们的新组件的旅程，这样在不断有新的组件，就从不同的UI元件上新继承。

Ext.ns('Ext.ux.edk');
/**
* @class Ext.ux.aboutDialog
* @extends Ext.window
* @cfg isXXL {Boolean} (Optional) true if about Dialog will look more larger(for some skins/thmem).
* @cfg AppName {String} Application Name
* @cfg AppVersion {String} Application Version
* @cfg AppText {String} Text to display about App.
* @cfg AppLinkHref {String} The App. URL to open with new Window.
* @cfg AppLinkText {String} The App. URL to display text,must be started with 'http://'
* @cfg showExtJS {Boolean} (Optional) true if show the text about ExtJS
* @cfg ExtVersion {String} (Optional) the version of Ext
* @cfg icon {String} (Optional) App. icon path ,size in 15x15 is better
* @cfg picture {String} The picture on dialog's left,size in 15x15 is better
**/
Ext.ux.edk.aboutDialog = Ext.extend(Ext.Window, {
cls : 'x-aboutDialog'
,modal : true
,resizable : false
,title : '关于deepCMS'
,width : 488
,height : Ext.isIE ? 350:343
,isXXL : false
,showExtJS : true
,ExtVersion : '3.0'
,initComponent : function(){
this.html = {
tag : 'table',
style : 'background:#f4f4f4',
children : {
tag: 'tr',
children: [{
tag : 'td'
,valign : 'top'
,children : {
tag : 'img'
// ,height : 316
,src : this.picture
}
}, {
tag : 'td'
,valign : 'top'
,children : [{
tag : 'div'
,cls : 'aboutDlg',
html : '<p style="text-align:right;" mce_style="text-align:right;">' +
'当前版本：' +
this.AppVersion +
'<br />Powered by ExtJs UI Engine<br />Ext All in One Lib:Ext.ux.Helper v0.3' +
'</p>' +
'<p>' +
'Extjs and Extjs logos and trademarks of Ext JS, LLC.All rights reserved.<br />' +
this.AppText +
'</p><br />' +
'<p>' +
'deepCMS采用<a rel="license" target="_blank" href="http://creativecommons.org/licenses/LGPL/2.1/deed.zh" mce_href="http://creativecommons.org/licenses/LGPL/2.1/deed.zh">' +
'CC-GNU LGPL协议</a>进行许可。' +
'</p>'
}, {
tag : 'div'
,cls : 'aboutDlg_btn'
,html : String.format('<br /><button style="width:75%;margin-right:8px;">Upgrde/Support：{0}</button><button>OK</button>', this.AppLinkText)
}]
}]
}
};
Ext.ux.edk.aboutDialog.superclass.initComponent.apply(this, arguments);
}
// @overried
,afterRender: function(){
Ext.ux.edk.aboutDialog.superclass.afterRender.apply(this, arguments);

// 打开网址
this.getEl().child('button:first').on('click', function(){
window.open(this);
}, this.AppLinkHref);

// this已经是aboutDialog实例，即可被委托了，故this.close即可直接被引用到事件处理器。
this.body.child('button:last').on('click', this.close, this); //
}
});

（虽然“配置项”的注释部分是英文，但俺写的是非常地道的中式英文：））

可以跟大家说，只要上面的每一行代码都够知道个所以然，那学习Ext的缤纷大道正为阁下所敞开着…

此处披露的内容是《ExtJS 3详解与实践》

一书的全面介绍。