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="data:images/powered.gif" /></a>
    <dl id="x-shortcuts"><!-这就是一些桌面图标->
        <dt id="grid-win-shortcut"><!-这个id和后台命名对应->
            <a href="#"><img src="data:images/s.gif" />
            <div>Grid Window</div></a>
        </dt>
        <dt id="acc-win-shortcut">
            <a href="#"><img src="data: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();//显示窗体
    }
});
//其他就是创建不同格式的窗体

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

  1. VC使用flash简易教程

    1.基本概念: VC为Flash实现了一个CWnd的包装:CShockwaveFlash,该类实现了FlashActiveX控件的所有功能. shockwave flash object控件有四个事件 ...

  2. 文件上传利器SWFUpload入门简易教程

    凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...

  3. PHP的swoole扩展安装方法详细教程

    这篇文章主要为大家分享了PHP的swoole扩展安装方法详细教程,具有实用性和参考价值,感兴趣的小伙伴们可以参考一下 Swoole支持PHP 5.3.10以上版本,所以安装Swoole之前请先安装PH ...

  4. Ocelot简易教程（六）之重写配置文件存储方式并优化响应数据

    本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝 原 ...

  5. Ocelot简易教程（四）之请求聚合以及服务发现

    上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能.希望能对大家有所帮助. 作者:依乐祝 原文地址:https://ww ...

  6. Ocelot简易教程（三）之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  7. Ocelot简易教程（二）之快速开始2

    为什么这篇的标题叫"Ocelot简易教程(二)之快速开始2"呢,因为很多朋友跟我说上一篇" Ocelot简易教程(二)之快速开始1"内容太少了,只是简单介绍Oc ...

  8. Ocelot简易教程（二）之快速开始1

    Ocelot是为.net core量身定做的,目前是基于 netstandard2.0进行构建的. .NET Core 2.1中如何使用呢? 安装NuGet package 使用nuget安装Ocel ...

  9. Solidity 简易教程0x001

    Solidity是以太坊的主要编程语言,它是一种静态类型的 JavaScript-esque 语言,是面向合约的.为实现智能合约而创建的高级编程语言,设计的目的是能在以太坊虚拟机(EVM)上运行. 本 ...

最新文章

  1. 《ABAQUS 6.14超级学习手册》——1.2　ABAQUS分析模块
  2. python 3.7.3 thinker_GitHub - thinkerwalker/python3-bin
  3. HDU 1559 最大子矩阵
  4. 【CSDN】【从800+CSDN支持的Emoji表情中筛选出文章标题可用的 1️⃣ 2️⃣ 4️⃣ 个表情并进行分类】（文章标题如何使用Emoji表情）⚽️
  5. EventBus设计与实现分析——订阅者的注册
  6. GIT项目管理工具(part6)--放弃工作区文件修改及从仓库区恢复文件
  7. java扫描指定package注解_java获取包下被指定注解的类
  8. 白盒测试 | 用例设计方法之判定覆盖
  9. 根据hibernate拦截器实现可配置日志的记录
  10. python里面装数据库_python 安装操作 MySQL 数据库.
  11. mysql 存储过程 输出table_mysql 存储过程 没有结果输出。
  12. java 注解学习_JAVA注解学习
  13. ActiveMQ 依赖JDK版本
  14. 第二章 数学运算、数组、文字处理
  15. gridview checkbox从服务器端和客户端两个方面实现全选和反选
  16. android 物业管理系统,基于Android的物业管理系统
  17. mc服务器地图无限大吗,我的世界：4个小秘密，没想到啊，地图的范围这么大！...
  18. oracle得oem,Oracle--OEM与常见故障处理
  19. 美剧24中的SAP软件
  20. PAT 1009 蜜蜂寻路

热门文章

  1. C++ sizeof()
  2. 浅谈C++函数的参数
  3. C++中什么时候用new[]申请，可以用delete释放
  4. id文件夹怎样传入服务器,服务器id怎么设置
  5. 「Ubuntu」仓库 “https://mirrors.tuna.tsinghua.edu.cn/ubuntu focal Release” 没有 Release 文件。
  6. 07/08_flink shell,基本原理及应用场景、特点、架构图、集群解剖、JobManager、TaskManagers、tasks和操作链、Session/job集群、组件介绍等、应用场景
  7. 15_clickhouse,MySQL引擎；MySQL和ClickHouse中数据类型的对应关系
  8. 06_特征选择，特征选择的原因，sklearn特征选择API
  9. 3、常用关键字，变量赋值，多个变量赋值，标准数据类型，数字，字符串，列表，元组，字典，数据类型转换
  10. ack是什么，如何使用Ack机制，如何关闭Ack机制，基本实现，STORM的消息容错机制，Ack机制