ExtJS - Desktop - 开发豆瓣FM应用


     这次为了美化图标,山寨了点WebQQ的图标,纯属好看,题外话:火狐的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的桌面例子,就是对其进行优化而来!

你可能感兴趣的:(html,function,iframe,layout,ExtJs,border)