JS快速入门.pptVIP

成都传智播客观摩及出师项目展示! 成都传智播客 ExtJS快速入门 讲师：蔡世友Email:caishiyou@ 成都传智播客 RIA简介 　1、富因特网应用程序（Rich Internet Applications，RIA），集成桌面应用的交互性和传统 Web应用的部署灵活性； 　2、SaaS是以后软件发展的一个趋势，而RIA从技术上推进SaaS； 　3、RIA开发必备三个要素：富客户端技术、服务器技术和开发工具。 几种富客户端技术 1、Macromedia Flex－Adobe公司的RIA解决方案，在Flash运行时环境中运行(MXML)。 2、JavaFx－Sun的RIA解决方案，在Java虚拟机(1.5)上运行(VRML)。 3、WPF/SilverLight－Microsoft的RIA解决方案，在浏览器端的.Net运行时插件中运行 (XAML) 。 4、 Ajax－使用标准W3C技术，不需要额外的运行环境支持，如Backbase及Ext。 RIA应用及富客户端技术 成都传智播客 Ajax概念 Ajax的核心是无刷新变更页面中的部分内容。 Ajax不是一项技术。它其实是几项技术，每项技术自身都很繁荣，它们以强有力的全新方式结合起来。Html、xhtml、DOM、CSS、XML、XMLHttpRequest、javascript。 常用Ajax框架 　Prototype.js 　YUI 　JQuery 　Dojo 　Echo2 　Ext Ajax技术 成都传智播客 ExtJS 是什么？ Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo! UI的基础上发展而来的。官方网址：/ 现在改为:。 ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用。 ExtJS的特点 　1、使用标准的W3C技术； 　2、庞大的组件模型及控件库； 　3、丰富绚丽的界面元素； 　4、强大实用的工具封装 　5、开源GPL ExtJS简介 成都传智播客 开始使用ExtJS 如何使用ExtJS 引入ExtJS的样式文件 引入ExtJS的脚本库(两个，一个驱动adapter,另外一个ext-all.js) Ext应用代码：使用Ext.onReady来调用ExtJS组件 第一个Hello World程序 Ext.onReady(function(){ var win= new Ext.Window({title:很cool的窗口,width:500,height:400,buttons:[{text:确定},{text:取消}]}); win.show(); }) 显示一棵树 var tree=new Ext.tree.TreePanel({ title:小树一棵,width:200,height:200, root:new Ext.tree.AsyncTreeNode({text:树根,children:[{text:叶子1,leaf:true},{text:叶子2,leaf:true}]}) }); 成都传智播客 ExtJS API的使用 API文档 Examples ExtJS组件的基本概念 xtype 配置选项(Config Options) 属性(Properties)及方法(Method) 事件(Events)； ExtJS组件初始化 组件的渲染 Ext组件的基本使用 成都传智播客 事件驱动编程概述 DOM事件基础 Ext事件扩展 Ext组件事件 Ext组件事件定义 Ext组件事件使用：绑定监听(on)及取消监听(un) 告知性事件及可改变流程事件 Ext事件驱动编程 成都传智播客 Observable Component BoxComponent Container Panel Ext核心组件使用 成都传智播客 面板Ext.Panel Ext.Panel概述 面板的五大组成部分 面板的特点 面板中的内容 面板内容动态控制 API概述 成都传智播客 Viewport及Window Viewport Viewport代表整个浏览器窗口，直接渲染到document.body节点，取代页面中的所有内容。一般作为应用程序主界面。 Window Window表示应用程序窗口，其实是一个浮动的层，直接调用show方法显示窗口，窗口有关闭按钮； 窗口的关闭直接调用close方法，窗口的隐藏使用hide方法； 使用modal属性来配置模式窗口。 成都传智播客 对话框 替代古板的对话框 alert\confirm\prompt演示 与对话框交互：回调函数使用 wait