技术开发 频道

.NET项目:Windows桌面的ExtJs4实现

  用户名:admin 密码: 000000 界面模式有“酷炫桌面”和“经典菜单”2种选择进去后分别如下图:

  不完全使用指南:

  目录结构解释:

  菜单和快捷方式都是从C#返回的Json动态生成的,打开Fiddler2 根据请求的URL地址找到相应Controller下的Action 就可以查看到代码。

  Asp.Net大型项目实践系列第二季(三)莫人云亦云,莫走弯路!ExtJs 认知、开发、调试3.“测试模块1”演示了ExtJS4的按需加载新特性,也就是只有你打开这个模块的时候,js才会加载。所以在Module1.aspx并没有对Module1.js的引用。而是这样去new了一个模块对象的实例:

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

  要注意的是按需加载需要在run.js里注册文件夹路径:

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'            
             }      
      });

      如果不想要那个在飘的浮云,去run.js去掉如下代码:

// 浮云控制            
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);

  WallpaperSettings.js可以设置自己的背景图片列表,对应的文件夹是“\Scripts\Desktop\wallpapers”

store : new Ext.data.TreeStore({                
                  
            model :
'HMSDesktop.WallpaperModel',  
            root : {
                text :
'Wallpaper',
                expanded :
true,
                children : [{
                            text :
"",
                            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(
'desk.jpg'),
                          child(
'desktop.jpg'),
                          child(
'desktop2.jpg'),
                          child(
'sky.jpg'),
                          child(
'19201080.jpg'),
                          child(
'FGHJ_079020.jpg'),
                          child(
'cloud.jpg')]
                            
          }                      
      })

  HMSDesktop.js是桌面js的实例,建议从这里看起,改开始菜单的标题也在这里:

// 开始菜单    
getStartConfig : function() {    
    
var me = this, ret = me.callParent();          
    
return Ext.apply(ret, {  
        title :
'传说中的弦哥',                  
        height :
400,

    logo图片啥的路径在“\Content“和"\Scripts\Desktop\images"下,可以自己换。

 前一篇:Asp.Net大型项目实践

   链接地址:http://www.cnblogs.com/legendxian/archive/2011/11/18/2252913.html

   后一篇:Asp.Net大型项目实践:莫人云亦云,莫走弯路!正确认识ExtJs4

   链接地址:http://www.cnblogs.com/legendxian/archive/2011/11/24/2259592.html

    
 

 

0
相关文章