Extjs系列篇(2)—-初步了解

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

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

 一、用原始的方式来创建一个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()这个方法将窗体显示出来。

二、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格式的表示的属性。这样也可以创建出一个窗体对象。

三、Extjs基本事件机制

 

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

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

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

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

四、通过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的方式。

五、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()这个方法。

六、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这个类中,那么创建出来的实例就可以直接调用它们的方法。

posted @ 2014-03-05 10:05  空谷@幽兰  阅读(924)  评论(0编辑  收藏  举报