<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.ajaxjs.com/yuicn/article.asp?id=20076721 -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML/CSS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META
content="Yahoo!UI.Ext中文站-基于富界面的表示层中间件解决方案-:Ajax Web2.0 MVC JavaScript RIA JSON Solution"
name=description>
<META
content="ajax javascript framework web2.0 javascript library ajax library javascript library UI component YahooUI! YUI YUI.Ext yui yui-ext Yut.Extend Web2.0 MVC JavaScript RIA JSON Solution"
name=keywords>
<META content="Frank Cheung" name=Author>
<META content=INDEX,FOLLOW name=ROBOTS>
<META http-equiv=imagetoolbar content=no>
<META http-equiv=Window-target content=_top><NOSCRIPT>
<META http-equiv=REFRESH content=0;URL=http://www.ajaxjs.com></NOSCRIPT><LINK
href="favicon.ico" rel="shortcut icon"><LINK href="favicon.ico" rel=icon><LINK
href="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/base.css"
type=text/css rel=stylesheet><LINK
href="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/css.css"
type=text/css rel=stylesheet>
<SCRIPT
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/yui-utilities.js"
type=text/javascript></SCRIPT>
<SCRIPT src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/ext.js"
type=text/javascript></SCRIPT>
<SCRIPT src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/common.js"
type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV align=center>
<DIV id=nav>
<DIV id=nav_title><SPAN id=nav_title2>EXT中文站 Version 1.1 Beta Since
2007-1-8</SPAN><A href="http://www.ajaxjs.com/"><IMG height=31
alt="JS Library:YUI.Ext中文站"
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/ext_china.gif"
width=88 border=0></A></DIV>
<DIV id=nav_bar><IMG class=left
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_3.jpg">
<UL>
<LI>
<LI><A href="http://www.ajaxjs.com/yuicn/index.asp"><IMG
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_6.jpg"
border=0></A>
<LI><A href="http://www.ajaxjs.com/yuicn/demo.asp"><IMG height=29
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_8.jpg"
width=65 border=0></A>
<LI><A id=tutor href="http://www.ajaxjs.com/yuicn/article_list.asp"><IMG
height=29
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_10.jpg"
width=29 border=0></A>
<LI><A href="http://www.ajaxjs.com/ext/docs/"><IMG height=29
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_12.jpg"
width=31 border=0></A>
<LI><A id=downBtn href="javascript:alert('相关产品页面准备中。')"><IMG height=29
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_14.jpg"
width=29 border=0></A>
<LI><A href="http://www.ajaxjs.com/yuicn/bbs/"><IMG height=29
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_16.jpg"
width=29 border=0></A> </LI></UL><IMG class=left
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_18.jpg">
</DIV></DIV><!--下拉菜单-->
<SCRIPT
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/transmenuC.asp"
type=text/javascript></SCRIPT>
<LINK
href="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/transmenu.css"
type=text/css rel=stylesheet>
<DIV style="WIDTH: 760px">
<DIV id=aticle_content_border2><IMG class=left
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_31.jpg">
<DIV
style="BACKGROUND: url(images/main_34.jpg) repeat-x; FLOAT: left; WIDTH: 80%; HEIGHT: 39px"></DIV><IMG
class=left
src="EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.files/main_35.jpg">
<DIV id=main_content style="WIDTH: 708px"><!--startprint-->
<DIV
style="BORDER-RIGHT: #dbdbdb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #dbdbdb 0px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #dbdbdb 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #dbdbdb 1px solid">
<H2>学习EXT第八天:EXT的布局(Layout)Part 1</H2>
<DIV class=dot></DIV>
<DIV style="MARGIN-BOTTOM: 10px" align=right>作者:Dave Fenwick 最后编辑:<SPAN
class=times>2007-5-8 17:12:05</SPAN> 阅读数:<SPAN
class=createdDate>1064</SPAN></DIV>
<DIV
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
<H2>教程:EXT的布局(Layout)Part 1</H2>
<P><LABEL>Summary:</LABEL> 本文是区域管理器(region
manager)的教程的第一篇,为您介绍如何创建区域,如何增加版面到这些区域。 </P>
<P><STRONG><BR>Author:</STRONG>Dave Fenwick<BR><STRONG>Published: </STRONG>May
01, 2007<BR><STRONG>Translater: </STRONG>Frank Cheung </P>
<P>Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎(layout engine),区域管理器(region
manager)的教程将分为几部分,本文是第一篇,为您介绍如何创建区域,如何增加版面到这些区域。</P>
<P>布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack
Slocum对于怎样环绕某一区域,给与指定区域管理的策略,和建立界面的问题,在他的<A
href="http://www.jackslocum.com/blog/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/"
target=_blank>第一</A>、<A
href="http://www.jackslocum.com/blog/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/"
target=_blank>第二篇</A>关于跨浏览器的WEB2.0布局功能的博客中,进行过讨论。定义一个DOM元素的边界(edge),使之一个布局的边框(border)--这种做法使得创建“加厚型(thick-like)”客户端UI的开发更进一大步。</P>
<P>布局管理器(layout
manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south,
east, west,
north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板,你可通过NestedLayoutPanel
类套嵌到BorderLayout 实例中。</P>
<P><STRONG>注意事项:</STRONG>本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器(<A
href="http://extjs.com/downloads/tutorial/layouts-with-ext-p1/layout-with-ext-p1.zip"
target=_blank>zip格式提供在这里</A>)中看看发生什么事。</P>
<P>面板(Pane)是区域管理(region
management)的另外一个组件。面板提供了这么一个地方,可为您的EXT器件(widget)、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板,只不过用于链接多个BorderLayout的区域,其它的面板包括内容面板
ContentPanel,GRID面板 GridPanel,和树状面板 TreePanel。</P>
<H3>简单的例子</H3>
<P>下面的layout包含 north, south, east,
west,和center的区域,而且每个区域包含一个ContentPanel,各区域之间使用得了分隔条分割开。</P>
<P><IMG style="WIDTH: 317px; HEIGHT: 311px" height=375 alt="" src=""
width=570></P><PRE>var mainLayout = new Ext.BorderLayout(document.body,
{
north: {
split: true, initialSize: 50
},
south: {
split: true, initialSize: 50
},
east: {
split: true, initialSize: 100
},
west: {
split: true, initialSize: 100
},
center: {
没有合适的资源?快使用搜索试试~ 我知道了~
EXT中文红落叶之教程
共248个文件
jpg:130个
js:39个
css:39个
需积分: 3 20 下载量 187 浏览量
2008-10-16
10:01:06
上传
评论
收藏 1.07MB RAR 举报
温馨提示
EXT作为WEB端使用已经越来越平凡了 给大家共享下
资源推荐
资源详情
资源评论
收起资源包目录
EXT中文红落叶之教程 (248个子文件)
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
transmenuC.asp 20KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
base.css 10KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
css.css 7KB
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
transmenu.css 986B
Thumbs.db 19KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
ext_china.gif 2KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS8.htm 30KB
EXT中文站- Ajax EXT XHTML-CSS3.htm 17KB
EXT中文站XHTML-CSS2.htm 16KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS.htm 15KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS7.htm 12KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS6.htm 12KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS7天.htm 12KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS9b.htm 10KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS10b.htm 10KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS9a.htm 10KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS5.htm 10KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS4.htm 9KB
EXT中文站- Ajax EXT YUI-Ext UI ECMAScript XHTML-CSS10a.htm 8KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_31.jpg 2KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
main_8.jpg 1KB
共 248 条
- 1
- 2
- 3
资源评论
w2angl1ei404
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功