ExtJS DeskTop组件的学习

网上千篇一律的 sample.js的代码解释。

//菜单里的内容是根据创建的对象自动生成的。
MyDesktop.Test = Ext.extend(Ext.app.Module, {
id:'bb-cc',//DIV中的ID值
init : function(){
this.launcher = {
text: 'abcdefg',//菜单中显示的文本
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bb-cc');//DIV中的ID值
if(!win){
win = desktop.createWindow({
id: 'bb-cc',//DIV中的ID值
title:'abcdefg',//标题栏里显示的文本
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});

//桌面图标

<div id="x-desktop">
<a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a>

<dl id="x-shortcuts">
<dt id="grid-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Grid Window</div></a>
</dt>
<dt id="acc-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Accordion Window</div></a>
</dt>

<!--创建自己的图标，特别要注意id的值的格式{xx-xx-shortcut}--//>
<dt id="bb-cc-shortcut">
<a href="#"><img src="images/s.gif" />
<div>abcdefg</div></a>
</dt>
</dl>
</div>

如果是直接引用ext 源码的sample改写而成 有的图片路径是不对的，ext\examples\desktop\css\desktop.css 样式引用路径。要自定义修改在里面找吧 对应sample.js. 就知道这么点了。继续学习。

desktop.js 桌面图标点击的关键代码。

为什么要起名格式是{xx-xx-shortcut}。

if(shortcuts){
shortcuts.on('click', function(e, t){
if(t = e.getTarget('dt', shortcuts)){
e.stopEvent();
var module = app.getModule(t.id.replace('-shortcut', ''));
if(module){
module.createWindow();
}
}
});
}