ExtJS - Desktop - 두판 FM 어플리케이션 개발

이번에는 아이콘을 미화하기 위해 웹 QQ의 아이콘을 짝퉁했다. 순전히 보기 좋다. 문제는 불여우의 Firbug는 좋은 것이다. 짝퉁은 모두 그것에 의존한다.
다음은 ExtJS 버전의 두판 FM:
    
코드는 매우 간단하다. 실현 원리는 두판 FM의 주소에 Ext.Wndow의 껍질을 씌우는 것이다.
   

Ext.define('MyDesktop.Douban', {
    extend: 'Ext.ux.desktop.Module',

    id:'douban',
    windowId: 'douban-window',

    tipWidth: 160,
    tipHeight: 96,

    init : function(){
        this.launcher = {
            text: ' FM',
            iconCls:'douban-small-shortcut',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
        var me = this, desktop = me.app.getDesktop(),
            win = desktop.getWindow(me.windowId);

        if (!win) {
            win = desktop.createWindow({
                id: me.windowId,
                title: ' FM',
                width: 430,
                height: 221,
                iconCls: 'douban-small-shortcut',
                animCollapse: false,
                border: false,
                maximizable : false,
                resizable : false,
                layout: 'fit',
                items: [
                    {
                    	xtype : 'panel',
                    	html : '<iframe id="douoban_iframe" scrolling="auto" ' + 
                    		'frameborder="no" hidefocus="" allowtransparency="true" ' + 
                    		'src="http://douban.fm/partner/webqq" name="%7B%22appid%22%3A3402%2C%22webqqkey%22%3A0.002194722502731783%2C%22webqqdomain%22%3A%22web.qq.com%22%7D"' +  
                    		// FM 
                    		'style="width: 100%; height: 100%;">'
                    }
                ]
            });
        }

        win.show();

        return win;
    },

});

위의 데스크톱은 어떻게 된 일인지 ExtJS의 데스크톱 예를 보면 최적화된 것입니다!