EXT基本方法、属性(mixins、statics、require)

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'
                }
            })
var textClass = Ext.create("TextClass3")
            textClass.write();

        });
</script>

运行结果:

EXT基本方法、属性(mixins、statics、require)_第1张图片

 

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>

执行结果:

EXT基本方法、属性(mixins、statics、require)_第2张图片

 

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'

                }
            });
var textClass = Ext.create('TextClass');
//通过set方法设置属性的值,注意,包装器会把属性的头字母大写
            textClass.setConfigProperty("set this property's value");
//通过get方法展示属性值
            Ext.Msg.alert('configProperty属性的值是:', textClass.getConfigProperty());
        });
</script>

执行结果:

EXT基本方法、属性(mixins、statics、require)_第3张图片

 

3.Ext.require

说明:动态加载js文件

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

例子:

    <script type="text/javascript">
//设置Ext命名空间下的js文件所在文件夹
        Ext.Loader.setPath({
            Ext: 'http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/src'
        });
        Ext.onReady(function () {
//加载Ext.window.MessageBox类,位于http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/src/window/MessageBox.js文件中
//注意:一个js文件只有一个类
//注意:类名=命名空间名(这里就是EXT)+文件路径名(这里就是window/messagebox)
            Ext.require("Ext.window.MessageBox")
        });
</script>

执行结果:

EXT基本方法、属性(mixins、statics、require)_第4张图片

你可能感兴趣的:(EXT基本方法、属性(mixins、statics、require))