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

这几天一直纠结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',
                        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就没了。

 ↓↓↓扫描下面的二维码，关注我的公众号