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详解与实践》 的补充内容，完整的资料敬请参阅《ExtJS 3 详解与实践》 一书的全面介绍。