EXTJS学习四

1.mixins

说明：类似于面向对象中的多继承

<script type="text/javascript">

    Ext.onReady(function() {
        //创建一个类，类名：TextClass，具有两个属性：A、B
        Ext.define('TextClass', {
            A: 'a',
            B: 'b'
        });
        //创建一个类，类名：TextClass，具有两个属性：A、B
        Ext.define('TextClass2', {
            C: 'c',
            write: function() {
                alert('A:'+this.A +';B:'+this.B +';C:'+this.C)
            }
        })
        Ext.define('TextClass3', {
            //继承TextClass、TextClass2
            mixins: {
                TextClass: 'TextClass',
                TextClass2: 'TextClass2'
            }
        })
        vartextClass =Ext.create("TextClass3")
        textClass.write();
    });
</script>

运行结果：

2.statics

说明：定义静态变量

例子：

<script type="text/javascript">

    Ext.onReady(function() {
        //创建一个类，类名：TextClass，具有两个属性：A、B
        Ext.define('TextClass', {
            A: 'a',
            B: 'b',
            statics: {
                C:'C'
            }
        });

        //没有实例化TextClass类
        Ext.Msg.alert('TextClass类的静态属性C的值是：', TextClass.C)
    });
</script>

执行结果：

 

3.config

说明：属性包装器，为属性提供get和set方法 

例子：

<script type="text/javascript">

    Ext.onReady(function() {
        //创建一个类，类名：TextClass，具有两个属性：A、B
        Ext.define('TextClass', {
            A: 'a',
            B: 'b',
            statics: {
                C: 'C'
            },
            config: {
                configProperty: 'how can i get this property'
            }
        });
        vartextClass =Ext.create('TextClass');
        //通过set方法设置属性的值，注意，包装器会把属性的头字母大写
        textClass.setConfigProperty("set this property's value");
        //通过get方法展示属性值
        Ext.Msg.alert('configProperty属性的值是：', textClass.getConfigProperty());
    });
</script>

执行结果：

 

4.Ext.require

说明：动态加载js文件

使用Ext.require加载js文件，首先要通过Ext.loader设置文件路径。

例子：

<script type="text/javascript">

    //设置Ext命名空间下的js文件所在文件夹
    Ext.Loader.setPath({
        Ext: 'http://localhost/test/ext/src'
    });
    Ext.onReady(function() {
        //加载Ext.window.MessageBox类，位于http://localhost/test/ext/src/window/MessageBox.js文件中
        //注意：一个js文件只有一个类
        //注意：类名=命名空间名（这里就是EXT）+文件路径名（这里就是window/messagebox）
        Ext.require("Ext.window.MessageBox")
    });
</script>

执行结果：