`

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的形式

先定义页面的上部分:(用法见注释)

  1.  //页面的上部分
  2.     var northPanel=new Ext.Panel({
  3.         title:"顶部面板(实际应用中,通常去掉改属性)",//实际应用中,通常去掉该属性。
  4.         region : 'north',//北部,即顶部,上面
  5.         contentEl : 'north-div',//面板包含的内容
  6.         split : false,//是否可以改变面板大小
  7.         border : false,//当面板内容超出面板大小时,是否显示边框
  8.         collapsible : false,//是否可以收缩,默认不可以收缩,即不显示收缩箭头
  9.         //collapsed:true,//初始化是否显示, 默认是显示
  10.         height : 60
  11.     });

注意 collapsible的使用

页面的左菜单:(用法见注释)

  1. //左边菜单
  2.     var  westPanel=new Ext.Panel({
  3.         title : '左边菜单',//面板名称
  4.         region : 'west',//该面板的位置,此处是西部 也就是左边
  5.         split : true,//为true时,布局边框变粗 ,默认为false
  6.         border : false,
  7.         collapsible : true,
  8.         collapsed:false,//初始化是否显示, 默认是显示
  9.         width : 150,
  10.         minSize : 10,//最小宽度
  11.         maxSize : 300,
  12.         layout : 'accordion',
  13.         layoutConfig : { //布局
  14.             titleCollapse : true,
  15.             animate : true,
  16.             activeOnTop : false
  17.         },
  18.         items : [{
  19.                 title : '统计查询',
  20.                 iconCls : 'money_box'//字面板样式
  21.                 //contentEl : 'my-book'//子面板包含的内容,contentEl 的值日通常是一个div ID
  22.             },
  23.             {
  24.                 title:"内容管理",
  25.                 border:false,autoScroll:true,iconCls:"Icon",
  26.                 autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm,scripts:true 是表示支持包含文件里面的js脚本
  27.             }
  28.   
  29.         ]
  30.     });

左菜单中定义了多个可以折叠的菜单面板,由items包含,上面代码中包含了两个,指向的内容可以使用contentEl包含div,或者 autoLoad加载页面,也可以直接采用html 比如, html:'<a href="">link</a>'。

 

其他面板像上面一样定义。

 

最后将多个面板组合到页面:

  1. var viewport = new Ext.Viewport({
  2.     layout : 'border',//布局,必须是border
  3.     loadMask : true,
  4.     items : [northPanel, //上
  5.             westPanel,//左
  6.             centerPanel,//中
  7.             eastPanel,//右
  8.             southPanel//下
  9.         ]
  10. });

将各个面板分别加到了viewport 中

layout 的值 可以是 column,border,accordion,页面布局必须使用 border。column在form中使用

所有代码如下,可以另存为*.htm,修改ext文件路径,文件执行

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE>Wayfoon:Ext页面布局</TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.    <link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" /> 
  10.     <script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
  11.     <script type="text/javascript" src="ext22/ext-all.js"></script>
  12.  </HEAD>
  13.  <BODY>
  14.   <SCRIPT LANGUAGE="JavaScript">
  15.   <!--
  16.     Ext.onReady(function() 
  17.  {
  18.     Ext.QuickTips.init();
  19.     //页面的上部分
  20.     var northPanel=new Ext.Panel({
  21.         title:"顶部面板(实际应用中,通常去掉改属性)",//实际应用中,通常去掉该属性。
  22.         region : 'north',//北部,即顶部,上面
  23.         contentEl : 'north-div',//面板包含的内容
  24.         split : false,
  25.         border : false,//当面板内容超出面板大小时,是否显示边框
  26.         collapsible : false,//是否可以收缩,默认不可以收缩,即不显示收缩箭头
  27.         //collapsed:true,//初始化是否显示, 默认是显示
  28.         height : 60
  29.     });
  30.     //左边菜单
  31.     var  westPanel=new Ext.Panel({
  32.         title : '左边菜单',//面板名称
  33.         region : 'west',//该面板的位置,此处是西部 也就是左边
  34.         split : true,//为true时,布局边框变粗 ,默认为false
  35.         border : false,
  36.         collapsible : true,
  37.         collapsed:false,//初始化是否显示, 默认是显示
  38.         width : 150,
  39.         minSize : 10,//最小宽度
  40.         maxSize : 300,
  41.         layout : 'accordion',
  42.         layoutConfig : { //布局
  43.             titleCollapse : true,
  44.             animate : true,
  45.             activeOnTop : false
  46.         },
  47.         items : [{
  48.                 title : '统计查询',
  49.                 iconCls : 'money_box'//字面板样式
  50.                 //contentEl : 'my-book'//子面板包含的内容,contentEl 的值日通常是一个div ID
  51.             },
  52.             {
  53.                 title:"内容管理",
  54.                 border:false,autoScroll:true,iconCls:"Icon"
  55.                 //autoLoad:{url:"xx.htm",scripts:true}//面板的内容是指向一个*.htm,scripts:true 是表示支持包含文件里面的js脚本
  56.             }
  57.   
  58.         ]
  59.     });
  60.     //页面的右边
  61.     var eastPanel=new Ext.Panel(
  62.     {
  63.         region:"east",
  64.         title:"右边",
  65.         collapsible:true,
  66.         collapsed:true,
  67.         //collapsed:true,//是否显示
  68.         split:true,
  69.         width:225,
  70.         minSize:175,maxSize:400,layout:"fit",margins:"0 5 0 0",
  71.         layout:"accordion",iconCls:"my-toolPanelIcon",layoutConfig:{animate:true}
  72.     });
  73.      
  74.     //页面的底部
  75.     var southPanel=new Ext.Panel( {
  76.         title:'底部面板',
  77.         region:"south",
  78.         split:true,height:80,minSize:60,maxSize:150,collapsible:true,collapsed:true,
  79.         contentEl:"footer",
  80.         title:"底栏",
  81.         margins:"0 0 0 0"    
  82.     });
  83.     //页面的中间面板
  84.     var centerPanel=new Ext.Panel( {
  85.         region : 'center',//中间 主显示面板
  86.         activeTab : 0,
  87.         enableTabScroll : true,
  88.         border : false,
  89.         items : [{
  90.             id : 'HomePage',
  91.             title : '首页',
  92.             iconCls : 'home',
  93.             contentEl : 'hp',//显示的内容,hp 是div ID
  94.             closable : false,
  95.             layout : 'fit'
  96.         }]
  97.     });
  98.     
  99.     var viewport = new Ext.Viewport({
  100.         layout : 'border',//布局,必须是border
  101.         loadMask : true,
  102.         items : [northPanel, //上
  103.                 westPanel,//左
  104.                 centerPanel,//中
  105.                 eastPanel,//右
  106.                 southPanel//下
  107.             ]
  108.     });
  109. });
  110.   //-->
  111.   </SCRIPT>
  112.     <div id="north-div" align="center">
  113.       上 上 上 上 上
  114.     </div>
  115.     <div id="hp" style="margin: 40px 20px 10px 20px; font-weight: lighter">
  116.         <div style="font-size: 16px; color: red;"> 面板的布局分为:东西南北中 也就是左右上下中 </div>
  117.         </div>
  118.     </div>
  119.      <div id="footer" class="footer">
  120.      <div>
  121.         Copyright <span style="font-size: 20px;vertical-align:bottom;">©</span> 2007-2008 
  122.        
  123.         <sup style="font-size: 16px">®</sup> 版权所有
  124.         </div>
  125.     </div>
  126.  </BODY>
  127. </HTML>

效果如图:

 

 

教程下载地址:http://download.csdn.net/source/594644

 

 

分享到:
评论
2 楼 zuoguoyao 2011-09-05  
版主,有没有 ext数据互动的。。教程
1 楼 NineInchNails 2011-08-17  
谢谢分享:D

相关推荐

    ext2.0官方文档(chm),Ext 2.0 简明教程,Ext2经典应用

    3. **EXT2.0中文教程.exe**: 这可能是一个以可执行文件(.exe)形式的中文教学程序,对于中文用户来说非常友好。它可能包含了视频教程、交互式示例或者图文并茂的讲解,帮助学习者更直观地理解Ext 2.0的用法和功能。...

    最新的ext2.0下载

    2. **布局管理**:在布局方面,EXT2.0引入了更灵活的布局系统,支持多种布局模式,如fit布局、form布局、border布局等,使得页面元素可以根据需要动态调整大小和位置。 3. **数据绑定**:EXT2.0强化了数据绑定机制...

    EXT2.3+EXT2.0教程

    EXT2.0是一个重要的里程碑,它引入了许多新特性,例如改进了布局系统,使得组件的排列和自适应更加灵活。同时,EXT2.0增强了表格控件,提供了分页、排序和过滤等功能,极大地提升了数据展示的效率。此外,2.0版本还...

    Ext2.0教程与实例 开发与实践笔记

    这个教程和实例集主要涵盖了Ext2.0的基础知识、开发技巧以及实践应用,旨在帮助开发者快速掌握这一技术。 首先,让我们关注"Ext2.0的入门小实例"。这个部分可能包括了创建基本的用户界面元素,如窗口(Windows)、...

    ext2.0(jsp标签)

    EXT 2.0是Sencha公司推出的一个基于JavaScript的开源用户界面库,专门用于构建富互联网应用程序(RIA)。它提供了一套完整的组件化、可定制的UI控件,包括树形视图、菜单、弹出式菜单等,使得开发者能够轻松创建具有...

    EXT2.0中文教程、ExtJS 实用简明教程

    这个实用简明教程可能涵盖了EXT2.0的所有内容,并且可能深入到EXT3.x或更高版本的特性,如EXT JS的Grid Panel(表格面板)的高级功能、数据存储和远程数据加载、图表组件、拖放操作以及自定义组件的开发。此外,教程...

    Ext2.0中文文档

    Ext 2.0的核心特性包括组件化、数据绑定、布局管理、丰富的用户界面组件以及强大的数据网格等。以下是对这些知识点的详细阐述: 1. **组件化**:Ext 2.0基于组件的设计思想,允许开发者通过组合各种小部件来构建...

    EXT2.0简明教程

    EXT手册.CHM是EXT2.0的官方文档,它包含了详尽的API参考、示例代码以及教程,是学习和掌握EXT2.0的关键资源。CHM文件是Microsoft编写的帮助文件格式,通常用于存放技术文档和教程,方便离线查阅。 EXT js的组件系统...

    Ext 2.0 简明教程

    3. **布局管理**:Ext 2.0提供了一系列布局管理器,如Fit布局、Table布局、Form布局等,帮助开发者轻松管理容器内的组件排列和大小。 4. **事件处理**:事件驱动是Ext 2.0的重要特性,所有组件都支持事件监听和触发...

    ext2.0 layout布局(使用viewport)

    ext2.0 layout布局(使用viewport),将其部署到php服务器上,可以查看效果:适合一般的应该工作界面,有滑动菜单和树形菜单等,初步实现了一个不错的应用视图框架

    EXT2.0中文教程

    1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...

    ext2.0项目源代码供大家学习ext使用

    9. **Ext Designer支持**:EXT 2.0可能还支持EXT Designer,一个可视化的布局编辑工具,使得非程序员也能创建EXT界面。 10. **主题和皮肤**:EXT提供了多种预设的主题,可以改变整个应用程序的外观和感觉。 11. **...

    Ext2.0组件,全组件和帮助手册

    Ext2.0提供了多种布局模式,如Fit布局、Table布局、Form布局、Border布局等,用于控制组件在容器中的排列方式,使得页面元素能够适应不同屏幕尺寸和分辨率。 3. **数据绑定**: 它支持数据模型(Model)、数据...

    EXTjs2.0 教程 包括《EXT2.0简明教程》和《ext基础教程》两份教材

    通过《EXT2.0简明教程》和《ext基础教程》,学习者将了解到如何初始化EXT应用,创建基本组件,处理用户交互,以及如何利用EXTjs的API进行数据管理和Ajax通信。同时,教程中还会介绍EXTjs的事件模型、CSS样式和主题...

    EXT2.0 GRID 示例

    EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...

    ext 2.0

    4. **表单组件**:Ext 2.0提供了各种表单控件,如文本框、下拉框、复选框、单选按钮等,以及强大的表单布局和验证功能。表单组件与数据模型紧密集成,方便数据的双向绑定。 5. **布局管理**:Ext 2.0的布局系统允许...

    ext2.0入门教程

    EXT2.0是EXT JavaScript库的一个早期版本,它是一个强大的前端开发框架,尤其适用于构建复杂的、数据驱动的Web应用程序。EXT2.0的核心是它的组件模型,它提供了一系列丰富的用户界面组件,如表格、面板、窗口、菜单...

    EXT2.0 API文档

    2. **布局管理**:讲解EXT2.0中的各种布局模式,如Fit布局、Table布局、Border布局等,以及如何根据需求选择合适的布局。 3. **数据存储与模型**:包括Store、Model和Proxy,它们是EXT数据层的核心,用于与服务器...

    ext2.0 详解和API

    "Demos_Ext2.0.rar"可能包含了EXT2.0的官方示例代码,这些示例通常涵盖了框架的各个功能模块,包括基本组件的使用、数据绑定、Ajax通信、布局管理、拖放操作以及各种高级功能的演示。通过学习和研究这些示例,开发者...

Global site tag (gtag.js) - Google Analytics