ExtJS DeskTop组件的学习

se7en8974

网上千篇一律的 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();
                }
            }
        });
    }