EXTJS4自學手冊——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>

運行結果：

 

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>

執行結果：