Ext教程.ppt

Ext简易教程 常用控件使用介绍 Contents Ext是什么 什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ex是面向对象的 Ext是什么 Ext 有什么 Ext最新版本是ext2.2 。 Ext提供一系列的对象类。 怎样使用Ext 使用ext 将下载好的ext保存在本地硬盘，像导入普通js、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的 <link rel="stylesheet" type="text/css" href="ext/resources/css/ ext-all.css" />  <script type="text/javascript" src="ext/adapter/ext/ ext-base.js"></script><script type="text/javascript" src="ext/ext-all.js"></script> 怎样使用Ext Ext中文包 Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。 通常我们中文的文件命名为ext-lang-zh_CN.js Ext最简单使用 <script>?Ext.onReady(function()?{? Ext.MessageBox.alert("hello","wayfoon");?});?</script> Ext页面布局 布局主要有 Accordion布局，Border区域布局，Column列布局和Card布局。 Accordion布局：由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。 Border区域布局： 类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。 Ext页面布局 Column列布局：由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。 Card布局：由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。 Ext页面布局_区域布局 Border区域布局使用 Border区域布局： 类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域。如图： Ext页面布局_区域布局 Border区域布局使用 用法： 分别定义东南西北中五个区域。然后将5个区域组合起来。 Ext新建窗口介绍 创建窗口 新建窗口使用到Ext.Window提供的类 var win=new Ext.Window({ id:'w', title:'wayfoon:新窗口',//窗口显示名称 width:300, height:140, collapsible: true,//是否可折叠 layout : 'column',//布局方式 items:[]//窗口需要增加的内容 }).show();//让窗口显示出来 Ext新建窗口介绍 创建窗口 向窗口增加内容 items:[{ ????xtype?:?'panel',//html代码容器 ????html?:?“名称：<input?type='text'?name='wayfoon'?onclick='javascript:alert(wayfoon)'/>" }] Ext基本表格GridPanel