ExtJS 创建图形界面(一)

1、从框架角度分级,分为以下
    零级:完成Base工作,包括拓展原有对象的方法,要精简,包括Ajax通信部分
    一级:完成Effect工作,包括增加常用的效果转换函数,如tween、drag、maskLayer、fade等的效果
    二级:完成Component工作,包括对话框、列表、树、日历等组件
    三级:完成Application工作,包括完整的前端平台,允许用户定义能实现一定功能的模块

2、Ext在HTML/CSS生成的界面组件上实现了数据模型驱动,一种MVC的架构模式
    Ext有一个十分完善的生命周期,这个生命周期直接体现在组件、插件上、形成一个完整的对象模型
    组件(Component)的目的在于完全屏蔽对浏览器DOM的依赖,构建统一的对象模型,最终让浏览器引擎解析组件完成页面的渲染工作
    组件可分为初始化/创建( Initialization/Creation )、渲染(Render)、重画(Redraw)、销毁(Destruction)这几个时刻,构成标准的生命周期

3、生存周期可以从以下三个方面来理解    
    ①运行Ext的组件的每个步骤都是由它来定义的,这种预定义的默认行为使得我们在使用Ext变得更规范、更易于交流和理解
    ②这个模型是一种Ext隐性定义的标准,在非官方的API中,只要继承Component类,依靠Ext基础拓展出来的组件是一样的
    ③Ext组件的状态信息(State Management)如何收集、如何保存

4、具体的流程
    ①初始化/创建( Initialization/Creation )
        Component是一切组件的父类,所有的组件都继承它。Component又继承自Ext.util.Observable类,因此它天生具备了处理事件的能力,附有addEvents()、fireEvent()、on()/addListener()等的事件方法。Component主要登记的事件有enable、disable、beforeshow、show、beforehide、hide、beforerender、render、afterrender、destroy
        构造器,相当于组件初始化的函数,参数可以选择一下三种的任意一种
        Ext.Element:表示这个Ext.Element用于Component的承载函数,该元素的id默认就是组件的id
        String字符型:表示查找id为该字符串的元素作为承载元素,该字符就是组件默认的id
        Object对象型:表示一个标准的配置项对象(Config Object),应用到组件中。
    初始化的主要流程如下
        配置项对象生效。执行类的构造函数,得到组件所有的配置项
        组件的底层时间登记到Observable
        组件在组件管理器里注册
        状态感知(State)初始化(如果有对应设置的话)
        好插件初始化(如果有对应设置的话)
        可选的,如果指定了renderTo或applyTo配置属性,那么渲染工作就会立即开始,否则要么用render(),要么交由其上层容器自动渲染
    ②渲染过程(Rendering)
        渲染过程是按照组件定义绘制UI的过程
        特别注意的:applyTo配置项对应指定元素的div本身;renderTo配置项对应指定元素上一级父元素
        渲染过程中关键的方法就是render() / onRender() 了,隐藏/显示和启用/禁用的处理也在render()中定义
        但render()仅仅是发出渲染的指令,不能修改和控制渲染的过程,要使用模板方法onRender()才可以
        渲染的主要流程如下:
            触发beforerender事件
            设置好容器,如果没有指定容器,则默认使用组件的父节点作为容器
            设置onRender()方法
            设置组件为"隐藏"。组件一开始都是隐藏的
            自定义的类、样式生效
            触发render事件。任何在此之前访问组件的DOM结构,就会抛出一个不可用的异常
            调用afterRender()方法
            隐藏或禁用组件(有的话)。配置项hidden和disabled到这步生效
            状态感知(State)开始应用
    ③销毁过程( Destruction )
        触发beforedestroy事件
        调用beforeDestroy()方法
        移除元素及其事件。若组件是渲染好的,便会移走其所属的DOM元素
        调用onDestroy()方法
        在组件管理器中撤销组件的登记,不能再用Ext.getCmp()获取组件对象
        触发destroy事件
        移除所有的事件侦听器

5、模板方法简介
    

知识共享许可协议
《ExtJS 创建图形界面(一)》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     155.89ms