|
该帖已经被评为良好帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-04-06
在MenuItem中为什么没有addItem()方法来增加一个孩子？
|
| 返回顶楼 | |
|
发表时间：2007-04-07
ll123456789 写道 在MenuItem中为什么没有addItem()方法来增加一个孩子？
详见 http://www.ajaxjs.com/yuicn/article.asp?id=20075196 |
| 返回顶楼 | |
|
发表时间：2007-04-09
官方的教程：
Grid组件的简易分页 http://www.ajaxjs.com/yuicn/article.asp?id=20076012 |
| 返回顶楼 | |
|
发表时间：2007-04-21
|
| 返回顶楼 | |
|
发表时间：2007-05-08
－－－－－－原创翻译－－－－－－－－－
学习Ext 第八天:EXT的布局（Layout）Part 1 Summary: 本文是区域管理器（region manager）的教程的第一篇，为您介绍如何创建区域，如何增加版面到这些区域。 Author:Dave Fenwick Published: May 01, 2007 Translater: Frank Cheung Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎(layout engine)，区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。 布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中，进行过讨论。定义一个DOM元素的边界（edge），使之一个布局的边框（border）－－这种做法使得创建“加厚型(thick－like)”客户端UI的开发更进一大步。 布局管理器(layout manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。 注意事项：本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器（zip格式提供在这里）中看看发生什么事。 面板（Pane）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,GRID面板 GridPanel,和树状面板 TreePanel。 简单的例子 下面的layout包含 north, south, east, west,和center的区域，而且每个区域包含一个ContentPanel，各区域之间使用得了分隔条分割开。 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: {
}
});这是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设置一下初始尺寸，并最迟定义中间区域。本例中，BorderLayout被绑定到"document.body"这个DOM元素，其实BorderLayout还可以绑定到任何一个封闭的DOM元素。定义好BorderLayout之后，我们加入ContentPanel对象（基于本例）。
mainLayout.beginUpdate(); mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate(); 当前的例子是将ContentPanel加入到所有区域中。由调用mainLayout.beginUpdate()开始。beginUpdate()告诉BorderLayout对象在执行endUpate()方法之前，先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。执行beginUpdate()之后，加入五个ContentPanel对象到区域。所有的ContentPanel对象（除中间的那个外），都设置是可关闭的（closbale）。所有的ContentPanel对象也都设置为自动适配它们的父元素。最后执行endUpdate()渲染layout。 InternetExploer注意事项：BorderLayout所容纳的元素必须有一个SIZE以便正确渲染。典型地你无须为document.body 指明size，因为document.body通常是有size的了（大多数情况，－如果你在浏览器上什么也看不到）。但是如果你将layout连同容器放到现有的web页面上（‘可能是DIV）,那么DIV的size应该先指明以便正确渲染。如下列显示正常： <div style="height:400px;"></div>好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0，父目录下面的代码。 simple.html: <html>
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all.js"></script>
<script type="text/javascript" src="simple.js"></script>
</head>
<body>
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div"></div>
</body>
</html>
simple.js:
Simple = function() {
return {
init : function() {
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: {
}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('south', new Ext.ContentPanel('south-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('east', new Ext.ContentPanel('east-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
fitToFrame: true
}));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);加入内容
上面的例子做的layout,除了可移动分割栏外，功能还不强大。需要加入些内容。有几种的办法加入内容。如果您直接加入内容到DIV中（ContentPanel绑定的那个），ContentPanel对象会对div里面的内容进行渲染。尽管试试！我们会更改html内容加入 center-div中。 simple2.html <html> <head> <title>Simple Layout</title> <link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script> <script type="text/javascript" src="../ext-1.0/ext-all.js"></script> <script type="text/javascript" src="simple.js"></script> </head> <body> <div id="north-div"></div> <div id="south-div"></div> <div id="east-div"></div> <div id="west-div"></div> <div id="center-div"> This is some content that will display in a panel when a ContentPanel object is attached to the div. </div> </body> </html> 除此之外，还可以利用ContentPanel对象带有的function加载数据。可用的方法有几种，这里我们使用其中两种：setContent() 与 setUrl()。setContent()允许您直接从JavaScipt程序中插入HTML。setUrl()，允许您从服务端得到数据加入ContentPanel中。 我们原来的例子中，ContentPanel对象创建的时候是匿名的（anonymous）。这没问题，但要引用它们，你需要遍历区域管理器所分配的对象以获得引用的对象。这不是最好的办法，所有我的做法是分配一个变量给ContentPanel然后便可直接引用。 simple3.js
Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centerPanel;
return {
init : function() {
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: {
}
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true
}));
mainLayout.endUpdate();
northPanel.setContent('This panel will be used for a header');
westPanel.setContent('<img src="nav-mini.gif" border="0" alt="Mini Layout Image" />');
centerPanel.setUrl('index.html');
centerPanel.refresh();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);我们现在从现有的页面动态加载内容。但是这里有个问题。若果内容页面积过大而撑破页面的话将没有意义了。我们提供了一些配置属性以解决这类问题。当fitToFrame为true时，就自动配置autoScroll。内容一旦溢出就会出现滚动条。另外一个涉及InternetExploer的问题,是中间的内容的样式没有生效，原因是一些浏览器支持动态样式而一些不直接，要较好地解决上述问题，推荐使用Iframe标签。
用IFRAME标签做布局可灵活地处理，我们准备在DOM中直接操纵IFRAME.这里IFRAME成为面板的容器，以填入中间区域的内容 设置一下 IFRAME的滚动条并放到中间的页面。. simple4.html <html>
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="simple4.js"></script>
</head>
<body>
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div">
<iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe>
</div>
</body>
</html>
simple4.js
Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centerPanel;
return {
init : function() {
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: {
}
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe'
}));
mainLayout.endUpdate();
northPanel.setContent('This panel will be used for a header');
Ext.get('center-iframe').dom.src = 'index.html';
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);
当前的进展不错。大多数情况滚动条工作起来是很好的，但留意一样的东西， Internet Explorer 7之前的版本，如果文档完整指明DTD的DOCTYPE标签，IE很可能出现垂直滚动条的同时也显示水平滚动条。这个IE布局的一个BUG。 现在这是个基本的LAYOUT和几个ContentPanel对象。接着我们加入一条工具栏（toolbar）到中间的ContentPanel对象。创建过程非常简单。由于主题的关系，我并不准备在这里详细介绍如何创建toolbat。这是简单的创建toolbar的过程： var simpleToolbar = new Ext.Toolbar('simple-tb'); simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'}); simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});要加入toolbar,需要先加入HTML的容器，我们需要加入一些代码以创建toolbar，然后绑定到中间的区域。toolbar有两个按钮： Scroll Bottom和Scroll Top。这些按钮会滚动IFRAME内容到底部或是顶部。为了尽可能兼容多浏览器，我们的加入一个function来控制IFRAME文档。 simple5.html
<html>
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="simple5.js"></script>
<style>
.scroll-bottom .x-btn-text {
background-image: url(scroll-bottom.gif);
}
.scroll-top .x-btn-text {
background-image: url(scroll-top.gif);
}
</style>
</head>
<body>
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div">
<div id="center-tb"></div>
<iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe>
</div>
</body>
</html>
simple5.js
function getIframeDocument(el) {
var oIframe = Ext.get('center-iframe').dom;
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if(oDoc.document) {
oDoc = oDoc.document;
}
return oDoc;
}
Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centerPanel;
return {
init : function() {
var simpleToolbar = new Ext.Toolbar('center-tb');
simpleToolbar.addButton({
text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) {
var iframeDoc = getIframeDocument('center-iframe');
iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
}
});
simpleToolbar.addButton({
text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) {
var iframeDoc = getIframeDocument('center-iframe');
iframeDoc.body.scrollTop = 0;
}
});
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: { }
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe', toolbar: simpleToolbar
}));
mainLayout.endUpdate();
northPanel.setContent('This panel will be used for a header');
Ext.get('center-iframe').dom.src = 'index.html';
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);一个标准的layout已经差不多了。区域可设置标题，这样可以把几个区域区分开来，创建该区域面板的时候指定属性即可。
所有的区域都可以收缩和展开。要使一个区域可收缩，你应在区域配置项中指定collapsible属性。属性collapsedTitle是用于区域收缩之后显示的文字，collapsedTitle属性只用于north和south区域。 simple6.js 注意我们收藏起west区域时，是没有title的。当前的HTML没有提供对一个元素的90度的旋转。我们只好用一张透明的图片来实现，上面的文字是'Navigation',宽18p,高150p,然后90度旋转。 为了显示图片，我们需要增大EXT原先的widget样式，只须在HTML头样式表中加入下列样式便可得到适合的样式效果。如simple7.html示。 .x-layout-collapsed-west {
background-image: url(navigation.gif);
background-repeat: no-repeat;
background-position: center;
}教程的第二部分我们将会接触layout manager的一些高级细节内容，包括内嵌layouts，可编程的展开、收缩区域，创建tab layout和其它一些创建EXTellent程序的有效方法。 |
| 返回顶楼 | |
|
发表时间：2007-05-12
有什么好办法,把iframe的放到dialog上去.
比如全部放到一个页面,有点恐怖了吧~ |
| 返回顶楼 | |
|
发表时间：2007-05-12
var d = new YAHOO.ext.BasicDialog("foo", {
autoCreate:{ tag:"div", cls:"ydlg", children:[ { tag:"div", cls:"ydlg-hd", html:"The Latest Cycling News" },{ tag:"iframe", cls:"ydlg-bd", src:"http://www.cyclingnews.com/" },{ tag:"div", cls:"ydlg-ft" }] }, height:200, width:400, draggable:true, fixedcenter:true }); d.show(); |
| 返回顶楼 | |
|
发表时间：2007-05-14
|
| 返回顶楼 | |
|
发表时间：2007-05-18
来自EXT官网的最新中文教程：
开始使用Grid组件： http://extjs.com/tutorial/chinese-beginning-using-grid-component Grid组件的简易分页： http://extjs.com/tutorial/chinese-basics-paging-grid-component |
| 返回顶楼 | |
|
发表时间：2007-05-30
谢谢楼主，刚才下载了最新的1.0.1的看了下，真是酷眩了。
值得好好研究。 |
| 返回顶楼 | |
