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