ExtJS初级培训0--基础知识篇

ExtJS初级培训0–基础知识篇

ExtJS简介

X) Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

X) Ext最新版本是ext6.2

X) 包结构

开发的时候只要保留locale，resources和下面的js就够了

X) 更同类型的js库比较

YUI

Jquery UI

Easy UI

Dojo

bootstrap

AngularJs， Backone， Ember

Extjs的学习成本

Dojo叫好不叫座，背后大公司支持，申明式编程

Extjs的劣势：包大，收费

2.使用说明

X) Ext对象

程序入口 onReady()

查找对象 get(),getDom(),getCmp()…

定义类和创建对象 define(), create()

事件管理 on(), un()

常用工具 isIE, isFF, isArray(), each(), encode()…

Ajax封装 Ext.ajax

X) 组件

组件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些组件来实现友好、交互性强的应用程序的UI。

Ext的组件有上百种之多

没有任何一个JS库能超过他，并且还提供了手机端的控件。

小到一个input，大到一个tree都提供了对应的组件。

用纯js的方式来实现，封装了很多常用的工具方法，提供了原生UI不具有的能力。比如input，提供了自定义验证，数据加载等

X) 创建组件的3种方式

使用new关键字

使用Ext.create()方法

使用xtype

显式，隐式，一般用于items里面

每个组件都提供了一个xtype的字符串，

X) 表格组件

可以直接在api 文档里面试验

打开api先copy到本地来

按照本地的需求改，遇到不懂的看配置

X) 布局

一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。

某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。

布局很重要

对于ui来说，div+css是小菜一碟

对于java开发来说，就痛苦了

做网格首页，调来调去，一个页面要花一整天

还得考虑浏览器兼容问题，这个浏览器可以，那个不行

布局是对容器的组件生效的，也就是说对一个容器设置了布局，影响到的是他里面的元素开发的时候，应该对UI有个大致的了解，最外层是容器，里面是许多组件，组件的摆放我们要有个大致的概念，这样才能选择一个合适的布局。

X) 数据包

Model: 数据实体模型

代表了应用系统中用的数据实体，比如用户信息（User），产品信息（Product）等

Proxy: 数据代理

用于数据的读取和保存，如通过ajax获取服务端数据。包含了Reader和Writer，用于读取原始数据到Model，或者将Model转换为指定格式的数据

Store: 数据集

保存Model对象的客户端缓存，提供了过滤，排序，查找等功能，常用于数据模型和UI的数据接口。



X) 事件

监听事件：listeners, handler, on()…

触发事件：fireEvent()

删除监听：un()

挂起：suspendEvents()

恢复：resumeEvents()

MVC架构

X) 类系统

Ext.define(className, { //类名

extend //继承

members //成员属性和方法

statics //静态属性和方法

constructor //构造函数

config //配置项

}, onClassCreated); //回调函数