PDA

View Full Version : Ext.ux.AboutWindow



cobnet
27 Sep 2008, 10:51 AM
Ext.ux.AboutWindow = Ext.extend(Ext.Window, {
// Prototype Defaults, can be overridden by user's config object

id: 'winAbout'
, title: '- About'
, iconCls: 'templateModule-help'
, modal: true

, layout: 'fit'

, height: '400'
, width: '400'

// , closeAction: 'hide'
, plain: true
, bodyStyle: 'color:#000'

, aboutMessage : 'aboutMessage'
// , moduleAboutURL : 'system/modules/templateModule/about.txt'

, helpMessage : 'helpMessage'
// , moduleHelpURL : 'system/modules/templateModule/help.txt'

, moduleCreditsURL : 'system/modules/templateModule/credits.txt'

, moduleLicenseURL : 'system/modules/templateModule/license.txt'

, moduleReadmeURL : 'system/modules/templateModule/readme.txt'


, initComponent: function(){
// Called during component initialization

// Config object has already been applied to 'this' so properties can
// be overriden here or new properties (e.g. items, tools, buttons)
// can be added, eg:
Ext.apply(this, {
items: new Ext.TabPanel({
id: this.id + 'tabAboutPanel'
, autoTabs: true
, activeTab: 0
, border: false
, defaults: {
autoScroll: true
}
, items: [{
id: this.id + 'tabAbout'
, title: 'About'
, bodyStyle: 'padding:5px'
, html: this.aboutMessage
}
, {
id: this.id + 'tabHelp'
, title: 'Help'
, bodyStyle: 'padding:5px'
, html: this.helpMessage
}
, {
id: this.id + 'tabCredits'
, title: 'Credits'
, autoLoad: {
url: this.moduleCreditsURL
}
}
, {
id: this.id + 'tabLicense'
, title: 'License'
, autoLoad: {
url: this.moduleLicenseURL
}
}
, {
id: this.id + 'tabReadme'
, title: 'Readme.txt'
, autoLoad: {
url: this.moduleReadmeURL
}
}
]
})
});

// Before parent code

// Call parent (required)
Ext.ux.AboutWindow.superclass.initComponent.apply(this, arguments);

// After parent code
// e.g. install event handlers on rendered component
}

// Override other inherited methods
, onRender: function(){
// Before parent code

// Call parent (required)
Ext.ux.AboutWindow.superclass.onRender.apply(this, arguments);

// After parent code
}
});

// register xtype to allow for lazy initialization
Ext.reg('aboutwindow', Ext.ux.AboutWindow);

// Example uses:
// var myComponent = new Ext.ux.AboutWindow({
// id: this.moduleId
// });

// Or lazily:

// {..
// items: {xtype: 'aboutwindow', id: this.moduleId}
// ..}




This Extension can be used by any window/panel/module/etc, including qWikiOffice. It is basically a way to call some Standard needs of a module, Readme.txt, License, Credits, About, etc. The demo I have shows the use of this extension thru the Top Right Hand Tools of a Window, an added button next to the winMin/Max winClose buttions. When clicked a new window will open up with a tab panel and tabs for each of the Readme/License/Credits/About options. This extension helped me reduce the code size of many of my modules and I thought it might be of help to others.

An example of usage for any window/panel/etc:



, tools:[{
id:'help'
, qtip: 'Help'

, scope: this
, on:{
click: function(){
showAbout();
}
}
}]




// Use of Ext.ux.AboutWindow Extension.
var winAbout = new Ext.ux.AboutWindow({
id: this.moduleId + '-About'

, title: this.moduleTitle + ' - About'
, iconCls: 'templateModule-help'

, modal: false
, layout: 'fit'

, height: moduleAboutHeight
, width: moduleAboutWidth

// , closeAction: 'hide'

, plain: true
, bodyStyle: 'color:#000'

// , aboutMessageURL: this.moduleAboutURL
, aboutMessage: '<div id="'+ this.moduleId + '-about"><img src="icons/logo.png" alt="" /></div><div id="' + this.moduleId + '-about-info"><b><a href="' + this.moduleLink + '" target="_blank">' + this.moduleTitle + '</a></b><br />Version: ' + this.moduleVersion + '<br />Author: ' + this.moduleAuthor + ' (c) 2008,<br /><br />Description: ' + this.moduleDescription + '<br /><br />' + this.moduleAboutMore + '</div>'


// , helpMessageURL: this.moduleHelpURL
, helpMessage: this.moduleHelp

, moduleCreditsURL: this.moduleCreditsURL
, moduleLicenseURL: this.moduleLicenseURL
, moduleReadmeURL: this.moduleReadmeURL

});

function showAbout() {
winAbout.show();
} //showAbout




This latest download and examples can be found here: http://qwikioffice.com/forum/viewtopic.php?f=6&t=1793

Credits definitely need to goto Yannick and the Desk-Kregator Module where I first saw this idea in use!


Please along any ideas, suggestions, etc............

mjlecomte
27 Sep 2008, 11:34 AM
Having posted this in the Ext JS forums, you might indicate what this is for, is it only for use with qWikiOffice, etc. I don't get it.

cobnet
27 Sep 2008, 12:12 PM
Having posted this in the Ext JS forums, you might indicate what this is for, is it only for use with qWikiOffice, etc. I don't get it.

Ok, sorry I guess it isn't too obvious. 1st posting has been edited.

I hope this helps???????
Mark