Extjs2.0 desktop 动态创建桌面图标和开始菜单

这几天一直纠结Extjs desktop怎么动态读取数据，用Ext.net已经实现但是不灵活。Ext.net做出来的桌面在窗口关闭后只是隐藏该窗口，并没有释放，对于我这种js菜鸟来说，改那一坨代码要人命啊。本来想用extjs4.2做桌面，不过下载下来发现在IE8下有个bug，一时也不知道该如何解决，于是还是用2.0吧。。。。。

经过网上搜索，找到了一篇不错的文章/article/3938891.html。

这篇文章详细的解释了如何动态实现，不过文章里面用的是测试数据，当我换成用ajax请求返回json数据时遇到了问题。

用一贯alert（）的手段，测出来了extjs先执行了sample.js这个文件里面的内容最后才执行ajax。

于是在deskop.html这个页面里我是这样写的

Ext.Ajax.request({
url: 'AjaxRequest/GetWindow.aspx',
params: {},
success: function(resp, opts) {

var data = Ext.util.JSON.decode(resp.responseText);//返回的json字符串经过解析成json数据
var menuData = Ext.data.Record.create([
{ name: 'text' },
{ name: 'url' },
{ name: 'filterUrl' },
{ name: 'leaf' },
{ name: 'menuId' },
{ name: 'appId' },
{ name: 'children' }
]);
var myReader = new Ext.data.JsonReader({}, menuData);
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),

reader: myReader
});

//在这个地方将sample.js内的代码拷贝过来

},

failure: function(resp, opts) {
Ext.Msg.alert('警告', "请求的页面不存在，请联系管理员");
}
});

先用ajax请求，请求成功之后再开始执行samp.js的内容:

AjaxRequest/GetWindow.aspx这个页面的代码：

//按照这种格式输出json字符串

string s = @"[ { 'text': '测试', 'url': 'null', 'filterUrl': '', 'leaf': false, 'menuId': '100489',
'appId': 0, 'children': [{ 'text': '程序组定义', 'url': '../Default.aspx', 'filterUrl': 'null', 'leaf': true, 'menuId': '100531', 'appId': 0}]}
,{ 'text': '测试', 'url': 'null', 'filterUrl': '', 'leaf': false, 'menuId': '100489',
'appId': 0, 'children': [{ 'text': '程序组定义', 'url': '../Default.aspx', 'filterUrl': 'null', 'leaf': true, 'menuId': '100531', 'appId': 0}]}
]";
Response.Write(s);
Response.End();

如图：


然后增加了桌面右键菜单：


在desktop.js中增加如下代码即能实现

this.closeWindows = function() {
windows.each(function(win) {
win.close();
},
this);
}

this.minimizeWindows = function() {
windows.each(function(win) {
if (win.minimizable) {
minimizeWin(win);
}
},
this);
}

this.contextMenu = new Ext.menu.Menu({
items: [{
text: '关闭所有',
handler: this.closeWindows,

scope: this
},
'-', {
text: '全部最小化',
handler: this.minimizeWindows,

scope: this
},
'-', {
text: '刷新页',
handler: function() {
window.location.href = window.location.href;
},
scope: this
},
'-', {
text: '系统设置',
// handler: this.ShowWallpaper_Win,
handler: function() {
var win = Ext.get("0000000001");
if (!win) {

win = new Ext.Window({
id: '0000000001',
//contentEl: "win", //重新生成窗体时，不可重复定义
maximizable: true,
closeAction: 'close',
minimizable: false,
iconCls: 'bogus',
width: 700,
height: 450,
title: "系统设置",
modal: false,
contentEl: Ext.DomHelper.append(document.body, {
tag: 'iframe',
style: "border 0px none;scrollbar:true",
src: '../UserSet/UserSet.aspx',
allowtransparency: true,
frameborder: 0,
height: "100%",
width: "100%"
})
});

win.show();
}
},
scope: this
}]
});
desktopEl.on('contextmenu',
function(e) {
e.stopEvent();
this.contextMenu.showAt(e.getXY());
},
this);

做完之后客户需要对桌面图标的大小、桌面图标下文字颜色、背景图片等进行改变，我又用jquery实现了这些功能。

网上搜索有人是这样http://blog.csdn.net/junmoxie/article/details/8021987实现动态读取url弹出窗口的,本人用这种iframe试过发现有些bug，具体怎么回事不太清楚，不过找到了解决办法。

//原来是这样写的
　　    createMyWindow: function (win_data) {

var desktop = this.app.getDesktop();

var win = desktop.getWindow(win_data.id);

if (!win) {

win = desktop.createWindow({

id: win_data.id,

title: win_data.title,

width: 640,

height: 480,

html: '<iframe style="position:relative;background-color:transparent;" allowtransparency="true" width="100%" height="100%"  frameborder="0" src="' + win_data.url + '"></iframe>',

iconCls: 'bogus',

animCollapse: false,

constrainHeader: true

});

}

win.show();

return win;

},

//将html： html: '<iframe style="position:relative;background-color:transparent;" allowtransparency="true" width="100%" height="100%" frameborder="0" src="' + win_data.url + '"></iframe>',

改成： contentEl: Ext.DomHelper.append(document.body, {
tag: 'iframe',
style: "border 0px none;scrollbar:true",
src: '../UserSet/UserSet.aspx',
allowtransparency: true,
frameborder: 0,
height: "100%",
width: "100%"
})

这样那个bug就没了，不知道为什么。不过经过IE自带的调试工具发现，如果直接用没改动的那段代码创建的窗口，在关闭后还会请求原来的页面，过一会就报"没有权限"错误，如果关了之后立马打开不会有问题，就是只关不开后就报错。将代码改动后这个bug就没了。