这几天一直纠结Extjs desktop怎么动态读取数据，用Ext.net已经实现但是不灵活。Ext.net做出来的桌面在窗口关闭后只是隐藏该窗口，并没有释放，对于我这种js菜鸟来说，改那一坨代码要人命啊。本来想用extjs4.2做桌面，不过下载下来发现在IE8下有个bug，一时也不知道该如何解决，于是还是用2.0吧。。。。。
经过网上搜索，找到了一篇不错的文章http://cat-rat.iteye.com/blog/1462567。
这篇文章详细的解释了如何动态实现，不过文章里面用的是测试数据，当我换成用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',
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%",
"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, 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%",
"100%"
})
这样那个bug就没了，不知道为什么。不过经过IE自带的调试工具发现，如果直接用没改动的那段代码创建的窗口，在关闭后还会请求原来的页面，过一会就报"没有权限"错误，如果关了之后立马打开不会有问题，就是只关不开后就报错。将代码改动后这个bug就没了。