• 1. 《Easy-Ext》 第四讲 Ext基础架构_基本使用(一)讲师:白鹤翔
  • 2. Easy-Ext 我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的。那么我们现在就开始学习ExtJS的基础架构。 如何创建一个Ext的类、创建类的复杂流程 Ext.js和Ext-more.js深入解析 Ext对原生javascript类的扩展 动态加载机制 Ext操作Dom Ext开始响应事件
  • 3. Easy-Ext 类的创建定义类的方法:define 对于Ext4.X版本来说,采用了新定义类的define方法,而不是延续旧版本的extend方法,那么对于定义一个新的类。我们来了解下define的使用。 Ext.define(classname,properties,callback); classname:要定义的新类的类名 properties:新类的配置对象 callback:回调函数,当类创建完后执行该函数 对于Ext定义一个新的类,那么我们可以想象到,既然是利用Ext.define去创建类,那么创建的类一定是Ext所特有的类,不同于传统的javascript创建一个类,也就是说我们要对于define方法的第二个参数properties配置项进行配置,需要找到Ext对于类支持的API并进行配置
  • 4. Easy-Ext 类的创建 Ext.Class类
  • 5. Easy-Ext 类的创建 configs: extend:用于继承 alias:类的别名 alternateClassName:备用名,与alias差不多 requires:需要使用到的类名数组,在动态加载时会根据该属性去下载类,注意需要的类是在当前类之前被加载 uses:与requires类似 但是被引用的类可以在该类之后才加载 constructor:构造器属性,一般用来初始化类的配置和调用其父类的方法 mixins:混入属性,多继承 config:定义类的配置项,会把config里的每个属性加上get和set方法 statics:定义静态方法,属性不能被子类继承 inheritableStatics:与statics类似,但是其属性可被子类继承 singleton:设置该类为单件模式
  • 6. Easy-Ext 类的创建 对于Ext的创建类,也就是define方法,这个过程是Ext非常复杂的,我们从define方法的配置项就可以看出来,创建一个类可能经过一些列的操作,去检查到底都配置了哪些配置,然后对应的给所配置的信息添加类的相关操作。 如图所示:
  • 7. Easy-Ext 类的创建 用别名的方式创建:(xtype属性) Ext.widget或Ext.createWidget方法的使用
  • 8. Easy-Ext 基础JS文件 认识Ext.js 和Ext-more.js 首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义、基本的属性和方法,我们要重点学习和深入底层代码进行研究。 如果所示:API位置
  • 9. Easy-Ext 基础JS文件Ext.js方法详解: Ext.apply&Ext.applyIf Ext.extend typeOf isEmpty、isIterable、isFunction、isArray... Iterate Ext-more.js方法详解 getBody getHead getDoc getScrollBarWidth destroy
  • 10. Easy-Ext 扩展原生的javascript对象Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务,源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: extjs-4.1.1\src\core\src\lang\
  • 11. Easy-Ext 扩展原生的javascript对象 ExtJS扩展原生Javascript Ext.Object Ext.Number Ext.String Ext.Array Ext.Function Ext.Date Ext.Error
  • 12. Easy-Ext 动态加载 Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力。 关于动态加载机制,在4.x里使用MVC模式那是一个必备的工作。学好动态加载,以后我们去用Ext基于前台MVC模式下的开发是至关重要的。