ExtJS DeskTop组件的学习

 网上千篇一律的 sample.js的代码解释。

//菜单里的内容是根据创建的对象自动生成的。 
MyDesktop.Test = Ext.extend(Ext.app.Module, { 
    id:'bb-cc',//DIV中的ID值 
    init : function(){ 
        this.launcher = { 
            text: 'abcdefg',//菜单中显示的文本 
            iconCls:'tabs', 
            handler : this.createWindow, 
            scope: this 
        } 
    }, 

    createWindow : function(){ 
        var desktop = this.app.getDesktop(); 
        var win = desktop.getWindow('bb-cc');//DIV中的ID值 
        if(!win){ 
            win = desktop.createWindow({ 
                id: 'bb-cc',//DIV中的ID值 
                title:'abcdefg',//标题栏里显示的文本 
                width:740, 
                height:480, 
                iconCls: 'tabs', 
                shim:false, 
                animCollapse:false, 
                border:false, 
                constrainHeader:true, 

                layout: 'fit', 
                items: 
                    new Ext.TabPanel({ 
                        activeTab:0, 

                        items: [{ 
                            title: 'Tab Text 1', 
                            header:false, 
                            html : '<p>Something useful would be in here.</p>', 
                            border:false 
                        }] 
                    }) 
            }); 
        } 
        win.show(); 
    } 
}); 

//桌面图标

<div id="x-desktop"> 
    <a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a> 

    <dl id="x-shortcuts"> 
        <dt id="grid-win-shortcut"> 
            <a href="#"><img src="images/s.gif" /> 
            <div>Grid Window</div></a> 
        </dt> 
        <dt id="acc-win-shortcut"> 
            <a href="#"><img src="images/s.gif" /> 
            <div>Accordion Window</div></a> 
        </dt> 

            <!--创建自己的图标，特别要注意id的值的格式{xx-xx-shortcut}--//> 
            <dt id="bb-cc-shortcut"> 
                <a href="#"><img src="images/s.gif" /> 
            <div>abcdefg</div></a> 
        </dt> 
    </dl> 
</div> 

如果是直接引用ext 源码的sample改写而成 有的图片路径是不对的，ext\examples\desktop\css\desktop.css 样式引用路径。要自定义修改在里面找吧 对应sample.js. 就知道这么点了。继续学习。

desktop.js 桌面图标点击的关键代码。

为什么要起名格式是{xx-xx-shortcut}。

if(shortcuts){ 
        shortcuts.on('click', function(e, t){ 
            if(t = e.getTarget('dt', shortcuts)){ 
                e.stopEvent(); 
                var module = app.getModule(t.id.replace('-shortcut', '')); 
                if(module){ 
                    module.createWindow(); 
                } 
            } 
        }); 
    }