EXTJS4自学手册——EXT基本方法属性（mixins多继承staticsrequire）

Posted 2020-07-02 追求极致 突破自我

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>

运行结果：

 

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\'

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

执行结果：

 

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>

执行结果：