PDA

View Full Version : Ext.ux.aboutDialog --just 'About'



Frank
10 Oct 2007, 9:30 AM
I just made About dailog for my real use app. Nothing more but shows some App. info and copyright/open-source lisense.
Requires:2.0.
Demo:www.ajaxjs.com/ext/ux/abtdlg/abtdlg.asp (http://www.ajaxjs.com/ext/ux/abtdlg/abtdlg.asp)

http://www.ajaxjs.com/ext/ux/abtdlg/a.jpg

Documention:

/**
* @class Ext.ux.aboutDialog
* @extends Ext.window
* @version 0.1 lastUpdate:2007-10-10
* @author Frank Cheung <paco42a@gmail.com> my blog <www.ajaxjs.com/frank>
* 创建“关于”对话框。用法参见:
* UI components About Dialog for Application.Usage:
<pre>
var aboutDlg = new Ext.ux.aboutDialog({
isXXL:false,
AppName:App.AppName,
AppVersion:App.Version,
AppText:'版权所有 &copy; 2000-2007 Vivid Creative Team.活映科技保留所有权力。',
AppLinkHref:'http://www.ajaxjs.com',
AppLinkText:'www.ajaxjs.com/vv/',
showExtJS:true, //optional
ExtVersion:'2.0', //optional
isXXL:false, //optional
icon:'/deepcms/resources/Tracker/pt_icon_white.gif',
picture:'/deepcms/resources/tracker/setup_2.jpg',
LicenseText: App.AppName+' is licensed under LGPL license.<br />'+App.AppName+'基于LGPL协议进行许可。'
});
aboutDlg.show();
</pre>
* @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
* @cfg LicenseText {String} (Optional) The strings of copyright/Open Source-License
**/
Source:

Ext.ux.aboutDialog = function(config){
Ext.apply(this,config||{});
Ext.ux.aboutDialog.superclass.constructor.call(this,{
renderTo:document.body,
autoCreate:true,
autoDestroy:true,
resizable:false,
width:this.isXXL?500:492,
height:this.isXXL?373:340
});
with(this){
setTitle('<img width="15" height="15" src="'+this.icon+'" /> 关于'+this.AppName);
body.createChild({
tag:'table',
style:'border:2px solid white;background:#f4f4f4',
children:{tag:'tr',children:[
{
tag:'td',
valign:'top',
style:'background-color:white;',
children:{
tag:'img',
// height:316,
src:this.picture
}
},{
tag:'td',
valign:'top',
children:[{
tag:'div',
cls:'aboutDlg',
html:'<p style="text-align:right;">' +
'Current Version:' +this.AppVersion+
(this.showExtJS?
' Extjs Lib:v'+(this.ExtVersion||'2.0')
:
'')+
'</p>' +
'<p>' +
(this.showExtJS?'Extjs and Extjs logos and trademarks of Ext JS, LLC.All rights reserved.':'')+'<br />' +
this.AppText +
'</p>' +
'<p>' + this.LicenseText||'' +

'</p>'
},{
tag:'div',
cls:'aboutDlg_btn',
html:'<br />' +
'<button style="width:75%;margin-right:8px;"' +
' onclick="window.open(\''+this.AppLinkHref+'\')">Upgrde/Support:'+this.AppLinkText+'</button>' +
'<button>OK</button>'
}]
}
]}
});

}
this.body.child('button:last-child').on('click',function(){this.hide()},this);
};
Ext.extend(Ext.ux.aboutDialog, Ext.Window,{
//default config attributions
isXXL:false,
icon:'/deepcms/icon/about.gif',
showExtJS:true,
ExtVersion:'2.0'
});

CSS Style:


/*------关于对话框样式-------*/
.aboutDlg{
width:306px;
height:233px;
padding-top:20px;
}
.aboutDlg_btn{
background-color:#eaeaea;
width:306px;
height:56px;
text-align:center;
}
.aboutDlg p{
color:#4b4b4b;
margin:15px;
}
/*------end-------*/