EXT学习日志1.docx
- 文档编号:5635325
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:31
- 大小:101.48KB
EXT学习日志1.docx
《EXT学习日志1.docx》由会员分享,可在线阅读,更多相关《EXT学习日志1.docx(31页珍藏版)》请在冰豆网上搜索。
EXT学习日志1
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,下面三个文件是必须导入的
第一个导入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最简单应用:
Ext.onReady(function()
{
Ext.MessageBox.alert("hello","wayfoon");
});
布局介绍
你可以先预览效果:
布局效果图
所谓布局,简单来说就是决定把什么东西放到什么位置上,对于管理软件来说,一般都是首部放标题,左边放菜单栏,空余的右下方用来显示具体的内容。
本章将详细介绍EXT中布局的用法。
一、传统的布局方式
我们可以用Ext.Viewport类对整个页面进行整体布局,具体使用方法如下:
<%@pagelanguage="java"pageEncoding="utf-8"%>
href="ext/resources/css/ext-all.css"/> Ext.onReady(function(){ varviewport=newExt.Viewport({ layout: 'border', items: [{ region: 'north', height: 40, html: 'BenetHuExt学习空间
'
},{
region:
'west',
width:
100,
html:
'
菜单一
菜单二
'},{
region:
'center',
html:
'主要内容'
}]
});
})
图1传统的布局形式
二、最常用的边框布局BorderLayout
Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分,除了中间区域以外,其他的区域又都是可以省略的,因此我们可以利用它制作出更复杂、更灵活的布局。
具体代码如下:
<%@pagelanguage="java"pageEncoding="utf-8"%>
href="ext/resources/css/ext-all.css"/> Ext.onReady(function(){ varviewport=newExt.Viewport({ layout: 'border', items: [{ region: 'north',html: 'north' },{ region: 'south',html: 'south' },{ region: 'east',html: 'east' },{ region: 'west',html: 'west' },{ region: 'center',html: 'center' }] }); })
效果图如图2所示。
图2使用BorderLayout的布局
注意:
center是绝对不能省略的,如果items中缺少了region:
'center'就会报错,会造成程序中断。
2.1设置子区域的大小
我们仅仅需要添加width和height参数,这样就可以指定每个子区域的大小了。
但是,north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算;east和west只能指定宽度值,高度值由BorderLayout自动计算;center区域的大小由其他4个部分决定。
设置的代码如下所示:
<%@pagelanguage="java"pageEncoding="utf-8"%>
href="ext/resources/css/ext-all.css"/> Ext.onReady(function(){ varviewport=newExt.Viewport({ layout: 'border', items: [{ region: 'north',html: 'north',height: 120 },{ region: 'south',html: 'south',height: 120 },{ },{ region: 'east',html: 'east',width: 100 },{ region: 'west',html: 'west',width: 100 },{ region: 'center',html: 'center' }] }); })
2.2使用split并限制它的范围
使用split后,我们可以允许用户自动拖放以改变某一个区域的大小,实现的方式只要设置split:
true参数即可实现,具体代码如下。
实现效果图如图3所示。
图3设置split:
true后的效果图
2.3子区域的展开和折叠
该功能可以让一个区域展开和折叠(相当于隐藏),实现的方式只需要配置几个参数即可,具体代码如下,主要配置参数是collapsible:
true,这个参数激活了某个区域的折叠功能,而且前面的title参数也是必须设置的。
实现代码和效果图如下所示。
图4带有折叠效果的布局
三、制作伸缩菜单的布局——Accordion
Accordion是EXT中默认布局的一部分,如果想用它,直接将区域加上layout:
'accordion'即可,其他部分基本无需改动。
我们利用ViewPort制作出只有west和center两个区域的BorderLayout,在west部分放上Accordion,实现方式如下面代码所示。
效果图如图5所示。
图5使用了Accordion的示例
设置了layout:
'accordion'后,再使用items添加3个元素,记得每个子元素里都要加上title参数,accordion没有提供默认的标题,不设置标题是一定会出错的。
与布局有关的配置项都写到layoutConfig里。
布局主要有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,center来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,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的使用
页面的左菜单:
(用法见注释)
1.//左边菜单
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:
'
其他面板像上面一样定义。
最后将多个面板组合到页面:
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文件路径,文件执行
<%@pagecontentType="text/html;charset=UTF-8"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
Ext页面布局
--
Ext.onReady(function()
{
Ext.QuickTips.init();
//页面的上部分
varnorthPanel=newExt.Panel({
title:
"顶部面板(实际应用中,通常去掉改属性)",//实际应用中,通常去掉该属性。
region:
'north',//北部,即顶部,上面
contentEl:
'north-div',//面板包含的内容
split:
false,
border:
false,//当面板内容超出面板大小时,是否显示边框
collapsible:
false,//是否可以收缩,默认不可以收缩,即不显示收缩箭头
//collapsed:
true,//初始化是否显示,默认是显示
height:
60
});
//左边菜单
varwestPanel=newExt.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的值日通常是一个divID
},
{
title:
"内容管理",
border:
false,autoScroll:
true,iconCls:
"Icon"
//autoLoad:
{url:
"xx.htm",scripts:
true}//面板的内容是指向一个*.htm,scripts:
true是表示支持包含文件里面的js脚本
}
]
});
//页面的右边
vareastPanel=newExt.Panel(
{
region:
"east",
title:
"右边",
collapsible:
true,
collapsed:
true,
//collapsed:
true,//是否显示
split:
true,
width:
225,
minSize:
175,maxSize:
400,layout:
"fit",margins:
"0500",
layout:
"accordion",iconCls:
"my-toolPanelIcon",layoutConfig:
{animate:
true}
});
//页面的底部
varsouthPanel=newExt.Panel({
title:
'底部面板',
region:
"south",
split:
true,height:
80,minSize:
60,maxSize:
150,collapsible:
true,collapsed:
true,
contentEl:
"footer",
title:
"底栏",
margins:
"0000"
});
//页面的中间面板
varcenterPanel=newExt.Panel({
region:
'center',//中间主显示面板
activeTab:
0,
enableTabScroll:
true,
border:
false,
items:
[{
id:
'HomePage',
title:
'首页',
iconCls:
'home',
contentEl:
'hp',//显示的内容,hp是divID
closable:
false,
layout:
'fit'
}]
});
varviewport=newExt.Viewport({
layout:
'border',//布局,必须是border
loadMask:
true,
items:
[northPanel,//上
westPanel,//左
centerPanel,//中
eastPanel,//右
southPanel//下
]
});
});
//-->
上上上上上
40px20px10px20px;font-weight: lighter"> 16px;color: red;">面板的布局分为: 东西南北中也就是左右上下中
<