ExtJs Desktop

    技术2022-06-29  66

    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();// 显示窗口

                    }

                }

            });

        }


    最新回复(0)