Ext DeskTop的使用方法简易教程及相关例子Demo(转)

72 阅读 0 评论 48 点赞

我是靠谱客的博主闪闪柜子，最近开发中收集的这篇文章主要介绍Ext DeskTop的使用方法简易教程及相关例子Demo(转)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Ext DeskTop的使用方法简易教程及相关例子Demo(转)

ExtJS 2010-12-31 10:11:15 阅读196 评论0 字号：大中小订阅

http://qwikioffice.com/desktop-demo/

http://gsylvain35.free.fr/desktop/

http://extforumdemo.altervista.org/

http://cobnet.com/icmsBeta2/extjs/ex...top/login.html

首先为了浏览器兼容问题可以把网页头的文档类型定义<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉。

第一步当然是导入js和css，官方的例子是这样导入的

HTML语言:
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" />
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all-debug.js"></script>
<script type="text/javascript" src="js/StartMenu.js"></script>
<script type="text/javascript" src="js/TaskBar.js"></script>
<script type="text/javascript" src="js/Desktop.js"></script>
<script type="text/javascript" src="js/App.js"></script>
<script type="text/javascript" src="js/Module.js"></script>
<script type="text/javascript" src="sample.js"></script><!-例子代码，以后会在这个文件的基础上扩展->

页面的body里就放一下代码

HTML语言:
<body scroll="no">
<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"><!-这个id和后台命名对应->
            <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>
    </dl>
</div>
<div id="ux-taskbar"><!-开始菜单->
    <div id="ux-taskbar-start"></div>
    <div id="ux-taskbuttons-panel"></div>
    <div class="x-clear"></div>
</div>
</body>

简单看看sample.js里面有什么

JavaScript语言:
MyDesktop = new Ext.app.App({
    init :function(){
        Ext.QuickTips.init();
    },
    getModules : function(){
        return [
            new MyDesktop.GridWindow(),
            new MyDesktop.TabWindow(),
            new MyDesktop.AccordionWindow(),
            new MyDesktop.BogusMenuModule(),
            new MyDesktop.BogusModule()
        ];
    },
    // 开始菜单的配置，把Start 改成开始要修改TaskBar.js的内容
    getStartConfig : function(){
        return {
            //开始菜单的标题
            title: 'Jack Slocum',
            //标题前的图片样式
            iconCls: 'user',
            //开始菜单侧边的一些配置，结合例子自己看可以加handler指定相关方法
            toolItems: [{
                text:'Settings',
                iconCls:'settings',
                scope:this
            },'-',{
                text:'Logout',
                iconCls:'logout',
                scope:this
            }]
        };
    }
});

MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
    //body中指定的id编号
    id:'grid-win',
    init : function(){
        this.launcher = {
            //窗体的名称
            text: 'Grid Window',
            //窗体的图片样式
            iconCls:'icon-grid',
            //创建窗体的方法，
            handler : this.createWindow,
            scope: this
        }
    },
    createWindow : function(){
        //获得desktop对象
        var desktop = this.app.getDesktop();
        //获得名称为grid-win的窗体
        var win = desktop.getWindow('grid-win');
        if(!win){//窗体为空，既没有这个窗体就创建它
            //一下就是窗体配置，自己研究一下
            win = desktop.createWindow({
                id: 'grid-win',
                title:'Grid Window',
                width:740,
                height:480,
                iconCls: 'icon-grid',
                shim:false,
                animCollapse:false,
                constrainHeader:true,
                layout: 'fit',
                items:
                    new Ext.grid.GridPanel({
                        border:false,
                        ds: new Ext.data.Store({
                            reader: new Ext.data.ArrayReader({}, [
                               {name: 'company'},
                               {name: 'price', type: 'float'},
                               {name: 'change', type: 'float'},
                               {name: 'pctChange', type: 'float'}
                            ]),
                            data: Ext.grid.dummyData
                        }),
                        cm: new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),
                            {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
                            {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                            {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
                            {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
                        ]),
                        viewConfig: {
                            forceFit:true
                        },
                        //autoExpandColumn:'company',
                        tbar:[{
                            text:'Add Something',
                            tooltip:'Add a new row',
                            iconCls:'add'
                        }, '-', {
                            text:'Options',
                            tooltip:'Blah blah blah blaht',
                            iconCls:'option'
                        },'-',{
                            text:'Remove Something',
                            tooltip:'Remove the selected item',
                            iconCls:'remove'
                        }]
                    })
            });
        }
        win.show();//显示窗体
    }
});
//其他就是创建不同格式的窗体