Extjs系列篇（2）—-初步了解

我们接着前一章进行学习，前面我们介绍了如何去搭建一个Extjs的环境，并且实现了学习每个语言都最先学习的HelloWorld这样一个小程序。

在学习Extjs的语法之前我们应该对js有一定的了解，否则很多地方都不太能够理解。

 一、用原始的方式来创建一个window

var win = new Ext.window.Window({
            width : 400,
            height: 300,
            title:'flyknows'
        });
win.show();

这里我们通过new的方式去创建了一个Extjs的windows对象,并且给了几个属性。这些属性我们都可以再Extjs的api文档中查阅到。然后通过show()这个方法将窗体显示出来。

二、Extjs4.0通过create方法去创建窗体

 

var win = Ext.create('Ext.window.Window',{
            width : 400,
            height: 300,
            title:'flyknows'
        });
win.show();

这也是Extjs4.0推荐我们创建对象所用的一种方式。第一个参数是创建对象的类型，第二个参数是用json格式的表示的属性。这样也可以创建出一个窗体对象。

三、Extjs基本事件机制

 

我们实现一个点击按钮然后弹出窗体的事件，首先在页面创建一个button：

<button id="mybutton">click</button>

然后再来写它的触发事件：

Ext.get('mybutton').on("click",function(){
    win.show();
});

四、通过define自定义类并且集成（extend）window

Ext.define("myWin",{
            extend : 'Ext.window.Window',
            width:400,
            height: 300,
            title:'flyknows',
            newtitle:'new flyknows',
            mySeyTitle:function(){
                this.title = this.newtitle;
            },
            initComponent:function(){
                this.mySeyTitle();
                this.callParent(arguments);
            }
});

这种方式就相当于与自定义一个类，然后可以对它的属性实现get、set方法，同时可以初始化组件。调用这个组件的方式和之前一样，可以采用create的方式。

五、requires使用命名空间异步加载

 

在php中require的作用是将某个文件引入进来，在Extjs中实现的其实也是类似的功能，例如，我们在程序运行时就加载所有的js文件，这样页面初始化的速度肯定很慢，我们何不在需要用到的时候自动对其进行异步加载。这样也可以缓解服务器的压力，并且在我们的页面中也不需要加上script src这样的代码了。具体实现如下：

首先创建一个自定义的窗体在一个新的js文件中，命名myWin.js：

Ext.define("lesson2.ux.myWin",{
            extend : 'Ext.window.Window',
            width:400,
            height: 300,
            config:{
                price:500
            },
            title:'flyknows',
            newtitle:'new flyknows',
            mySeyTitle:function(){
                this.title = this.newtitle;
            },
            initComponent:function(){
                this.mySeyTitle();
                this.callParent(arguments);
            }
});

这里的config中配置的属性会自动的get和set

注意我的命名，然后在需要用到的js文件的前面进行配置：

    Ext.Loader.setConfig({
        enabled:true,
        paths:{
            myApp:'lesson2/ux'
        }
    });

这里的path就需要与前面自定义窗体命名的前缀要一致，最后我们将它创建出来：

Ext.get("mybutton").on("click",function(){

            //实例化
            var win = Ext.create('lesson2.ux.myWin',{
                title : 'luoxiao',
                requires:["lesson2.ux.myWin"]
            }).show();
            alert(win.getPrice());
});

这里create和requires命名需要与自定义窗体命名相同。这样，我们在页面中可以不用引入myWin.js这个文件,当需要进行create的时候再异步加载它。因为我们将price配置在config中，因此我们直接可以调用它的getPrice()这个方法。

六、mixins

mixins的解释是混入，其实它和extends有点类似，一个是将别人的方法拿给自己去用，一个是继承与父类已有的方法，但是他们的区别在于extends只能继承一个元素，然后mixins却可以混入多个元素的方法，这和java中的继承和接口有点相像，extends只能继承一个父类，但是却可以implements多个接口。

例如：

                Ext.define("say",{
            cansay:function(){
                alert("hello");
            }
        });

        Ext.define("sing",{
            sing:function(){
                alert("sing");
            }
        });

        Ext.define('user',{
            mixins:{
                say:'say',
                sing:'sing'
            }
        });

        var u = Ext.create("user",{});
        u.cansay();
        u.sing();

通过mixins这种方式，我们将say和sing它们方法混入user这个类中，那么创建出来的实例就可以直接调用它们的方法。