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 后就是上面 window 的 id, 这个与上面对应，所以能取到 )

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

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

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

                }

            }

        });

    }