Ext2.0教程一:Ext介绍以及 ext页面布局
学习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,从后台数据库取数据
Ext2.0教程一:Ext介绍以及 ext页面布局相关推荐
- shell教程一 :介绍
shell教程一 :介绍 大家好,自工作至今,因为工作环境原因(CenOS6.X 集群),经常用到shell的编程,shell是linux下开发必不可少的利器.为了能让想学习的朋友,能快速上手.so ...
- Ext2.0框架的Grid使用介绍(转)
Ext2.0框架的Grid使用介绍 最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强",我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今 ...
- Ext2.0 form使用实例
Ext2.0的form不单增加了时间输入控件.隐藏输入控件,还修改了创建方法,通过formpanel代替了原来form,column也根据新的布局定义更新了定义方式.总体来说,定义一个form更简单便 ...
- Ext2.0布局类初探
Ext2.0正式版虽然还没出来,但是官网上的例程还是令人兴奋不已.内存泄漏的问题应该是解决了,布局类更新了,增加了新的东西,grid的功能更加强大,tabs也增加了循环按钮,还增加了类似delphi ...
- 2007-11-7学习EXT第一天:EXT简介
原文出处 翻译:Frank 无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你.本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些 ...
- 初识c语言教程,第1课C语言教程一: 初识C程序.doc
第1课C语言教程一: 初识C程序 第1课 初识C程序 教学目标 1.计算机语言介绍 2.了解C语言 3.如何学好C语言(多做题,多上机调试程序) 4.C语言上机调试环境 教学过程 计算机程序设计语言的 ...
- 关于ext2.0基本引入说明引入过多开发环境效验太多老火
1.1 Ext版本变迁 * Ext1.0发布于2007年2月,Ext正式从YUI社区中独立出来,不再仅仅支持YUI,而是提供了ext-base.prototype.jquery和YUI4种底层实现.这 ...
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子 ...
- 学习Ext第一天(Ext 简介)
无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你.本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初 ...
最新文章
- pom.xml中的dependencyManagement
- 如何:在OpenText Workflow 6.5模型中保存和读取多行数据
- python with open as yaml_python怎么解析yaml文件?
- 【Unity】2.11 了解游戏有哪些分类对你开阔思路有好处
- 【优秀文章保存】webcollector抽取新闻正文
- 两分数相乘后约分的Cantor表(洛谷P1482题题解,Java语言描述)
- boot spring 解析csv_spring-boot-starter-thymeleaf 避坑指南
- 小鹏汽车回应“侵犯消费者权益被罚3000元”:已于3月8日对购车协议内容进行调整...
- 32位ubuntu 使用pae
- 115网盘 最好的网盘 雨林木风出品 强烈推荐
- Citrix XenServer
- zoj 1409 Communication System
- 2018微软秋招面试经验(软件工程师岗位)
- 女人要记住的亦舒75句话
- http请求判断网络状态
- 机器学习关键步骤(一)
- 在Windows中编辑好的汉字文档,上传到Linux下打开乱码问题
- 如何选择源代码加密软件
- Nick认为的SDN三阶段
- “四核”驱动的“三维”导航 -- 淘宝新UI(需求分析篇)
热门文章
- oppo导出照片计算机找不到了,OPPO手机保存的图片找不到怎么办?
- JavaScript模板引擎 - Elapse
- C语言 链表创建及操作
- 大鹏半岛海边团建烧烤野炊上岛赶海一日游全攻略
- http://www.microsoft.com/zh-cn/download/details.aspx?id=28358 silverlight tool 工具下载地址
- optee中使用虚函数(平台客制化)的设计模型
- 团建游戏----快乐大转盘
- matlab程序闭合导线网程序,【求助】闭合导线简易平差Matlab代码需要大神帮忙
- HAT-Overcoming Catastrophic Forgetting with Hard Attention to the Task翻译
- SpringBoot 2 使用 SpringCloud Netflix Eureka 实现服务注册与发现