【免费】ExtJS教程.rar资源-CSDN文库

共496个文件

jpg：260个

js：78个

css：78个

需积分: 0 176 浏览量 2008-09-22 10:30:30 上传评论收藏 2.16MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ExtJS教程.rar （496个子文件）

transmenuC.asp 20KB

base.css 10KB

css.css 7KB

transmenu.css 986B

共 496 条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <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"> <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: {

评论收藏

内容反馈