打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
extjs desktop解析

1):打开EXT2.0/example/desktop桌面,打开sample.js文件.

      getModules : function(){//配置开始里面:左边的

             return [

                    new MyDesktop.CmpWindow(),

                    new MyDesktop.ForumWindow(),

                    new MyDesktop.softWindow()

 

             ];

      },

 

   // config for the start menu  配置开始里面,右边的

   getStartConfig : function(){

       return {

           title: ‘ddddddddddd‘,

           iconCls: ‘user’,

           toolItems: [{

               text:'后台管理',

               iconCls:'settings',

               scope:this

           },'-',{

               text:'关于',

               iconCls:'logout',

               scope:this

           }]

       };

}

 

上面这两个是配置开始栏里面的左边菜单和右边菜单.简单,而且很容易写喽.

click公司简介的时候,调用MyDesktop.CmpWindow()动态产生一个窗品,具体如何实现,看代码注解:

MyDesktop.CmpWindow = Ext.extend(Ext.app.Module, {

      id:’esk-win’, //窗口的唯一标识,这个非常重要

   init : function(){

       this.launcher = {

           text: ‘企业简介‘, //这个是标题

           iconCls:’bogus’,   //这个是标题左边的图标

           handler : this.createWindow, //产生这个窗口的函数

           scope: this

       }

   },

 

   createWindow : function(){ //产生Window函数

       var desktop = this.app.getDesktop(); //得到系统桌面对象

       var win = desktop.getWindow(”esk-win”); //取窗口

       if(!win){                           //如果这个窗口对象没有产生过

           win = desktop.createWindow({

               id: “esk-win”,          

               title:”企业简介“,/标题

               width:640,

               height:480,

               html :cmp_descr,  //内容

               iconCls: ‘bogus’,  //图标

               shim:false,

               animCollapse:false,

               constrainHeader:true

           });

       }

       win.show();  //显示窗口

   }

});

 

 开始栏是比较简单,可桌面上图标的shortCuts呢,它可是什么都没有写呀,代码如下:

   <dl id=”x-shortcuts”>

       <dt id=”esk-win-shortcut”>

           <a href=”#”><img src=”images/cmp.png” />

           <div>企业简介</div></a>

       </dt>

       <dt id=”esk-news-shortcut”>

           <a href=”#”><img src=”images/news.png” />

           <div>新闻资讯</div></a>

       </dt>

       <dt id=”esk-product-shortcut”>

           <a href=”#”><img src=”images/product.png” />

           <div>产品展示</div></a>

       </dt>

       <dt id=”esk-soft-shortcut”>

           <a href=”#”><img src=”images/show.png” />

           <div>在线演示</div></a>

       </dt>

       <dt id=”esk-download-shortcut”>

           <a href=”#”><img src=”images/down.png” />

           <div>下载中心</div></a>

       </dt>

       <dt id=”esk-word-shortcut”>

           <a href=”#”><img src=”images/word.png” />

           <div>客户留言</div></a>

       </dt>

       <dt id=”esk-forum-shortcut”>

           <a href=”#”><img src=”images/word.png” />

           <div>ESK分销论坛</div></a>

       </dt>

   </dl>

</div>

 

最后它是怎么找到对应的createWindow呢,还是把代码纠出来,一看就明白了。打开desktop.js文件

 

   var shortcuts = Ext.get(’x-shortcuts’);//取到快捷键区

   if(shortcuts){                  //如果存在

       shortcuts.on(’click’, function(e, t){

//为这个区加一个click函数,只要有click事件发生,就会掉用此处,

           if(t = e.getTarget(’dt’, shortcuts)){//click的时候

               e.stopEvent();//停此事件

//取到上面的MyDesktop.CmpWindow,注意,html当中定义的id去掉-shortcut后就是上面windowid,这个与上面对应,所以能取到)

               var module = app.getModule(t.id.replace(’-shortcut’, ”))

               if(module){//如果没有产生过

                   module.createWindow();//显示窗口

               }

           }

       });

   }

:,
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
网站添加快捷方式到电脑桌面上的3种方式 | 站长求知
php将网址生成手机桌面,php实现生成网页桌面快捷方式的方法
Visual Studio助手VassistX
完全模拟Windows桌面
Q函数的不等式
这个工具,让你的操作都快人一步 – Quick Shortcut Maker Android
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服