ExtJS.ppt

Ext JS4.0 讲师：oiYc 前言 ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进，ExtJS现在已经成功发布到了ExtJS4.0版本，并且成为构建RIA WEB应用的一套最完整、最成熟的javascript基础库。利用ExtJS构建的RIA WEB应用具有与桌面程序一样的标准用户界面和操作方式，并能够跨不同的浏览器平台使用。目前，大多数企业中已经选择ExtJS作为项目开发、克敌制胜的武器，因为他们可以享受ExtJS带来的类似于WIN32编程的原生态快乐。 就目前的市场趋势，现在用户对体验的要求越来越高。涌现出很多优秀的前台javascript框架，如Prototype、JQuery、ExtJS等等，当然我们今天开始要学习的ExtJS无疑是其中优秀的解决方案之一。它能够帮助开发者快速实现良好的用户界面开发，在加上ExtJS又是开源的，所以ExtJS的生命力极强，作为web开发人员来说，我们一定要掌握这个优秀的技术。 EXTJS课程大纲（一） 第一讲：ExtJS初步 第二讲：ExtJS基本功能 第三讲：ExtJS的基础架构 第四讲：ExtJS_Core包(操作DOM) 第五讲：ExtJS_util包(常用工具类) 第六讲：ExtJS开始响应事件 第七讲：ExtJS对Ajax的支持 第八讲：数据模型(一)初步 第九讲：数据模型(二)数据代理 第十讲：数据模型(三)读写器、数据集store EXTJS课程大纲（二） 第十一讲：用表常单form 第十二讲：页面布局 第十三讲：Grid组件 第十四讲：Tree组件 第十五讲：ExtJS与服务器端框架的整合 第十六讲：主题 第十七讲：Ext.Direct 第十八讲：Draw图形 第十九讲：Chart图表 认识ExtJS的开发包 Hello World ExtJS的基本概念 Spket开发插件 第一讲：ExtJS初步 01 ExtJS的开发包 要开始Ext之旅的第一步就是要获得开发包，我们可以从官方网站里进行下载: /products/extjs/download 包结构说明： builds目录为ExtJS压缩后的代码 docs目录为ExtJS的文档 examples目录中是官方的演示示例 locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文 overview是ExtJS的功能概述 pkgs中是ExtJS各部分功能的打包文件 resource中书ExtJS要用到的图片文件与样式表文件 src目录是未压缩的源码 bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js ext-all.js文件是ExtJS的核心库,是必须要引入的 ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用 02 Spket开发插件 对于软件开发而言，有好的开发工具往往能事半功倍。尤其是对于前台javascript这种解释执行的脚本语言，开发与调试过程往往非常困难，那么就必须要有好的工具加以支持。 Spket支持javascript、XUL/XBL、Laszlo、SVG等新产品。具有代码自动完成，语法高亮等等功能特点。因此我们可以借助spket高效的开发ExtJS 下载地址：/ (当前必威体育精装版版本：spket-1.6.18.zip) 安装插件小提示： 解压spket-1.6.18.zip，之后展开目录，分别将plugins目录与features目录分别复制到Eclipse的安装目录下，Eclipse3.2及以上版本都可以。 03 Hello World 我们需要导入以下3个包，才能完成第一个HelloWorld.html: link rel=stylesheet type=text/css href=../extjs/resources/css/ext-all.css charset=utf-8/ script type=text/javascript src=../extjs/bootstrap.js /script 关于bootstrap.js的说明，很明显这里与Ext2、Ext3加载不同 script type=text/javascript src=../extjs/ext-lang-zh_CN.js /script 04 ExtJS的基本概念（一） Ext.onReady 关于字体 把引入的ccs文件 字体由11px全局替换为12px即可 属性layout： 设置布局 可以为对象，也可以为字符串 属性items： 其属性为数组,可以在里面定义当前控件的子控件 关于xtype： 在Ext