Asp. Net large project practice series Season 2 (2) ExtJs4 Implementation of Windows desktop (including source code)

FemaleMen conquer men with stockings, and men conquer banks with stockings. It is very important to have a bright appearance and packaging. For customers who are familiar with the same framework menu interface, a gorgeous simulated Windows desktop system interface will surely make them feel as bright as they are looking behind. Although the front of the back may be a big mom, the core of the information system is not a flashy interface. In any case, it is absolutely not a bad thing to provide an interface and interactive mode that can instantly highlight the eyes of customers.

Source code download: Xg.part1.rar, Xg.part2.rar

Note:

1. In some cases, there is still room for refactoring, and there should be no bugs. However, it is recommended that you study and digest them before using them.

2. I modified it, and the code only contains the presentation layer. I have removed the business logic and data access layer first. This is more in line with this topic and is convenient for you to apply it separately.

3. the logon page is provided with a plaintext transfer password. Note that

4. The traditional menu page is provided to demonstrate modular function page loading. You can add functions such as basic exit and logon again.

5. If you plan to use the full set of ExtJs4, we recommend that you read this series and be familiar with ExtJs4 before considering it as appropriate. If you just use this "shell" and set Iframe to use your own page, there will be no major problems.

6. If you do not have the ExtJs experience, you are not recommended to use the code in this article. This is a comprehensive application and the code is complicated.

Deployment Guide:

1. Download The xg.part1.rarand xg.part2.rar files and decompress them to obtain the directory.Xg

2. OpenXg. sln, Such

 

3. Compile the entire solution without any errors.

4.Xg. MVC. ApplicationSet ProjectStartup Item, And then pressF5Run (Chrome or IE9 is recommended. We do not recommend that you use IE6 or at a slower speed ). You can also deploy and run it in IIS. Run as follows:

5. User name: admin Password: 000000 the interface mode can be "cool desktop" or "classic menu", as shown in the following two options:

 

Incomplete User Guide:

1. directory structure explanation:

2. menus and shortcuts are dynamically generated from the Json returned by C #. Open Fiddler2 and find the Action under the corresponding Controller based on the request URL to view the code.

3. "Test Module 1" demonstrates the On-Demand Loading of new features in ExtJS4, that is, JavaScript will load only when you open this module. Therefore, Module1.aspx does not reference Module1.js. Instead, an instance of a module object is added as follows:

 <script type="text/javascript">
        Ext.create('Mod.TestModule.Module1', {
            modId: '/TestModule/Module1/Module1'
        });
</script>

Note that you need to register the folder path in run. js for On-Demand Loading:

Ext.Loader.setConfig({
            enabled : true,
            paths : {
                'Mod.TestModule' : 'http://www.cnblogs.com/Scripts/Mod/TestModule',
                'OIT.ex' : 'http://www.cnblogs.com/Scripts/Extensions',
                'Ext.ux' : 'http://www.cnblogs.com/Scripts/ux'
            }
        });

3. If you do not want the floating cloud, go to run. js and remove the following code:

// Floating cloud Control
Var I =-500;
Var el = Ext. get ('Scene _ cloud ');
Var cloudTask = {
Run: function (){
El. setStyle ('left', I + 'px ');
I ++;
If (I> document. body. clientWidth)
I =-500;
},
Interval: 30

}
Ext. TaskManager. start (cloudTask );

4. You can set your own background image list in WallpaperSettings. js. The corresponding folder is \ Scripts \ Desktop \ wallpapers"

Store: new Ext. data. TreeStore ({
Model: 'hmsdesktop. wallpapermodel ',
Root :{
Text: 'wallpaper ',
Expanded: true,
Children :[{
Text: "NONE ",
IconCls: 'asterisk _ orange ',
Leaf: true
}, Child('blue.jpg '),
Child('blue-curtain.jpg '),
Child('fields-of-peace.jpg '),
Child('fresh-morning.jpg '),
Child('colorado-farm.jpg '),
Child('blue-swirl.jpg '),
Child('mongo.jpg '),
Child('{top.jpg '),
Child('{top2.jpg '),
Child('sky.jpg '),
Child('19201080.jpg '),
Child('FGHJ_079020.jpg '),
Child('cloud.jpg ')]
}
})

5. HMSDesktop. js is an example of desktop js. It is recommended that you start from here and change the Start menu title here:

// Start Menu
GetStartConfig: function (){
Var me = this, ret = me. callParent ();

Return Ext. apply (ret ,{
Title: 'legend of string ',
Height: 400,

 

6. You can change the path of the logo image under "\ Content" and "\ Scripts \ Desktop \ images.

 

Next announcement:

It is estimated that you will raise some questions and plan to answer and solve your questions in the next article, as well as more detailed code descriptions for each interface element.

 

If you haven't asked any questions, this will be the next article:

Asp. Net large project practice series Season 2 (3) no human cloud, no detours! ExtJs cognition, development, debugging
Behind the gorgeous scenes is the boring code. This is the tool for programmers to bring the gorgeous scenes to others and leave the boring scenes to themselves .... in the next article, we will discuss some misunderstandings about ExtJs and assess whether it is suitable for your project. In addition, string brother will take you a shortcut to correctly master the development and debugging methods of ExtJs, this frees ExtJs from getting started and developing...

 

To be continue...