Ext JS 培训教程培训讲义.ppt

Ext JS 实训教程 第一章、ExtJS简介 Ext1.0发布于2007年2月，它提供了基本的表单、表格、树形、窗口及布局等多种组件。本教程是基于Ext3.0以上版本的。于目前为止已经发布了Ext4.0 。 ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的B/S应用更加具有活力及生命力。 ExtJS是一个用javascript编写，与后台技术无关的前端Ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJS交流社区及相关资料网址： ExtJS包含的包的简单介绍 adapter : Ext的底层库和核心代码； docs : Ext提供的API； examples : 官方提供的演示实例； resources : 主要存放的是样式文件和图片文件； ext-all : Ext的核心库，是必须的。 src : 存放源码文件； 第二章、ExtJS 开发利器Spket 作用就不多说了，安装步骤如下： （1）下载Spket后，将其下的两个文件夹(features/plugins)中的内容分别放到eclipse安装文件的相应文件夹下。 （2）重启eclipse，点击工具栏Window- Preferences - Spket - JavaScript Profiles - 点击“New…” 按钮，新建一个配置文件，如Ext。然后为Ext添加库“Add Labrary” ,选择ExtJs，点击OK。再点击“Add File”为ExtJs添加.jsb文件(升级后的为.jsb2)。最后选中“Ext”设置为默认。 （3）新建一个.js文件，如编写Ext.之后就会有提示了，大功告成。 第三章 开始 ExtJs 之旅 一个简单的HelloWorld link rel=stylesheet type=text/css href=../../resources/css/ext-all.css / script type=text/javascript src=../../adapter/ext/ext-base.js/script script type=text/javascript src=../../ext-all.js/script script type=text/javascript src=../examples.js/script script function helloWorld(){ Ext.Msg.alert(hello,Hello World ! so easy !); } Ext.onReady(helloWorld); /script 3.1 一个简单的Panel面板 Panel面板也是最常用的组件，下面来看看一个简单的Panel面板。 Ext.onReady(function() { var panel = new Ext.Panel({ el: ‘test’, //对就元素的ID title: ‘测试标题’, //标题 floating: true, //是否将此面板设为浮动，默认为false shadow: true, //在面板后显示投影效果 draggable: true, //True表示为激活此面板的拖动，默认为false collapsible: true, //True表示为面板是可收缩的，默认为false html: ‘测试内容’, //显示内容 pageX: 100, //X页面坐标 pageY: 50, //Y页面坐标 width: 200, height: 150 }); panel.render(); }); 3.2 一个简单的TabPanel面板 TabPanel面板也是常用组件之一，直接看看实例吧，如下： var tabs = new Ext.TabPanel({ renderTo: document.body, width : 200, height: 100, activeTab : 1, //渲染后就活动的那个tab items: [{ title: Tab 1, html: A simple tab },{ title: Tab 2, closable