强大的EXT最新使用手册（中文）(8)

完成

最后再刷新一下，如果一切顺利，那这个就是新的Ext.ux.IconCombo扩展！ 希望你能在此基础上扩展更多的组件！

谢谢Brian Moeskau提醒，使得能进一步精简Ext.ux.IconCombo 代码，才称得上最终版本。最终代码和CSS为：

Ext.ux.IconCombo.js

// Create user extensions namespace (Ext.ux) Ext.namespace('Ext.ux'); /** * Ext.ux.IconCombo Extension Class * * @author Jozef Sakalos * @version 1.0 * * @class Ext.ux.IconCombo * @extends Ext.form.ComboBox * @constructor * @param {Object} config Configuration options */ Ext.ux.IconCombo = function(config) { // call parent constructor Ext.ux.IconCombo.superclass.constructor.call(this, config); this.tpl = config.tpl || ' {' + this.displayField + '} ' ; this.on({ render:{scope:this, fn:function() { var wrap = this.el.up('div.x-form-field-wrap'); this.wrap.applyStyles({position:'relative'}); this.el.addClass('x-icon-combo-input'); this.flag = Ext.DomHelper.append(wrap, { tag: 'div', style:'position:absolute' }); }} }); } // end of Ext.ux.IconCombo constructor // extend Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, { setIconCls: function() { var rec = this.store.query(this.valueField, this.getValue()).itemAt(0); if(rec) { this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField); } }, setValue: function(value) { Ext.ux.IconCombo.superclass.setValue.call(this, value); this.setIconCls(); } }); // end of extend // end of file Ext.ux.IconCombo.css

css /* application specific styles */ .x-flag-us { background-image:url(../img/flags/us.png); } .x-flag-de { background-image:url(../img/flags/de.png); } .x-flag-fr { background-image:url(../img/flags/fr.png); } /* Ext.ux.IconCombo mandatory styles */ .x-icon-combo-icon { background-repeat: no-repeat; background-position: 0 50%; width: 18px; height: 14px; } .x-icon-combo-input { padding-left: 25px; } .x-form-field-wrap .x-icon-combo-icon { top: 3px; left: 5px; } .x-icon-combo-item { background-repeat: no-repeat; background-position: 3px 50%; padding-left: 24px; } EXT的布局（Layout）

Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎（layout engine），区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。

布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中，进行过讨论。定义一个DOM元素的边界（edge），使之一个布局的边框（border）－－这种做法使得创建“富界面”客户端UI的开发更进一大步。

布局管理器(layout manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。

注意事项：本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器（zip格式提供在这里）中看看发生什么事。

面板（Panel）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,Grid面板 GridPanel,和Tree面板 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被绑定到\这个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应该先指明以便正确渲染。如下列显示正常：

好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0，父目录下面的代码。

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库强大的EXT最新使用手册（中文）(8)在线全文阅读。