extjs4学习日志(1)

新公司要求使用extjs4,在此之前我对ext框架毫无了解,最近开始学习extjs4。

我把自己学习的过程分享给大家,希望对大家有所帮助。

 

1、  模仿js的alert

Ext.MessageBox.alert(Hello,’Hello World!’);

                 

2、  Extjs4对原生js的Array类的扩展

a)         every(Array array,Function Fn,Object scope):Boolean方法

参数1:数组   参数2:方法(会返回true或false)   参数3:作用域

作用:遍历传入数组的每一项,通过Fn来判断,当第一次返回false的时候,跳出。

 1             var myArray = [1, 2, 3, 4, -5, 6];
 2             Ext.Array.every(myArray, function (item) {
 3                 if (item > 0) {
 4                     return true;
 5                 }
 6                 else {
 7                     alert(item);
 8                     return false;
 9                 }
10             }, this);

执行结果是-5。

b)         filter(Array array,Function Fn,Object scope):Array方法

参数1:数组   参数2:方法(会返回true或false)   参数3:作用域

作用:通过方法Fn便利数组每一项,返回true的项留下,返回false的项被去掉,并返回新数组。

 

 1             var myArray = [1, 2, 3, -3, -2, -1];
 2             var myArray2 = Ext.Array.filter(myArray, function (item) {
 3                 if (item > 0) {
 4                     return true;
 5                 }
 6                 else {
 7                     return false;
 8                 }
 9             }, this)
10             alert(myArray2);

执行结果:1,2,3

 

3、  Ext.create(String name,Mixed args):Object

参数1:创建的对象的类名    参数2:设置对象的参数

作用:创建类的对象。

 

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

显示一个窗口。

4、  Ext.define()自定义类

 

 1 Ext.define('myWindow', {
 2                 //继承自Ext.window.Window类
 3                 extend: 'Ext.window.Window',
 4                 width: 400,
 5                 height: 300,
 6                 title: '这是我自定义的window',
 7                 //任意定义一个属性
 8                 mytitle: '这是我自定义的标题',
 9                 //定义一个方法将自定义的属性复制给title
10                 setMyTitle:function(){
11                     this.title=this.mytitle;
12                 },
13                 //调用父类的构造函数(初始化)
14                 initComponent: function () {
15                     this.setMyTitle();
16                     this.callParent(arguments);
17                 }
18             });
19 
20             Ext.create('myWindow', {}).show();


自定义一个myWindow类继承自Ext.window.Window类

5、  Config、mixins、extend配置项

a)         Config相当于vs中的自动生成属性

b)         Mixins配置项可以混合其他的类,是当前类的对象可以调用其他类的方法

c)         Extend是继承某个类,与misins一起使用可以实现类似多继承的效果

posted @ 2012-05-26 02:59  Servant  阅读(513)  评论(0编辑  收藏  举报