Ext教程

Ext 简易教程 --- 常用控件使用介绍

Contents Ext 是什么？怎样使用 Ext Ext 页面布局 Ext 窗口介绍 Ext 基本表格 GridPanel 介绍目录

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 个区域组合起来。 var viewport = new Ext.Viewport({ layout : 'border',// 布局 , 必须是 border loadMask : true, items : [northPanel, // 上 westPanel,// 左 centerPanel,// 中 eastPanel,// 右 southPanel// 下 ] });

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 介绍 GridPanel GridPanel 是用来显示数据，并且支持分页 var grid = new Ext.grid.GridPanel({ renderTo:'show', title:" 表格 ", height:300,width:600, cm:colM,sm:sm, store:store, layout : 'fit', viewConfig: { forceFit:true }, bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, displayMsg: ' 第 {0} 到 {1} 条数据共 {2} 条 ', emptyMsg: " 没有数据 " }), });

Ext 基本表格 GridPanel 介绍 Ext.data.Store ：为 GridPanel 提供数据 GridPanel 是用来显示数据，由 store 提供。 Store 数据格式是 json ， JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，完全独立于语言的文本格式 [{id:1,name:' 流程 1'}, {id:2,name:' 流程 2'}, {id:3,name:' 流程 3'}]

Ext 基本表格 GridPanel 介绍 Ext.data.Store ：为 GridPanel 提供数据 var store = new Ext.data.Store({ proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}), reader: new Ext.data.JsonReader({ root: 'topics', totalProperty: 'totalCount', id: 'post_id' },[ 'post_id','topic_title','author' ]) }); store.load({params:{start:0, limit:10}});

Ext 基本表格 GridPanel 介绍最终效果

Ext教程

More Related Content

Viewers also liked (11)

Ext教程