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

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

在学习Extjs的语法以前咱们应该对js有必定的了解，不然不少地方都不太可以理解。

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

1 var win = new Ext.window.Window({
2             width : 400,
3             height: 300,
4             title:'flyknows'
5         });
6 win.show();

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

2、Extjs4.0经过create方法去建立窗体

 

1 var win = Ext.create('Ext.window.Window',{
2             width : 400,
3             height: 300,
4             title:'flyknows'
5         });
6 win.show();

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

3、Extjs基本事件机制

 

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

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

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

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

4、经过define自定义类而且集成（extend）window

 1 Ext.define("myWin",{
 2             extend : 'Ext.window.Window',
 3             width:400,
 4             height: 300,
 5             title:'flyknows',
 6             newtitle:'new flyknows',
 7             mySeyTitle:function(){
 8                 this.title = this.newtitle;
 9             },
10             initComponent:function(){
11                 this.mySeyTitle();
12                 this.callParent(arguments);
13             }
14 });

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

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

 

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

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

 1 Ext.define("lesson2.ux.myWin",{
 2             extend : 'Ext.window.Window',
 3             width:400,
 4             height: 300,
 5             config:{
 6                 price:500
 7             },
 8             title:'flyknows',
 9             newtitle:'new flyknows',
10             mySeyTitle:function(){
11                 this.title = this.newtitle;
12             },
13             initComponent:function(){
14                 this.mySeyTitle();
15                 this.callParent(arguments);
16             }
17 });

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

注意个人命名，而后在须要用到的js文件的前面进行配置：

1     Ext.Loader.setConfig({
2         enabled:true,
3         paths:{
4             myApp:'lesson2/ux'
5         }
6     });

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

1 Ext.get("mybutton").on("click",function(){
2 
3             //实例化
4             var win = Ext.create('lesson2.ux.myWin',{
5                 title : 'luoxiao',
6                 requires:["lesson2.ux.myWin"]
7             }).show();
8             alert(win.getPrice());
9 });

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

6、mixins

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

例如：

 1                 Ext.define("say",{
 2             cansay:function(){
 3                 alert("hello");
 4             }
 5         });
 6 
 7         Ext.define("sing",{
 8             sing:function(){
 9                 alert("sing");
10             }
11         });
12 
13         Ext.define('user',{
14             mixins:{
15                 say:'say',
16                 sing:'sing'
17             }
18         });
19 
20         var u = Ext.create("user",{});
21         u.cansay();
22         u.sing();

经过mixins这种方式，咱们将say和sing它们方法混入user这个类中，那么建立出来的实例就能够直接调用它们的方法。