In the Desktop\js directory contains 5 JS files, these 5 JS files are as follows:
and CSS stylesheets: desktop.css, picture footage
The classes used to emulate the desktop are encapsulated in these 5 JS files, which are as follows:
Ext.ux.StartMenu (startmenu.js) analog OS Desktop Start menu at the bottom left
Ext.ux.TaskBar (taskbar.js) simulated OS desktop taskbar in the lower right
Ext.desktop (Desktop.js) simulates the entire desktop of the operating system
Ext.app.Module (module.js) corresponds to each function module in the entire application
EXT.APP.APP (app.js) corresponds to the entire application
Since these classes are not included in the core components of ExtJS, before using these classes, refer to these JS files and the corresponding CSS files, as follows:
[JavaScript]View Plaincopy
- <script type="Text/javascript" src="js/startmenu.js" ></script>
- <script type="Text/javascript" src="js/taskbar.js" ></script>
- <script type="Text/javascript" src="js/desktop.js" ></script>
- <script type="Text/javascript" src="js/app.js" ></script>
- <script type="Text/javascript" src="js/module.js" ></script>
- <script type="Text/javascript" src="sample.js" ></script>
Where DESKTOP.CSS simulates the desired style file for the desktop, the desktop is implemented in the Samples.js file using the above 5 classes.
The 1th step in using the desktop component is to create a Ext.app.App object with the following code:
[JavaScript]View Plaincopy
- Desktop Component Configuration
- MyDesktop = New Ext.app.App ({
- //Initialize
- Init:function () {
- Ext.QuickTips.init ();
- },
- //Create function Modules
- GetModules: function () {
- return [
- new Mydesktop.gridwindow (),
- new Mydesktop.tabwindow (),
- new Mydesktop.accordionwindow (),
- new Mydesktop.bogusmenumodule (),
- new Mydesktop.bogusmodule ()
- ];
- },
- //Configure Start Menu
- Getstartconfig: function () {
- return {
- Title: ' My system ',
- ICONCLS: ' user ',
- Toolitems: [{
- Text:' Settings ',
- ICONCLS:' Settings ',
- Scope: this
- },'-', {
- Text:' logout ',
- Iconcls:' logout ',
- Scope: this
- }]
- };
- }
- });
Unlike creating most ExtJS components, when you create a Ext.app.App object, you do not need to specify the method of initializing the desktop after the page has finished loading in the Ext.onready method, ExtJS after the page is loaded, Automatically invokes the Init method of Ext.app.App to initialize the simulated desktop.
After the Init method executes, ExtJS automatically calls the GetModules and Getstartconfig methods to configure the entire application. The GetModules method returns an array that contains multiple Ext.app.Module objects. Each Module object represents a functional module in the application that appears on the desktop as a pop-up window. You can use the Ext.ux.StartMenu of the Start menu of the simulation desktop to expand the windows of these functional modules.
For windows that have already been expanded, you can also control the display or hiding of a window by simulating the Ext.ux.TaskBar of the taskbar under the desktop.
The Startconfig () function in EXT.APP.APP is primarily used to configure options for the Start menu. The example is configured with two buttons, the names are "settings", "logout", can be configured like ordinary menu items, set the corresponding title, icon and other parameters. You can also set handler to perform the corresponding action when the user clicks.
[JavaScript]View Plaincopy
- /*
- * Create a function module named Mydesktop.gridwindow and initialize it in the Ext.app.App getmodules () function.
- */
- Mydesktop.gridwindow = Ext.extend (Ext.app.Module, {
- ID:' grid-win ',
- //Initialize
- Init: function () {
- This.launcher = {
- Text: ' Grid Window ',
- ICONCLS:' accordion ',
- Handler: This.createwindow,
- Scope: this
- }
- },
- CreateWindow: function () {
- var desktop = this.app.getDesktop ();
- var win = Desktop.getwindow (' Grid-win ');
- if (!win) {
- Win = Desktop.createwindow ({
- ID: ' grid-win ',
- Title:' Grid Window ',
- width:740,
- height:480,
- Iconcls: ' Icon-grid ',
- Shim:false,
- Animcollapse:false,
- Constrainheader:True
- });
- }
- Win.show ();
- }
- });
When creating a functional module for EXT.APP.APP, integrate the Ext.app.Module provided by EXT, which defines only one init () function, which needs to be rewritten to implement our function.
In general, you only need to define a launcher object in the init () function, which is a JSON object that contains some of the configuration needed to start the function module. When the corresponding function module is clicked in Ext.ux.StartMenu, the handler attribute defined in the launcher is executed, and the corresponding window of the function module is ejected.
The handler attribute in the example corresponds to its own CreateWindow () function. In this callback function, we first obtain the entire application corresponding simulation desktop through This.app.getDesktop (), and then use Desktop.getwindow (' Grid-win ') to determine whether the window of the function module already exists, if the window has not been created, Just call Desktop.createwindow () to create this window, and show it out.
In addition to using the Ext.ux.StartMenu Display function window, we can also use the desktop shortcut to launch the corresponding function module, click on the simulation desktop placed on the icon or link, you can let the corresponding function window directly displayed.
[JavaScript]View Plaincopy
- Mydesktop.tabwindow = Ext.extend (Ext.app.Module, {
- ID:' tab-win ',
- Init: function () {
- This.launcher = {
- Text: ' Tab Window ',
- Iconcls:' tabs ',
- Handler: This.createwindow,
- Scope: this
- }
- },
- CreateWindow: function () {
- var desktop = this.app.getDesktop ();
- var win = Desktop.getwindow (' Tab-win ');
- if (!win) {
- Win = Desktop.createwindow ({
- ID: ' tab-win ',
- Title:' Tab Window ',
- width:740,
- height:480,
- HTML:' Tab Window ',
- Iconcls: ' tabs ',
- Shim:false,
- Animcollapse:false,
- Border:false,
- Constrainheader:True
- });
- }
- Win.show ();
- }
- });
The shortcut in Ext.desktop is called shortcut, and we don't need to write any code to configure the shortcut, just follow certain rules when naming tags and objects.
The HTML tags used to simulate the shortcuts displayed on the desktop are as follows:
[JavaScript]View Plaincopy
- <DL id="x-shortcuts" >
- <dt id="Grid-win-shortcut" >
- <a href="#" ><img src="images/s.gif"/>
- <div>grid window</div></a>
- </dt>
- </dl>
The simulation shortcuts must be included in the DL tag for id = ' x-shortcuts ', and each DT label contained in the DL tag will be a shortcut. These dt tag properties end with-shortcut, and the-shortcut part of the id attribute is removed to get the ID of the function module.
Reprinted from: http://blog.csdn.net/sjf0115/article/details/9346727
ExtJS Desktop Components (desktops)