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) {

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就没了。