ExtJs4.0入门教程课件.ppt

ExtJS框架入门培训;什么是ExtJS？ ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建用户界面，且与后台技术无关的前端Ajax框架。 ;ExtJS显示效果示例1;ExtJS显示效果示例2;认识ExtJS的开发包 要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。下载地址是/products/extjs/download ; ;以下为其主要资源的简单介绍 builds：ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。 docs： ExtJS的文档，其中最重要的是ExtJS的API。 examples： 官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。 locale： 多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。 pkgs：ExtJS各部分功能的打包文件。 resources：ExtJS要用到的图片文件和样式表文件。 src：目录是未压缩的源代码目录。 bootstrap.js：Extjs库的引导文件，通过参数可以自动切换ext_all.js和ext_all_debug.js。 ext_all.js：ExtJS的核心库，是必须要引入的。 ext_all_debug.js：ext_all.js的调试版。;ExtJS API文档 ;从Hello World开始 !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 titleInsert title here/title link rel=stylesheet type=text/css href=./ext/resources/css/ext-all.css script type=text/javascript src=./ext/bootstrap.js/script script type=text/javascript Ext.onReady(function(){ Ext.MessageBox.alert(helloWorld,Im coming); }); /script /head body /body /html;HelloWorld运行效果如下图:;ExtJS拦路虎 问题1：导入js文件后，在js文件中定义的中文显示在页面后出现乱码。 原因：MyEclipse中js文件的默认编码是ISO-8859-1，这种编码和中文水火不容。 解决：改成gbk或utf-8（建议使用utf-8）。如何设置如下页图所示。在页面中导入js文件时，要指明字符集编码。例：script type=“text/javascript” src=‘view.js’ charset=‘utf-8’.为了绝对安全，可以讲MyEclipse工作区的编码变成utf-8;MyEclipse设置;问题2：程序加载慢 原因：为了配合皮肤，需要一张1*1大小的空白图片，改图片不是从本地获取而是访问了///s.gif。也就是说访问了网络上的图片。 解决：在js文件中加如下语句：Ext.BLANK_IMAGE_URL=‘/resources/themes/images/access/tree/s.gif’。 Ext.BLANK_IMAGE_URL是一个常量，我们进行了重新赋值 ; 1、ExtJS 简 介 2、ExtJS基础组件 3、ExtJS组件之Panel 4、ExtJS布局 5、ExtJS与后台交互 ;ExtJS4.0的组件体系如图所示：;组件 特别是UI(User Interface用户界面)组件对ExtJS的重要性不言而喻，可以这样说，学习ExtJS就是学习组件的使用。ExtJS4.0对框架进行了重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件。每种组件都有指定的xtype属性值，通过该值可以得到一个组件的类型或者定义一个指定类型的组件。 组件分类：大致分为四大类，即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。;控件 控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。 ;组件分类举例 容器组件：如toolbar、pagingtoolbar、pa