Ext2.0教程一：Ext介绍以及 ext页面布局
2008-08-27 09:18
483 查看
学习ext有一段时间了，也开发了几个项目，抽点时间做个总结，刚好公司让我做个Ext培训，于是随便写个Ext教程。
Ext介绍
Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。
至今Ext最新版本是ext2.2，下面的教程都是以Ext2.2作为基础的。
Ext 主要有下列类：
Ext
air:适配器
data：数据处理
dd：页面元素的拖曳
form：表单操作
grid：装载数据的表格
layout:布局
menu：各式菜单
state:用户状态
tree：各式树
util：常用函数
学习Ext必须注意，
使用ext必须导入ext包，
将下载好的ext保存在本地硬盘，像导入普通js文件、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的
<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" />
<script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext22/ext-all.js"></script>
第一个导入Ext样式，其实ext就是js+样式，所以必须导入。
第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到 ext-base.js设置的基本参数，因此ext-base.js必须先导入！
ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。可以采用进度条缓冲加载。
Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。
通常我们中文的文件命名为ext-lang-zh_CN.js
ext最简单应用：
<script>
Ext.onReady(function()
{
Ext.MessageBox.alert("hello","wayfoon");
});
</script>
布局介绍
你可以先预览效果：布局效果图
布局主要有 Accordion布局，Border区域布局，Column列布局和Card布局。
Accordion布局：Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。
Column列布局：Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。
Card布局：Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。
由于时间问题，
下面只介绍Border区域布局 这里叫做页面布局
采用ext开发的程序，大部分是在一个页面中完成，在该页面中打开多个面板，因此页面布局非常重要，如图
一个页面在Ext 中是分为：东西南北中 也就是左右上下中，在实际应用中可以减少一些部分
页面布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。
ext 中元素的属性设置都是采用key：value的形式
先定义页面的上部分：（用法见注释）
//页面的上部分
var northPanel=new Ext.Panel({
title:"顶部面板(实际应用中，通常去掉改属性)",//实际应用中，通常去掉该属性。
region : 'north',//北部，即顶部，上面
contentEl : 'north-div',//面板包含的内容
split : false,//是否可以改变面板大小
border : false,//当面板内容超出面板大小时，是否显示边框
collapsible : false,//是否可以收缩,默认不可以收缩，即不显示收缩箭头
//collapsed:true,//初始化是否显示, 默认是显示
height : 60
});
注意 collapsible的使用
页面的左菜单：（用法见注释）
//左边菜单
var westPanel=new Ext.Panel({
title : '左边菜单',//面板名称
region : 'west',//该面板的位置，此处是西部 也就是左边
split : true,//为true时，布局边框变粗 ,默认为false
border : false,
collapsible : true,
collapsed:false,//初始化是否显示, 默认是显示
width : 150,
minSize : 10,//最小宽度
maxSize : 300,
layout : 'accordion',
layoutConfig : { //布局
titleCollapse : true,
animate : true,
activeOnTop : false
},
items : [{
title : '统计查询',
iconCls : 'money_box'//字面板样式
//contentEl : 'my-book'//子面板包含的内容，contentEl 的值日通常是一个div ID
},
{
title:"内容管理",
border:false,autoScroll:true,iconCls:"Icon",
autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm，scripts:true 是表示支持包含文件里面的js脚本
}
]
});
左菜单中定义了多个可以折叠的菜单面板，由items包含，上面代码中包含了两个，指向的内容可以使用contentEl包含div，或者 autoLoad加载页面，也可以直接采用html 比如， html:'<a href="">link</a>'。
其他面板像上面一样定义。
最后将多个面板组合到页面：
var viewport = new Ext.Viewport({
layout : 'border',//布局,必须是border
loadMask : true,
items : [northPanel, //上
westPanel,//左
centerPanel,//中
eastPanel,//右
southPanel//下
]
});
将各个面板分别加到了viewport 中
layout 的值 可以是 column，border，accordion，页面布局必须使用 border。column在form中使用
所有代码如下，可以另存为*.htm，修改ext文件路径，文件执行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Wayfoon:Ext页面布局</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" />
<script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext22/ext-all.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Ext.onReady(function()
{
Ext.QuickTips.init();
//页面的上部分
var northPanel=new Ext.Panel({
title:"顶部面板(实际应用中，通常去掉改属性)",//实际应用中，通常去掉该属性。
region : 'north',//北部，即顶部，上面
contentEl : 'north-div',//面板包含的内容
split : false,
border : false,//当面板内容超出面板大小时，是否显示边框
collapsible : false,//是否可以收缩,默认不可以收缩，即不显示收缩箭头
//collapsed:true,//初始化是否显示, 默认是显示
height : 60
});
//左边菜单
var westPanel=new Ext.Panel({
title : '左边菜单',//面板名称
region : 'west',//该面板的位置，此处是西部 也就是左边
split : true,//为true时，布局边框变粗 ,默认为false
border : false,
collapsible : true,
collapsed:false,//初始化是否显示, 默认是显示
width : 150,
minSize : 10,//最小宽度
maxSize : 300,
layout : 'accordion',
layoutConfig : { //布局
titleCollapse : true,
animate : true,
activeOnTop : false
},
items : [{
title : '统计查询',
iconCls : 'money_box'//字面板样式
//contentEl : 'my-book'//子面板包含的内容，contentEl 的值日通常是一个div ID
},
{
title:"内容管理",
border:false,autoScroll:true,iconCls:"Icon"
//autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm，scripts:true 是表示支持包含文件里面的js脚本
}
]
});
//页面的右边
var eastPanel=new Ext.Panel(
{
region:"east",
title:"右边",
collapsible:true,
collapsed:true,
//collapsed:true,//是否显示
split:true,
width:225,
minSize:175,maxSize:400,layout:"fit",margins:"0 5 0 0",
layout:"accordion",iconCls:"my-toolPanelIcon",layoutConfig:{animate:true}
});
//页面的底部
var southPanel=new Ext.Panel( {
title:'底部面板',
region:"south",
split:true,height:80,minSize:60,maxSize:150,collapsible:true,collapsed:true,
contentEl:"footer",
title:"底栏",
margins:"0 0 0 0"
});
//页面的中间面板
var centerPanel=new Ext.Panel( {
region : 'center',//中间 主显示面板
activeTab : 0,
enableTabScroll : true,
border : false,
items : [{
id : 'HomePage',
title : '首页',
iconCls : 'home',
contentEl : 'hp',//显示的内容,hp 是div ID
closable : false,
layout : 'fit'
}]
});
var viewport = new Ext.Viewport({
layout : 'border',//布局,必须是border
loadMask : true,
items : [northPanel, //上
westPanel,//左
centerPanel,//中
eastPanel,//右
southPanel//下
]
});
});
//-->
</SCRIPT>
<div id="north-div" align="center">
上 上 上 上 上
</div>
<div id="hp" style="margin: 40px 20px 10px 20px; font-weight: lighter">
<div style="font-size: 16px; color: red;"> 面板的布局分为：东西南北中 也就是左右上下中 </div>
</div>
</div>
<div id="footer" class="footer">
<div>
Copyright <span style="font-size: 20px;vertical-align:bottom;">©</span> 2007-2008
<sup style="font-size: 16px">®</sup> 版权所有
</div>
</div>
</BODY>
</HTML>
效果如图：
教程下载地址：http://download.csdn.net/source/594644
请继续，
Ext2.0教程二：基本表格GridPanel，从后台数据库取数据
Ext介绍
Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。
至今Ext最新版本是ext2.2，下面的教程都是以Ext2.2作为基础的。
Ext 主要有下列类：
Ext
air:适配器
data：数据处理
dd：页面元素的拖曳
form：表单操作
grid：装载数据的表格
layout:布局
menu：各式菜单
state:用户状态
tree：各式树
util：常用函数
学习Ext必须注意，
使用ext必须导入ext包，
将下载好的ext保存在本地硬盘，像导入普通js文件、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的
<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" />
<script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext22/ext-all.js"></script>
第一个导入Ext样式，其实ext就是js+样式，所以必须导入。
第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到 ext-base.js设置的基本参数，因此ext-base.js必须先导入！
ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。可以采用进度条缓冲加载。
Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。
通常我们中文的文件命名为ext-lang-zh_CN.js
ext最简单应用：
<script>
Ext.onReady(function()
{
Ext.MessageBox.alert("hello","wayfoon");
});
</script>
布局介绍
你可以先预览效果：布局效果图
布局主要有 Accordion布局，Border区域布局，Column列布局和Card布局。
Accordion布局：Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。
Column列布局：Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。
Card布局：Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。
由于时间问题，
下面只介绍Border区域布局 这里叫做页面布局
采用ext开发的程序，大部分是在一个页面中完成，在该页面中打开多个面板，因此页面布局非常重要，如图
一个页面在Ext 中是分为：东西南北中 也就是左右上下中，在实际应用中可以减少一些部分
页面布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。
ext 中元素的属性设置都是采用key：value的形式
先定义页面的上部分：（用法见注释）
//页面的上部分
var northPanel=new Ext.Panel({
title:"顶部面板(实际应用中，通常去掉改属性)",//实际应用中，通常去掉该属性。
region : 'north',//北部，即顶部，上面
contentEl : 'north-div',//面板包含的内容
split : false,//是否可以改变面板大小
border : false,//当面板内容超出面板大小时，是否显示边框
collapsible : false,//是否可以收缩,默认不可以收缩，即不显示收缩箭头
//collapsed:true,//初始化是否显示, 默认是显示
height : 60
});
注意 collapsible的使用
页面的左菜单：（用法见注释）
//左边菜单
var westPanel=new Ext.Panel({
title : '左边菜单',//面板名称
region : 'west',//该面板的位置，此处是西部 也就是左边
split : true,//为true时，布局边框变粗 ,默认为false
border : false,
collapsible : true,
collapsed:false,//初始化是否显示, 默认是显示
width : 150,
minSize : 10,//最小宽度
maxSize : 300,
layout : 'accordion',
layoutConfig : { //布局
titleCollapse : true,
animate : true,
activeOnTop : false
},
items : [{
title : '统计查询',
iconCls : 'money_box'//字面板样式
//contentEl : 'my-book'//子面板包含的内容，contentEl 的值日通常是一个div ID
},
{
title:"内容管理",
border:false,autoScroll:true,iconCls:"Icon",
autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm，scripts:true 是表示支持包含文件里面的js脚本
}
]
});
左菜单中定义了多个可以折叠的菜单面板，由items包含，上面代码中包含了两个，指向的内容可以使用contentEl包含div，或者 autoLoad加载页面，也可以直接采用html 比如， html:'<a href="">link</a>'。
其他面板像上面一样定义。
最后将多个面板组合到页面：
var viewport = new Ext.Viewport({
layout : 'border',//布局,必须是border
loadMask : true,
items : [northPanel, //上
westPanel,//左
centerPanel,//中
eastPanel,//右
southPanel//下
]
});
将各个面板分别加到了viewport 中
layout 的值 可以是 column，border，accordion，页面布局必须使用 border。column在form中使用
所有代码如下，可以另存为*.htm，修改ext文件路径，文件执行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Wayfoon:Ext页面布局</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" />
<script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext22/ext-all.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Ext.onReady(function()
{
Ext.QuickTips.init();
//页面的上部分
var northPanel=new Ext.Panel({
title:"顶部面板(实际应用中，通常去掉改属性)",//实际应用中，通常去掉该属性。
region : 'north',//北部，即顶部，上面
contentEl : 'north-div',//面板包含的内容
split : false,
border : false,//当面板内容超出面板大小时，是否显示边框
collapsible : false,//是否可以收缩,默认不可以收缩，即不显示收缩箭头
//collapsed:true,//初始化是否显示, 默认是显示
height : 60
});
//左边菜单
var westPanel=new Ext.Panel({
title : '左边菜单',//面板名称
region : 'west',//该面板的位置，此处是西部 也就是左边
split : true,//为true时，布局边框变粗 ,默认为false
border : false,
collapsible : true,
collapsed:false,//初始化是否显示, 默认是显示
width : 150,
minSize : 10,//最小宽度
maxSize : 300,
layout : 'accordion',
layoutConfig : { //布局
titleCollapse : true,
animate : true,
activeOnTop : false
},
items : [{
title : '统计查询',
iconCls : 'money_box'//字面板样式
//contentEl : 'my-book'//子面板包含的内容，contentEl 的值日通常是一个div ID
},
{
title:"内容管理",
border:false,autoScroll:true,iconCls:"Icon"
//autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm，scripts:true 是表示支持包含文件里面的js脚本
}
]
});
//页面的右边
var eastPanel=new Ext.Panel(
{
region:"east",
title:"右边",
collapsible:true,
collapsed:true,
//collapsed:true,//是否显示
split:true,
width:225,
minSize:175,maxSize:400,layout:"fit",margins:"0 5 0 0",
layout:"accordion",iconCls:"my-toolPanelIcon",layoutConfig:{animate:true}
});
//页面的底部
var southPanel=new Ext.Panel( {
title:'底部面板',
region:"south",
split:true,height:80,minSize:60,maxSize:150,collapsible:true,collapsed:true,
contentEl:"footer",
title:"底栏",
margins:"0 0 0 0"
});
//页面的中间面板
var centerPanel=new Ext.Panel( {
region : 'center',//中间 主显示面板
activeTab : 0,
enableTabScroll : true,
border : false,
items : [{
id : 'HomePage',
title : '首页',
iconCls : 'home',
contentEl : 'hp',//显示的内容,hp 是div ID
closable : false,
layout : 'fit'
}]
});
var viewport = new Ext.Viewport({
layout : 'border',//布局,必须是border
loadMask : true,
items : [northPanel, //上
westPanel,//左
centerPanel,//中
eastPanel,//右
southPanel//下
]
});
});
//-->
</SCRIPT>
<div id="north-div" align="center">
上 上 上 上 上
</div>
<div id="hp" style="margin: 40px 20px 10px 20px; font-weight: lighter">
<div style="font-size: 16px; color: red;"> 面板的布局分为：东西南北中 也就是左右上下中 </div>
</div>
</div>
<div id="footer" class="footer">
<div>
Copyright <span style="font-size: 20px;vertical-align:bottom;">©</span> 2007-2008
<sup style="font-size: 16px">®</sup> 版权所有
</div>
</div>
</BODY>
</HTML>
效果如图：
教程下载地址：http://download.csdn.net/source/594644
请继续，
Ext2.0教程二：基本表格GridPanel，从后台数据库取数据
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件
- 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件
- AIR2.0入门教程:新特性介绍以及开发环境的配置
- Ext2.0教程一：Ext介绍以及 ext页面布局
- 教程: Ext 2.0 介绍
- 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件
- float和定位以及页面布局
- ASP.NET 2.0的页面缓存功能介绍(转)
- ext-js中的容器和布局（介绍）
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- 在对小程序开发时我们会进行页面的布局。这里我们简单的介绍下flex布局的使用
- 分类页面所有view层（activity 跟 布局 跟fragment以及布局）
- DIV+CSS基础教程：浮动(float)页面布局
- Scott Mitchell 的ASP.NET 2.0数据教程之三十四:: 跨页面的主/从报表
- es6系列教程_ Map详解以及常用api介绍
- CSS高级教程 页面布局
- Chrome WebUI 创建介绍以及示例（Chrome内部页面）
- Scott Mitchell 的ASP.NET 2.0数据操作教程之九:跨页面的主/从报表
- Android布局之RecyclerView初级入门介绍及相关教程
- 2.React Native Flex布局介绍以及实践