Extjs 4学习系列 二

二章 Ext 框架基础及核心 （1）

一 类库简介
   src 文件夹下
   1  底层API （core文件夹下）
   2  控件
   3  实用工具 Utiles

二 core 案例
   使用 core 下的 Examplesr 的Index.html,此例引用了Sample下定义的 Person.js
   1. 创建对象及使用
   代码：
     

Ext.require('Sample.Person', function() {
        var aaron = new Sample.Person({
            name: 'Aaron Conran',
            gender: 'male',
            isCool: true
        });

        alert(aaron.getName()); // 'Aaron Conran'
        alert(aaron.getGender()); // 'male'
        alert(aaron.getIsCool()); // true

        aaron.eat("Salad"); // alerts "I'm eating: Salad"

        aaron.setGender('weird');
        alert(aaron.getGender()); // 'unknown'
    });

    学习的第一章我们使用了<script type="text/javascript" src="js/ext-all.js"></script> 在页面加载时
    将Ext的包全部下载使用了，这样将会导致一个简单页面加载了许多不需要的资源，所以Ext4加入了动态加载的概念。

    Ext.require('Sample.Person', function()  {   }  

    这句的意思就是要求Ext JS加载Sample.Person类，加载完之后调用函数，创建Person实例。
    其余的属性赋值与方法调用，比较简单，就不详述了。

    Ext.require函数可支持数组的参数，传入多个要加载的类。用起来十分方便，当然背后隐藏了相当多的细节。
    Ext JS 4的动态加载这种方式不需要服务端的安装什么，纯客户端的。
    值得一提的是，它能自动计算依赖关系，下载所需的类。

    2  案例：动态加载一个窗口
       Html：
      

<html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>测试动态加载</title>

    <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"/>

    <script type="text/javascript" src="js/bootstrap.js"></script>    //这里可以不是 Ext-all.js了
    <script type="text/javascript" src="Dload2.js" ></script>
    <script type="text/javascript" src="js/locale/ext-lang-zh_CN.js"></script>
    </head>

    <body>
    <input type="button" id="btn_show" value="加载窗口"/>

        
    </body>

    </html> 

       Dload2.js:
       

Ext.require([
        'Ext.tab.*',
        'Ext.window.*',
        'Ext.tip.*',
        'Ext.layout.container.Border'
    ]); //引入需要的类库
    Ext.onReady(function(){
        var win,
            button = Ext.get('btn_show');  //关联 Id 为 btn_show 的button对象
            //定义 button的onclick事件
        button.on('click', function(){

            if (!win) {
                win = Ext.create('widget.window', {
                    title: '动态加载窗口',
                    closable: true,
                    closeAction: 'hide',
                    width: 600,
                    minWidth: 350,
                    height: 350,
                    layout: 'border',
                    bodyStyle: 'padding: 5px;',
                    items: [{
                        region: 'center',
                        xtype: 'tabpanel',
                        items: [{
                            title: 'Tab 1',
                            html: '第 1 个'
                        }, {
                            title: 'Tab 2',
                            html: '第 2 个'
                        }, {
                            title: 'Tab 3',
                            html: '第 3 个',
                            closable: true
                        }]//Tab Panel Items
                    }]//Window itmes
                });
            }
            button.dom.disabled = true;

                //切换窗口的显示状态
            if (win.isVisible()) {
                win.hide(this, function() {
                    button.dom.disabled = false;
                });
            } else {
                win.show(this, function() {
                    button.dom.disabled = false;
                });
            }
        });
    });