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的时候，跳出。

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

执行结果是-5。

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

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

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

 

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

执行结果：1,2,3

 

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

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

作用：创建类的对象。

 

            var win = Ext.create('Ext.window.Window', {
                 400,
                height: 300,
                title: '这是一个窗口'
            });
            win.show();

显示一个窗口。

4、  Ext.define()自定义类

 

Ext.define('myWindow', {
                //继承自Ext.window.Window类
                extend: 'Ext.window.Window',
                 400,
                height: 300,
                title: '这是我自定义的window',
                //任意定义一个属性
                mytitle: '这是我自定义的标题',
                //定义一个方法将自定义的属性复制给title
                setMyTitle:function(){
                    this.title=this.mytitle;
                },
                //调用父类的构造函数（初始化）
                initComponent: function () {
                    this.setMyTitle();
                    this.callParent(arguments);
                }
            });

            Ext.create('myWindow', {}).show();

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

5、  Config、mixins、extend配置项

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

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

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