一点摸索extjs的Desktop

双击运行desktop.html,onReady()函数

一、对desktop.html代码的解析

代码如下

    <script type="text/javascript">
        Ext.Loader.setPath({
            'Ext.ux.desktop': 'js',
            MyDesktop: ''
        });

        Ext.require('MyDesktop.App');

        var myDesktopApp;
        Ext.onReady(function () {
            myDesktopApp = new MyDesktop.App();
        });
    </script>

<script>脚本里面写了3个函数和一个变量

1、setPath()函数 

进行命名空间处理

'Ext.ux.desktop' 代替‘js’ ,' js'带单引号说明是路径, 'js'表示和当前文件(desktop.html)同一目录下的js文件夹

MyDesktop代替'' MyDesktop, MyDesktop没有单引号是变量。 ‘’为空字符，表示和当前目录

比如 Ext.require('MyDesktop.App'); 就表示和desktop.html同一目录下的名为app的文件

同理，如果是Ext.ux.desktop.App就是表示和desktop.html同一目录下的名为js的文件夹里面的名为app的文件

2、require()函数

对要用到的类进行预加载，功能和java中import类似

3、OnReady()函数

在html页面加载或者说渲染前会自动运行此函数

这里对MyDesktop.App类进行了实例化

在外面进行变量声明，再在里面进行实例化，这种方式比较常见

var myDesktopApp;

二、对app.js文件进行解析(MyDesktop.App)

代码略

可以把app.js理解成java中的一个类文件

第8行  Ext.define('MyDesktop.App', {

Ext.define('name',{})是类定义的方式,MyDesktop.App表示该类位于MyDesktop目录下，类名为App；

花括号{}里面是配置基本参数和重写函数

第9行  参数extend是说明父类，

extend: 'Ext.ux.desktop.App' 说明这个app继承于js文件下的app文件，下面将对父类进行重写

第11行  参数require，预加载所需要的类

第29行-123行一共有7个函数

其中init()、getModules、getDesktopConfig、getStartConfig、getTaskbarConfig这5个函数是对父类的重写

onLogout、onSettings函数是新加函数

函数回头再看，等待中-------------------------------断点1

三、进入js文件夹下的app.js  (Ext.ux.desktop.App)

代码略

app类中有2个配置、3个私有变量、12个函数

2个配置mixins和require

1、第九行mixins

也是表示继承，和extend区别是：mixins可以继承多个类，extend只能继承一个类

这里继承了Ext.util.Observable

参考下

http://www.cnblogs.com/meetrice/archive/2008/05/23/1206102.html

个人理解Observable是EXT模仿面向对象中的类，类中有私有变量（这里叫property）和公共函数，

Observable的最大优势是可以给一个element绑定多个event

2、第13行requires预加载====================没看出来哪里用到的啊？

3个变量    

    isReady: false,
    modules: null,
    useQuickTips