javatoyou
javatoyou

Ext布局类的介绍与使用

在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各种的布局。本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计页面布局。
<!--[if !supportLists]-->1. <!--[endif]-->BorderLayout类
BorderLayout类是布局中的最基本的单元，它已预设了south、 east、 west、 north和center等5个区域。你可以根据你的需要任意组合这些区域，但是要注意的一点就是，center区域是必须使用的，而且center区域不允许隐藏和折叠。

创建一个新布局的语句如下：

new BorderLayout(String/HTMLElement/Element container, Object config)

其参数分别是：

container：

绑定布局的容器。绑定布局的容易可以是docume.body，也可以是其它HTMLElement。不过如果是其它HTMLElement，该HTMLElement不能是绝对定位的，或者要在该HTMLElement中加入css定义“position:relative”，还需要为该HTMLElement设置大小。

config：

布局区域的划分与定义。主要是对north、south、center、east和west五个区域就行定义。区域的定义请参考LayoutRegion类的定义参数。

 
BorderLayout类常用的属性、方法与事件如表1。
属性
 
monitorWindowResize
 
如果设置为发绿色，则不检测窗口大小的改变。默认值为true。
 
方法
 
add
 
增加一个内容面板（或子类）到某个区域。
定义：public function add(String target, Ext.ContentPanel panel)
参数：
target：目标区域的关键字（north、south、 east、 west 或center）
panel：要增加的面板类
返回：Ext.ContentPanel
 
addRegion
 
增加一个不存在的区域。
定义：public function addRegion(String target, Object config)
参数：
target：目标区域的关键字（north、south、 east、 west 或center）
config：区域定义对象。
返回：BorderLayoutRegion
 
beginUpdate
 
暂时停止LayoutManager的自动布局管理。
定义：public function beginUpdate()
参数：无
返回：void
 
endUpdate
 
恢复LayoutManager的自动管理同时结束更新。
定义：public function endUpdate(Boolean noLayout)
参数：
noLayout：如果为true则不进行布局更新。默认值为false。
返回：void
 
findPanel
 
通过id查找区域内的面板。
定义：public function findPanel(String panelId)
参数：
panelId：面板id。
返回：Ext.ContentPanel或者null（没有找到）。
 
getEl
 
返回绑定布局的元件。
定义：public function getEl()
参数：无
返回：Ext.Element
 
getRegion
 
根据关键字返回指定的区域。
定义：public function getRegion(String target)
参数：
target：目标区域的关键字（north、south、 east、 west 或center）
返回：Ext.LayoutRegion
 
remove
 
从某个区域中移除一个内容面板（或子类）。
定义：public function remove(String target, Number/String/Ext.ContentPanel panel)
参数：
target：目标区域的关键字（north、south、 east、 west 或center）
panel：要移除面板的索引值、id或者对象本身。
返回：Ext.ContentPanel
 
restoreState
 
使用Ext.state.Manager或者状态提供者重建布局。
定义：public function restoreState([Ext.state.Provider provider])
参数：
provider : Ext.state.Provider（可选）
返回：void
 
showPanel
 
设置某个面板为当前活动面板。
定义：public function showPanel(String/ContentPanel panelId)
参数：
panelId：要设置的面板id或对象本身。
返回：Ext.ContentPanel或者null（面板不存在）
 
事件
 
regioncollapsed
 
当一个区域折叠的时候触发本事件。
传递参数：
region : Ext.LayoutRegion（折叠的区域对象）
 
regionexpanded
 
当一个区域展开的时候触发本事件。
传递参数：
region : Ext.LayoutRegion（展开的区域对象）
 
regionresized
 
当用户改变区域大小的时候触发本事件。
传递参数：
region : Ext.LayoutRegion（改变大小的区域对象）
newSize: 新的区域大小（east/west为宽度,north/south为高度）。
 
表1
 
<!--[if !supportLists]-->2. <!--[endif]-->LayoutRegion类
因为布局是预定好了五个区域的，所以LayoutRegion类不可以创建， 只可以对预定区域进行设置、操作和附加事件。
LayoutRegion的常用的属性、方法、事件和定义参数如表2。
属性
 
bodyEl
 
返回该区域的主元件对象，类型为Ext.Element。
 
collapsedEl
 
返回该区域折叠后的主html元件对象，类型为Ext.Element。
 
el
 
返回该区域的容器元件对象，类型为Ext.Element。
 
panels
 
返回该区域中的面板集合。类型为Ext.util.MixedCollection
 
titleEl
 
返回该区域的标题栏元件对象，类型为Ext.Element。
 
titleTextEl
 
返回该区域的标题显示元件，类型为HTMLElement。
 
方法
 
add
 
增加一个内容面板（或子类）到该区域。
定义：public function add(ContentPanel... panel)
参数：
panel：要增加的面板，可以是多个。
返回：Ext.ContentPanel，如果只增加一个，则返回增加的面板对象，否则返回null。
 
collapses
 
折叠该区域。
定义：public function collapse([Boolean skipAnim])
参数：
skipAnim：如果为true则在折叠区域时不显示动态效果（如果animate设置为true），可选参数。
返回：void
 
expand
 
展开该区域、
定义：public function expand(Ext.EventObject e, [Boolean skipAnim])
参数：
e： 触发展开区域的事件，如果手动调用则设置null。
skipAnim：如果为true则在展开区域时不显示动态效果（如果animate设置为true），可选参数。
返回：void
 
getActivePanel
 
获取当前为活动状态的面板。
定义public function getActivePanel()
参数：无
返回：Ext.ContentPanel或null
 
getEl
 
返回该区域的容器元件。
定义：public function findPanel(String panelId)
参数：无
返回：Ext. Element
 
getPanel
 
根据面板的索引、id或对象本身返回面板。
定义：public function getPanel(Number/String/ContentPanel panel)
参数：
Panel：面板的索引、id或对象本身
返回：Ext.ContentPanel
 
getPosition
 
返回该区域的位置(north/south/east/west/center)。
定义：public function getPosition()
参数：无
返回：String
 
getTabs
 
返回该区域中的tab面板。
定义：public function getTabs()
参数：无
返回：Ext.TabPanel
 
hasPanel
 
检查某个面板是否在该区域。
定义：public function hasPanel(Number/String/ContentPanel panel)
参数：
panel: 面板的索引、id或对象本身
返回：Boolean
 
hide
 
隐藏该面板。
定义：public function hide()
参数：无
返回：void
 
hidePanel
 
根据面板的索引、id或对象本身隐藏面板。
定义：public function getPanel(Number/String/ContentPanel panel)
参数：
Panel：面板的索引、id或对象本身
返回：void
 
isVisible
 
检查该区域是否可见的。
定义：public function isVisible()
参数：无
返回：Boolean，如果该区域可见返回true
 
remove
 
从该区域中移除一个面板。
定义：public function remove(Number/String/Ext.ContentPanel panel)
参数：
panel：要移除面板的索引值、id或者对象本身。
返回：Ext.ContentPanel
 
resizeTo
 
调整区域大小。如果是垂直区域(west, east)则调整宽度，如果是水平区域(north, south)则调整高度。
定义：public function resizeTo(Number newSize)
参数：
newSize：新的宽度或高度
返回：void
 
setCollapsedTitle
 
设置north/south区域折叠时的标题（可通过定义collapsedTitle参数设置）。
定义：public function setCollapsedTitle([String title])
参数：
title：可选参数，标题文本可以是HTML标记
返回：void
 
show
 
显示该区域。
定义：public function show()
参数：无
返回：void
 
showPanel
 
显示该区域中某个面板。
定义：public function showPanel(Number/String/ContentPanel panelId)
参数：
panelId：要显示面板的索引值、id或者对象本身。
返回：Ext.ContentPanel
 
unhidePanel
 
显示被隐藏了的面板的标签。
定义：public function unhidePanel(Number/String/ContentPanel panel)
参数：
panelId：要显示面板的索引值、id或者对象本身。
返回：void
 
事件
 
beforeremove
 
当一个面板被移动或关闭时出发本事件。如果要取消该操作，请在事件中设置：e.cancel = true
传递参数：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
e：取消事件对象
 
collapsed
 
当该区域被折叠是触发本事件。
传递参数：
this : Ext.LayoutRegion
 
expanded
 
当该区域被展开是触发本事件。
传递参数：
this : Ext.LayoutRegion
 
invalidated
 
当该区域在布局中改变时触发本时间。
传递参数：
this : Ext.LayoutRegion
 
panelactivated
 
当该区域中某个面板成为活动面板时触发本事件。
传递参数：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
 
paneladded
 
当该区域中增加面板时触发本事件。
传递参数：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
 
panelremoved
 
当该区域中删除面板时触发本事件。
传递参数：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
 
resized
 
当用户改变区域大小时触发本事件。
传递参数：
this：Ext.LayoutRegion
newSize：新的宽度（east/west）或高度（north/south）
 
visibilitychange
 
当该区域显示状态改变时触发本事件。
传递参数：
this：Ext.LayoutRegion
visibility：显示（ture）或隐藏（false）
 
区域定义参数

alwaysShowTabs

如果设置为true，则总是显示标签栏。默认值未false。

animate

如果设置为true，则在展开和折叠时有动画效果。缺省值为false。

autoHide

如果设置为false，则当鼠标离开“浮动”区域的时候不自动隐藏。默认值是true。

autoScroll

如果设置为true，则当显示内容超出区域时显示滚动条，默认值为false。

closeOnTab

如果设置为true，则在标签标题显示关闭图标。默认值未false。

cmargins

设置区域折叠时四边的外延边距。默认值是：north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0}。

collapsed

如果设置为true，则显示初始化为折叠状态。默认值为false。

collapsedTitle

在north或south区域折叠时显示的信息。

collapsible

如果设置为false，则不允许折叠。缺省值为true。

disableTabTips

如果设置为true，则屏蔽标签提示信息。默认值为false。

 
duration

设置展开和折叠区域时的动画效果时间长度。默认值是0.3

floatable

如果设置为false，则不允许浮动。默认值为true。

hidden

如果设置为true，则区域初始化为隐藏状态。默认值为false。

hideTabs

如果设置为true，则不显示标签。默认值为false。

hideWhenEmpty

如果设置为true，则当该区域没有面板的时候隐藏区域。

initialSize

设置该区域的初始大小。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。

margins

设置对象四边的外延边距。默认值是{top: 0, left: 0, right:0, bottom: 0}。

maxSize

设置该区域的最大尺寸。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。

minSize

设置该区域的最小尺寸。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。

minTabWidth

设置标签的最小宽度。默认值是40。

preferredTabWidth

设置首先的标签宽度。默认值是150。

preservePanels

如果设置为true，则保留被移除的面板以便重新打开。默认值为false。

resizeTabs

如果设置为true，则会自动设置标签的大小，这将会根据标签栏的空间自动调整所有标签到相同的大小，类似于FireFox 1.5的标签栏。默认值是false。

showPin

如果设置为true，则显示大头针按钮。默认值为false。

slideDuration

设置区域浮动或隐藏时的动画效果时间。默认值是0.45

split

如果设置为true，则显示分割控制条，允许改变区域的大小。默认值为false。

tabPosition

设置标签的显示位置是在顶部还是底部，默认值为“bottom”，标签显示在底部。如果要标签显示在顶部，设置值为“top”。

title

设置区域的标题（显示在面板的顶部）。如果设置titlebar的值为false，则该设置的值不会被显示。

titlebar

如果设置为true，则显示标题栏，否则不显示标题栏。默认值是true。

toolbar

设置由Ext.Toolbar创建的工具条。

useShim

设置分割控制条是否通过div层在iframes上进行拖动。默认值为false。

表2

 
<!--[if !supportLists]-->3. <!--[endif]-->ContentPanel类
ContentPanel是一个基本的面板类。面板的作用就是提供一个容器，大家可以在这个容器里加入自己要输出的内容，例如表格、树列表、Iframe等等。从contentPanel派生出GridPanel类和NestedLayoutPanel类。
创建一个新面板的语句如下：

new ContentPanel (String/HTMLElement/Ext.Element el, String/Object config, [String content])

其参数分别是：

el：

绑定面板的容器。可以是HTMLElement的id，HTMLElement本身或者Ext.Element。

config：

面板的定义。可以是字符类型（只设置面板标题），也可以是一个定义参数对象，定义参数请参阅表3的定义参数。

Content

可选参数，字符类型，设置这个面板的HTML内容。

 
ContentPanel类常用的属性、方法、事件和定义参数如表3。
属性
 
该类没有公共属性。
 
方法
 
destroy
 
清除面板。。
定义：public function destroy()
参数：无
返回：void
 
getEl
 
返回该面板的元件。
定义：public function getEl()
参数：无
返回：Ext.Element
 
getId
 
返回该面板的id
定义：public function getId()
参数：无
返回：字符串
 
getTitle
 
返回该面板的标题
定义：public function getTitle()
参数：无
返回：字符串
 
getToolbar
 
返回该面板设置的工具条。
定义：public function getToolbar()
参数：无
返回：Ext.Toolbar
 
getUpdateManager
 
返回该面板的更新管理器，从而进行Ajax更新。
定义：public function getUpdateManager()
参数：无
返回：Ext.UpdateManager
 
isClosable
 
返回该面板是否设置了关闭图标，允许关闭。
定义：public function isClosable()
参数：无
返回：布尔值。
 
load
 
从XHR立即加载面板的内容。注意：如果要面板被激活时才加载内容，请使用setUrl方法。
定义：public function load(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl])
参数：
url：请求返回内容的页面地址。可以是单独的地址字符串，也可以是一个定义对象，或者是一个函数。
params：要提交的url的参数。可选参数。
callback：回调函数。当传输完成后，执行该函数。可选。函数返回三个参数：oElement（对象本身）、 bSuccess（是否传输成功）、 oResponse（提交后返回的内容）。
discardUrl：布尔值。可选。默认情况下，如果你执行一个更新后，默认url将会被修改。如果该参数设置为true，则不修改默认url。
返回：Ext.ContentPanel
 
refresh
 
强制面板通过setUrl方法更新内容。如果没有调用setUrl方法，该方法将不执行。该方法不需要面板为活动面板时才更新内容。
定义：public function refresh()
参数：无
返回：void
 
setContent
 
设置面板内容。
定义：public function setContent(String content, [Boolean loadScripts])
参数：
content：面板内容。
loadScripts：如果设置为true，则在content寻找脚本并执行。可选参数。
返回：void
 
setTitle
 
设置面板标题。
定义：public function setTitle(String title)
参数：
title：面板标题。
返回：void
 
setUrl
 
设置url以便面板加载内容。当面板是活动面板时，内容将自动从URL加载内容。
定义：public function setUrl(String/Function url, [String/Object params], [Boolean loadOnce])
参数：
url：参考load方法。
params：参考load方法。
loadOnce：布尔值。如果设置为false，则每当面板成为活动面板时都会从Ajax加载内容。如果设置为true，则只加载一次。默认值是false。
返回：Ext.UpdateManager
 
事件
 
activate
 
当面板成为活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
deactivate
 
当面板成为非活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
resize
 
如果面板定义fitToFrame为true，则当面板改变大小时触发该事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
width：面板调整大小后的宽度
height：面板调整大小后的高度
 
面板定义参数
 
adjustments
 
当执行fitToFrame时增加的宽度和高度，默认值是[0,0]
 
autoCreate
 
如果设置为true，则自动为该面板产生DOM element或者由Ext.DomHelper配置的element被创建。
 
autoScroll
 
如果设置为true，则当显示内容超出面板显示区域时显示滚动条，默认值为true。要配合fitToFrame使用。
 
background
 
如果设置为true，则添加该面板时，该面板不会成为活动面板。默认值是false。
 
closable
 
如果设置为true，则显示关闭图标，允许关闭面板。默认值为false。
 
fitContainer
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrame和resizeEl实现该功能。默认值为false。
 
fitToFrame
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。默认值为false。
 
loadOnce
 
参看setUrl方法。
 
params
 
参看setUrl方法。
 
resizeEl
 
如果fitToFrame设置为true，则该方法设置的element会根据区域的变化自动调整大小。
 
title
 
设置面板的标题。
 
toolbar
 
设置面板的工具条。
 
url
 
参看setUrl方法。
 
表3
 
<!--[if !supportLists]-->4. <!--[endif]-->NestedLayoutPanel
如果一个区域内还需要再细分区域，那么需要用到NestedLayoutPanel类。NestedLayoutPanel类是ContentPanel类的一个扩展。
创建一个NestedLayoutPanel的语句如下：

new NestedLayoutPanel(Ext.BorderLayout layout, String/Object config)

其参数分别是：

layout：

要绑定该面板布局。

config：

面板的定义。可以是字符类型（只设置面板标题），也可以是一个定义参数对象，定义参数请参阅表4的定义参数。

 
NestedLayoutPanel类常用的属性、方法、事件和定义参数如表3。
属性
 
该类没有公共属性。
 
方法
 
destroy
 
清除面板。。
定义：public function destroy()
参数：无
返回：void
 
getEl
 
返回该面板的元件。
定义：public function getEl()
参数：无
返回：Ext.Element
 
getId
 
返回该面板的id
定义：public function getId()
参数：无
返回：字符串
 
getLayout
 
返回该面板的内部布局对象。
定义：public function getTitle()
参数：无
返回：Ext.BorderLayout
 
getTitle
 
返回该面板的标题
定义：public function getTitle()
参数：无
返回：字符串
 
getToolbar
 
返回该面板设置的工具条。
定义：public function getToolbar()
参数：无
返回：Ext.Toolbar
 
getUpdateManager
 
返回该面板的更新管理器，从而进行Ajax更新。
定义：public function getUpdateManager()
参数：无
返回：Ext.UpdateManager
 
isClosable
 
返回该面板是否设置了关闭图标，允许关闭。
定义：public function isClosable()
参数：无
返回：布尔值。
 
load
 
从XHR立即加载面板的内容。注意：如果要面板被激活时才加载内容，请使用setUrl方法。
定义：public function load(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl])
参数：
url：请求返回内容的页面地址。可以是单独的地址字符串，也可以是一个定义对象，或者是一个函数。
params：要提交的url的参数。可选参数。
callback：回调函数。当传输完成后，执行该函数。可选。函数返回三个参数：oElement（对象本身）、 bSuccess（是否传输成功）、 oResponse（提交后返回的内容）。
discardUrl：布尔值。可选。默认情况下，如果你执行一个更新后，默认url将会被修改。如果该参数设置为true，则不修改默认url。
返回：Ext.ContentPanel
 
refresh
 
强制面板通过setUrl方法更新内容。如果没有调用setUrl方法，该方法将不执行。该方法不需要面板为活动面板时才更新内容。
定义：public function refresh()
参数：无
返回：void
 
setContent
 
设置面板内容。
定义：public function setContent(String content, [Boolean loadScripts])
参数：
content：面板内容。
loadScripts：如果设置为true，则在content寻找脚本并执行。可选参数。
返回：void
 
setTitle
 
设置面板标题。
定义：public function setTitle(String title)
参数：
title：面板标题。
返回：void
 
setUrl
 
设置url以便面板加载内容。当面板是活动面板时，内容将自动从URL加载内容。
定义：public function setUrl(String/Function url, [String/Object params], [Boolean loadOnce])
参数：
url：参考load方法。
params：参考load方法。
loadOnce：布尔值。如果设置为false，则每当面板成为活动面板时都会从Ajax加载内容。如果设置为true，则只加载一次。默认值是false。
返回：Ext.UpdateManager
 
事件
 
activate
 
当面板成为活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
deactivate
 
当面板成为非活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
resize
 
如果面板定义fitToFrame为true，则当面板改变大小时触发该事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
width：面板调整大小后的宽度
height：面板调整大小后的高度
 
面板定义参数
 
adjustments
 
当执行fitToFrame时增加的宽度和高度，默认值是[0,0]
 
autoCreate
 
如果设置为true，则自动为该面板产生DOM element或者由Ext.DomHelper配置的element被创建。
 
autoScroll
 
如果设置为true，则当显示内容超出面板显示区域时显示滚动条，默认值为true。要配合fitToFrame使用。
 
background
 
如果设置为true，则添加该面板时，该面板不会成为活动面板。默认值是false。
 
closable
 
如果设置为true，则显示关闭图标，允许关闭面板。默认值为false。
 
fitContainer
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrame和resizeEl实现该功能。默认值为false。
 
fitToFrame
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。默认值为false。
 
loadOnce
 
参看setUrl方法。
 
params
 
参看setUrl方法。
 
resizeEl
 
如果fitToFrame设置为true，则该方法设置的element会根据区域的变化自动调整大小。
 
title
 
设置面板的标题。
 
toolbar
 
设置面板的工具条。
 
url
 
参看setUrl方法。
 
表4
 
<!--[if !supportLists]-->5. <!--[endif]-->GridPanle
GridPanel是一个contentPanel类的子类。为Grid提供一个面板容器。
创建一个GridPanel的语句如下：

new public function GridPanel(Ext.grid.Grid grid, String/Object config)

其参数分别是：

grid：

要放置的表格。Ext.grid.Grid表格类。

config：

面板的定义。可以是字符类型（只设置面板标题），也可以是一个定义参数对象，定义参数请参阅表3的定义参数。

 
GridPanel类常用的属性、方法、事件和定义参数如表4。
属性
 
该类没有公共属性。
 
方法
 
destroy
 
清除面板。。
定义：public function destroy()
参数：无
返回：void
 
getEl
 
返回该面板的元件。
定义：public function getEl()
参数：无
返回：Ext.Element
 
getGrid
 
返回该面板的表格。
定义：public function getGrid()
参数：无
返回：Ext.grid.Grid
 
getId
 
返回该面板的id
定义：public function getId()
参数：无
返回：字符串
 
getTitle
 
返回该面板的标题
定义：public function getTitle()
参数：无
返回：字符串
 
getToolbar
 
返回该面板设置的工具条。
定义：public function getToolbar()
参数：无
返回：Ext.Toolbar
 
getUpdateManager
 
返回该面板的更新管理器，从而进行Ajax更新。
定义：public function getUpdateManager()
参数：无
返回：Ext.UpdateManager
 
isClosable
 
返回该面板是否设置了关闭图标，允许关闭。
定义：public function isClosable()
参数：无
返回：布尔值。
 
load
 
从XHR立即加载面板的内容。注意：如果要面板被激活时才加载内容，请使用setUrl方法。
定义：public function load(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl])
参数：
url：请求返回内容的页面地址。可以是单独的地址字符串，也可以是一个定义对象，或者是一个函数。
params：要提交的url的参数。可选参数。
callback：回调函数。当传输完成后，执行该函数。可选。函数返回三个参数：oElement（对象本身）、 bSuccess（是否传输成功）、 oResponse（提交后返回的内容）。
discardUrl：布尔值。可选。默认情况下，如果你执行一个更新后，默认url将会被修改。如果该参数设置为true，则不修改默认url。
返回：Ext.ContentPanel
 
refresh
 
强制面板通过setUrl方法更新内容。如果没有调用setUrl方法，该方法将不执行。该方法不需要面板为活动面板时才更新内容。
定义：public function refresh()
参数：无
返回：void
 
setContent
 
设置面板内容。
定义：public function setContent(String content, [Boolean loadScripts])
参数：
content：面板内容。
loadScripts：如果设置为true，则在content寻找脚本并执行。可选参数。
返回：void
 
setTitle
 
设置面板标题。
定义：public function setTitle(String title)
参数：
title：面板标题。
返回：void
 
setUrl
 
设置url以便面板加载内容。当面板是活动面板时，内容将自动从URL加载内容。
定义：public function setUrl(String/Function url, [String/Object params], [Boolean loadOnce])
参数：
url：参考load方法。
params：参考load方法。
loadOnce：布尔值。如果设置为false，则每当面板成为活动面板时都会从Ajax加载内容。如果设置为true，则只加载一次。默认值是false。
返回：Ext.UpdateManager
 
事件
 
activate
 
当面板成为活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
deactivate
 
当面板成为非活动面板时触发本事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
 
resize
 
如果面板定义fitToFrame为true，则当面板改变大小时触发该事件。
传递参数：
this : Ext.ContentPanel（触发事件的面板对象）
width：面板调整大小后的宽度
height：面板调整大小后的高度
 
面板定义参数
 
adjustments
 
当执行fitToFrame时增加的宽度和高度，默认值是[0,0]
 
autoCreate
 
如果设置为true，则自动为该面板产生DOM element或者由Ext.DomHelper配置的element被创建。
 
autoScroll
 
如果设置为true，则当显示内容超出面板显示区域时显示滚动条，默认值为true。要配合fitToFrame使用。
 
background
 
如果设置为true，则添加该面板时，该面板不会成为活动面板。默认值是false。
 
closable
 
如果设置为true，则显示关闭图标，允许关闭面板。默认值为false。
 
fitContainer
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrame和resizeEl实现该功能。默认值为false。
 
fitToFrame
 
如果设置为true，则面板会根据区域的变化自动调整面板大小。默认值为false。
 
loadOnce
 
参看setUrl方法。
 
params
 
参看setUrl方法。
 
resizeEl
 
如果fitToFrame设置为true，则该方法设置的element会根据区域的变化自动调整大小。
 
title
 
设置面板的标题。
 
toolbar
 
设置面板的工具条。
 
url
 
参看setUrl方法。
 
表4
 
<!--[if !supportLists]-->6. <!--[endif]-->一个简单的例子
通过上面几节的介绍，我们认识了创建布局的基本类。下面，我们将通过一个简单的例子来学习如何实现一个布局。
本例子的布局是我们通常用到的应用程序布局，顶部是一个菜单条，中间显示内容，底部是状态条，请看图1。
<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"   o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"   stroked="f">   <v:stroke joinstyle="miter"  />   <v:formulas>    <v:f eqn="if lineDrawn pixelLineWidth 0"  />    <v:f eqn="sum @0 1 0"  />    <v:f eqn="sum 0 0 @1"  />    <v:f eqn="prod @2 1 2"  />    <v:f eqn="prod @3 21600 pixelWidth"  />    <v:f eqn="prod @3 21600 pixelHeight"  />    <v:f eqn="sum @0 0 1"  />    <v:f eqn="prod @6 1 2"  />    <v:f eqn="prod @7 21600 pixelWidth"  />    <v:f eqn="sum @8 21600 0"  />    <v:f eqn="prod @7 21600 pixelHeight"  />    <v:f eqn="sum @10 21600 0"  />   </v:formulas>   <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"  />   <o:lock v:ext="edit" aspectratio="t"  />  </v:shapetype><v:shape id="_x0000_i1029" type="#_x0000_t75" style='width:415.5pt;   height:311.25pt'>   <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image001.jpg"    o:title="simple-layout"  />  </v:shape><![endif]--><!--[if !vml]-->Ext布局类的介绍与使用_第1张图片<!--[endif]-->
 
图1
 
本例子是用document.body作为布局的容器的，所以不需要为布局写一个HTML Element作为容器。布局包含3个区域，所以我们需要写3个HTML Element作为布局每个区域的容器：

<div id="north-div"></div>

<div id="center-div">内容</div>

<div id="south-div">状态栏</div>

从代码我们可以看到，每个div都定义了一个id，其作用就是创建区域面板时的参数el的值。

下面开始撰写创建布局的javascript代码。首先是创建一个布局，并定义各区域的参数：

var tb=new Ext.Toolbar('north'); //创建一个工具条

tb.add(new Ext.Toolbar.SplitButton({

text: '文件',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '新建', handler: onItemClick},

{text: '保存', handler: onItemClick}

]}}),

new Ext.Toolbar.MenuButton({

text: '编辑',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '复制', handler: onItemClick},

{text: '粘贴', handler: onItemClick}

]}})

);

var layout = new Ext.BorderLayout(document.body,{

north:{toolbar:tb,initialSize:28},

center: {alwaysShowTabs:true,tabPosition:'top'},

south: {initialSize:28}

});

 
我们先别看工具条的创建代码，这个将会在另一篇文章中介绍。从黑体字部分的代码我们可以看到，我们定义了一个变量layout来保存布局对象，布局的容器是document.body，定义了noth、center和south三个区域。north区域包含一个工具条，高度是28。center区域设置了总是显示标签栏，标签位置在顶部。south区域只设置了高度为28。

虽然我们<!--[if gte vml 1]><v:shapeid="_x0000_i1028" type="#_x0000_t75" style='width:.75pt;height:.75pt' o:ole=""><v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image003.emz"o:title="" /></v:shape><![endif]--><!--[if !vml]--><!--[endif]--><!--[if gte mso 9]><xml><o:OLEObject Type="Embed" ProgID="Photoshop.Image.7" ShapeID="_x0000_i1028"DrawAspect="Content" ObjectID="_1250336162"><o:WordFieldCodes>/s</o:WordFieldCodes></o:OLEObject></xml><![endif]-->定义和创建了布局，但是目前在页面我们是看不到任何效果的，我们还需要为布局的每个区域加入面板并执行刷新：

layout.beginUpdate();

layout.add('north', new Ext.ContentPanel('north-div'));

layout.add('center', new Ext.ContentPanel('center-div','简单的布局例子'));

layout.add('south', new Ext.ContentPanel('south-div'));

layout.restoreState();

layout.endUpdate();

 
首先是通过beginUpdate方法中止LayoutManager的自动布局管理，然后给各区域加入一个面板。在增加center面板时，还增加了一个标题，该标题会作为标签的文本显示。然后通过restoreState方法重建布局。最后是通过endUpdate方法在恢复LayoutManager自动管理同时结束更新。这样，一个简单的布局就出来。全部代码如下：

<!DOCTYPE HTML PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>简单的布局例子</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">

</head>

<body scroll="no">

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>

<div id="north-div"></div>

<div id="center-div">内容</div>

<div id="south-div">状态栏</div>

<script>

Ext.onReady(function(){

var tb=new Ext.Toolbar('north-div');//创建一个工具条

tb.add(new Ext.Toolbar.SplitButton({

text: '文件',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '新建', handler: onItemClick},

{text: '保存', handler: onItemClick},

{text: '加载', handler: onItemClick}

]}}),

new Ext.Toolbar.MenuButton({

text: '编辑',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '复制', handler: onItemClick},

{text: '粘贴', handler: onItemClick}

]}})

);

var layout = new Ext.BorderLayout(document.body,{

north:{toolbar:tb,initialSize:28},

center: {alwaysShowTabs:true,tabPosition:'top'},

south: {initialSize:28}

});

layout.beginUpdate();

layout.add('north', new Ext.ContentPanel('north-div'));

layout.add('center', new Ext.ContentPanel('center-div','简单的布局例子'));

layout.add('south', new Ext.ContentPanel('south-div'));

layout.restoreState();

layout.endUpdate();

function onItemClick(item){

alert(item.text);

}

})

</script>

</body>

</html>

最终效果如图2。本例文件是附件中的examples/layout/simple.html。

<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75" style='width:414pt;height:249pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image005.jpg" o:title="simple-layout-result" /> </v:shape><![endif]--><!--[if !vml]-->Ext布局类的介绍与使用_第2张图片<!--[endif]-->

图2

 

<!--[if !supportLists]-->7. <!--[endif]-->为简单的例子增加内容

上面一节我们制作了一个简单的例子，但是没有内容，那么如何加入内容呢？最简单的办法就是在面板绑定容器中直接加入内容。例如在center-div中我们加入了“内容”，在south-div中加入了“状态栏”：

<div id="center-div">内容</div>

<div id="south-div">状态栏</div>

但是我们的应用通常是动态加载数据的，那怎么办呢？其实很简单，就是利用ContentPanel的setContent方法和setUrl方法加载。setContent方法就是直接从JavaScipt程序中插入HTML。setUrl方法则允许您从服务端得到数据加入ContentPanel中。

下面我们先测试一下setContent方法。我们要做的就是当菜单选择了一个item的时候将选择的item的文本显示在状态栏里。我们将例子中菜单单击的事件修改如下：

function onItemClick(item){

layout.getRegion('south').getPanel('south-div').setContent(item.text);

}

为了调用setContent方法，我们首先要找到对应的面板，如何找到对应的面板呢？上面的代码就是通过“layout.getRegion('south')”先找到状态栏对应的区域south，然后通过面板的id（south-div）找到对应的面板，最后是设置其内容为选择菜单的文本。找到对应的面板还有一个方法，就是分配一个变量给ContentPanel然后便可直接引用。我们修改一下center区域的面板增加方法，将center区域的面板分配给变量centerContent，然后再增加：

var centerContent=new Ext.ContentPanel('center-div','简单的布局例子');

layout.add('center', centerContent);

下面我们测试一下setUrl方法，在center-div面板中加载内容。操作是单击文件菜单下的加载后载入内容。我们先修改菜单单击事件：

function onItemClick(item){

layout.getRegion('south').getPanel('south-div').setContent(item.text);

if(item.text=='加载'){

centerContent.setUrl('content.html','',true);

centerContent.refresh();

}

}

代码中直接通过变量centerContent引用面板，调用setUrl方法加载content.html文件，没有设置提交参数，而且设置了只加载一次，然后强制刷新面板。加载后我们会发现内容超出了面板范围，有些东西看不见了，怎么办？很简单，在创建面板时加入定义参数“fitToFrame”，设置其值为true，再加入“autoScroll”设置其值为true，就可以了：

var centerContent=new Ext.ContentPanel('center-div',{title:'简单的布局例子', fitToFrame :true,autoScroll:true});

在IE中存在一个问题，就是加载的内容的样式没有生效，原因是一些浏览器支持动态样式而一些不支持，要较好地解决上述问题，推荐使用Iframe。这个我们就不测试了，只提供代码给大家参考，大家可以自己测试一下：

//center-div修改如下：
<div id="center-div"><iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe></div>
代码修改如下：
var centerContent=new Ext.ContentPanel('center-div',{title:'简单的布局例子', fitToFrame :true,autoScroll:true, resizeEl:'center-iframe'});
  function onItemClick(item){
   layout.getRegion('south').getPanel('south-div').setContent(item.text);
  if(item.text=='加载'){
Ext.get('center-iframe').dom.src=’content.html’
  }
  }

本例文件是附件中的examples/layout/simple-content.html。

<!--[if !supportLists]-->8. <!--[endif]-->一个NestedLayoutPanel和GridPanel的例子

我们已经可以用BorderLayout和ContentPanel建立简单的布局了，这节我们将用NestedLayPanel和GridPanel创建复杂一点的布局。

布局整体情况如图3。

<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" style='width:415.5pt;height:311.25pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image007.jpg" o:title="layout-nested" /> </v:shape><![endif]--><!--[if !vml]-->Ext布局类的介绍与使用_第3张图片<!--[endif]-->

图3

我们先来看看布局容易的定义：

 <div id="north-div"></div>
 <div id="west-div"><div id='treelist'></div></div>
 <div id="center-div">
  <div id='center-center'></div>
  <div id='center-south'></div>
 </div>
 <div id="south-div">状态栏</div>

从源代码中我们可以看到大布局分了north、west、center和south四个区域，west区包含一个treelist的div，准备作为树列表的容器。而在center区域，我们又细分成center和south两个内部区域，这里就要使用到NestedLayPanel，而id为“center-center”的div将是grid的容器。Norht区域和South的区域与简单的例子一样，是作为菜单栏、状态栏。下面我们看javascript代码：

  var layout = new Ext.BorderLayout(document.body,{ 
 north:{toolbar:tb,initialSize:28}, 
 west:{
  split:true,
  initialSize:200,
 titlebar: true,
 collapsible: true,
 minSize: 100,
 maxSize: 400,
 title:'树列表',
 },
 center: {}, 
south: {initialSize:28}
  });
  layout.beginUpdate();
 var innerLayout=new Ext.BorderLayout('center-div',{
  center:{
  titlebar: true,
  title:'条目列表',
 },
  south:{
  split:true,
  collapsible:true,
  titlebar:true,
  initialSize:200,
  minSize: 100,
  maxSize:400,
  title:'内容',
  collapsedTitle:'内容'
  }
 });

从代码中，我们看到north和south的定义与简单的例子一样。而west区域，我们定义了它的原始大小（initialSize）为200，带标题栏（titlebar: true），标题栏显示“树列表”，可折叠（collapsible: true），带分割控制条（split:true），通过分割控制条调整区域大小的最小宽度是100，最大宽度是400。而ccenter区域则什么也没定义。

为了在center区域再划分出两个区域，我们需要新创建一个Ext.BorderLayout布局，设置其容器为“center-div”，在布局中定义center和south两个区域。center区域显示标题栏，标题为“条目列表”。south区域定义了它的原始大小（initialSize）为200，带标题栏（titlebar: true），标题栏显示“内容”，可折叠（collapsible: true），带分割控制条（split:true），通过分割控制条调整区域大小的最小宽度是100，最大宽度是400，折叠后的折叠栏标题显示“内容”。

我们注意到，west区域并没有设置折叠后的显示标题，为什么呢？其原因是west区域折叠后是垂直折叠条，而目前的HTML没有提供对一个元素的90度的旋转，所以我们只能通过修改其背景图的方式来实现。实现的方法有两种，一种是通过重新定义west或east的css定义来实现，一种是通过事件利用脚本实现。虽然通过重新定义css来实现虽然简单，不需要写javascript代码，但是存在局限性，就是当存在两个west区域（一个在主布局，一个在子布局）的时候，都是使用同一个背景图片，这样就发生了冲突了。所以一般建议是尽量使用折叠事件来实现。

通过css定义实现的方法：

.x-layout-collapsed-west{

background-image:url(images/yourbackgroundfile.gif);

background-repeat:no-repeat;

background-position:center;

}

.x-layout-collapsed-east{

background-image:url(images/ yourbackgroundfile.gif);

background-repeat:no-repeat;

background-position:center;

}

要通过javascript实现，就是在west区域添加一个“collapsed”事件，就是当west区域折叠事触发该事件，在事件中修改west区域的背景，代码如下：

layout.getRegion('west').on('collapsed',function(region){

region.collapsedEl.dom.style.background="url(../images/treelist.gif) center no-repeat";

},this);

代码中通过区域的collapsedEl方法返回west区域的HTMLelement，然后设置其背景图像。

在center区域的子区域center中，我们需要使用GridPanel面板在上面绑定一个表格，所以我们要首先定义一个表格，表格定义的具体代码可参考Grid的说明文章，我这里就不具体说了：

var grid = new Ext.grid.Grid('center-center', {

ds: ds,

cm: colModel,

autoExpandColumn:'title'

});

grid.render();

grid.getSelectionModel().selectFirstRow();

innerLayout.add('center', new Ext.GridPanel(grid));

innerLayout.add('south', new Ext.ContentPanel('center-south'));

layout.add('north', new Ext.ContentPanel('north-div'));

layout.add('west', new Ext.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'}));

layout.add('center', new Ext.NestedLayoutPanel(innerLayout));

layout.add('south', new Ext.ContentPanel('south-div'));

代码中我们可以看到，grid是绑定在id为“center-center”的div容器里，然后通过新建一个GridPanel绑定到center子区域的（innerLayout.add('center', new Ext.GridPanel(grid))）。south、west和north区域的添加代码和简单的例子没什么不同，而不同的地方就是center主区域代码的添加，不再是contentPanel，而是NestedLayoutPanel了，而其参数是一个BorderLayout类innerLayout。

我们再为例子加上一个树列表就完成了这个例子了。树列表的定义与创建也会有专门的文章说明，所以我也不在这里具体说了。

一个完整的NestedLayoutPanel和GridPanel例子代码如下：

<!DOCTYPE HTML PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>NestedLayoutPanel的布局例子</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">

</head>

<body scroll="no">

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>

<div id="north-div"></div>

<div id="west-div"><div id='treelist'></div></div>

<div id="center-div">

<div id='center-center'></div>

<div id='center-south'></div>

</div>

<div id="south-div">状态栏</div>

<script>

Ext.onReady(function(){

var tb=new Ext.Toolbar('north-div');//创建一个工具条

tb.add(new Ext.Toolbar.SplitButton({

text: '文件',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '新建', handler: onItemClick},

{text: '保存', handler: onItemClick},

{text: '加载', handler: onItemClick}

]}}),

new Ext.Toolbar.MenuButton({

text: '编辑',

cls: 'x-btn-text-icon blist',

menu : {items: [

{text: '复制', handler: onItemClick},

{text: '粘贴', handler: onItemClick}

]}})

);

var layout = new Ext.BorderLayout(document.body,{

north:{toolbar:tb,initialSize:28},

west:{

split:true,

initialSize:200,

titlebar: true,

collapsible: true,

minSize: 100,

maxSize: 400,

title:'树列表',

},

center: {},

south: {initialSize:28}

});

layout.beginUpdate();

var innerLayout=new Ext.BorderLayout('center-div',{

center:{

titlebar: true,

title:'条目列表',

},

south:{

split:true,

collapsible:true,

titlebar:true,

initialSize:200,

minSize: 100,

maxSize:400,

title:'内容',

collapsedTitle:'内容'

}

});

var myData = [

['张三','测试','<chsdate w:st="on" year="2006" month="1" day="1" islunardate="False" isrocdate="False">2006-1-1</chsdate>'],

['李四','测试一','<chsdate w:st="on" year="2006" month="5" day="6" islunardate="False" isrocdate="False">2006-5-6</chsdate>'],

['王五','测试二','<chsdate w:st="on" year="2007" month="12" day="1" islunardate="False" isrocdate="False">2007-12-1</chsdate>'],

['刘六','测试三','<chsdate w:st="on" year="2006" month="12" day="1" islunardate="False" isrocdate="False">2006-12-1</chsdate>'],

['张三','测试四','<chsdate w:st="on" year="2007" month="6" day="1" islunardate="False" isrocdate="False">2007-6-1</chsdate>'],

['李四','测试五','<chsdate w:st="on" year="2007" month="7" day="1" islunardate="False" isrocdate="False">2007-7-1</chsdate>'],

['刘六','测试六','<chsdate w:st="on" year="2007" month="8" day="1" islunardate="False" isrocdate="False">2007-8-1</chsdate>'],

['张三','测试七','<chsdate w:st="on" year="2007" month="9" day="1" islunardate="False" isrocdate="False">2007-9-1</chsdate>'],

['李四','测试八','<chsdate w:st="on" year="2007" month="10" day="1" islunardate="False" isrocdate="False">2007-10-1</chsdate>'],

['王五','测试九','<chsdate w:st="on" year="2007" month="11" day="1" islunardate="False" isrocdate="False">2007-11-1</chsdate>'],

['刘六','测试六','<chsdate w:st="on" year="2007" month="8" day="1" islunardate="False" isrocdate="False">2007-8-1</chsdate>'],

['张三','测试七','<chsdate w:st="on" year="2007" month="9" day="1" islunardate="False" isrocdate="False">2007-9-1</chsdate>'],

['李四','测试八','<chsdate w:st="on" year="2007" month="10" day="1" islunardate="False" isrocdate="False">2007-10-1</chsdate>'],

['王五','测试九','<chsdate w:st="on" year="2007" month="11" day="1" islunardate="False" isrocdate="False">2007-11-1</chsdate>'],

['刘六','测试十','<chsdate w:st="on" year="2007" month="8" day="1" islunardate="False" isrocdate="False">2007-8-1</chsdate>'],

['张三','测试十一','<chsdate w:st="on" year="2007" month="9" day="1" islunardate="False" isrocdate="False">2007-9-1</chsdate>'],

['李四','测试十二','<chsdate w:st="on" year="2007" month="10" day="1" islunardate="False" isrocdate="False">2007-10-1</chsdate>'],

['王五','测试十三','<chsdate w:st="on" year="2007" month="11" day="1" islunardate="False" isrocdate="False">2007-11-1</chsdate>'],

['刘六','测试十四','<chsdate w:st="on" year="2007" month="8" day="1" islunardate="False" isrocdate="False">2007-8-1</chsdate>'],

['张三','测试十五','<chsdate w:st="on" year="2007" month="9" day="1" islunardate="False" isrocdate="False">2007-9-1</chsdate>'],

['李四','测试十六','<chsdate w:st="on" year="2007" month="10" day="1" islunardate="False" isrocdate="False">2007-10-1</chsdate>'],

['王五','测试十七','<chsdate w:st="on" year="2007" month="11" day="1" islunardate="False" isrocdate="False">2007-11-1</chsdate>'],

['刘六','测试十八','<chsdate w:st="on" year="2007" month="8" day="1" islunardate="False" isrocdate="False">2007-8-1</chsdate>']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(myData),

reader: new Ext.data.ArrayReader({}, [

{name:'sender'},

{name:'title'},

{name:'sendtime'}

])

});

ds.load();

var colModel = new Ext.grid.ColumnModel([

{header:'发送人',width:100,sortable:true,dataIndex:'sender'},

{id:'title',header:'标题', width:100,sortable:true,dataIndex:'title'},

{header:'发送时间',width:75,sortable:true,dataIndex:'sendtime'}

]);

var grid = new Ext.grid.Grid('center-center', {

ds: ds,

cm: colModel,

autoExpandColumn:'title'

});

grid.render();

grid.getSelectionModel().selectFirstRow();

innerLayout.add('center', new Ext.GridPanel(grid));

innerLayout.add('south', new Ext.ContentPanel('center-south'));

layout.add('north', new Ext.ContentPanel('north-div'));

layout.add('west', new Ext.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'}));

layout.add('center', new Ext.NestedLayoutPanel(innerLayout));

layout.add('south', new Ext.ContentPanel('south-div'));

layout.restoreState();

layout.endUpdate();

layout.getRegion('west').on('collapsed',function(region){

region.collapsedEl.dom.style.background="url(../images/treelist.gif) center no-repeat";

},this);

var tree=new Ext.tree.TreePanel('treelist',{

animate:true

});

var root = new Ext.tree.TreeNode({

text: '文件夹',

allowDrag:false,

allowDrop:false

});

tree.setRootNode(root);

root.appendChild(

new Ext.tree.TreeNode({text:'收件箱',allowDrag:false}),

new Ext.tree.TreeNode({text:'发件箱',allowDrag:false}),

new Ext.tree.TreeNode({text:'联系人',allowDrag:false}),

new Ext.tree.TreeNode({text:'已删除的邮件',allowDrag:false})

);

tree.render();

root.expand();

function onItemClick(item){

alert(item.text);

}

})

</script>

</body>

</html>

其最终效果如图4。

<!--[if gte vml 1]><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:414.75pt;height:256.5pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image009.jpg" o:title="layout-nested-result" /> </v:shape><![endif]--><!--[if !vml]-->Ext布局类的介绍与使用_第4张图片<!--[endif]-->

图4

本例文件是附件中的examples/layout/ NestedLayoutPanel.html。

<!--[if !supportLists]-->9. <!--[endif]-->小结

本文章主要介绍了BorderLayout、LayoutRegion、contentPanel、NestedLayoutPanel和GridPanel等5个常用的布局类，还写了一些简单的例子。希望通过这些简单的介绍和例子，我们能通过灵活的组合这些类，创建出自己需要，当然也是用户喜欢的用户界面。在布局类中还有两个类：LayoutManager和ReaderLayout。LayoutManager是BorderLayout的基类，主要是定义布局的一些常用属性、方法和事件。而ReaderLayout是BorderLayout的一个子类，它定义好了一个有5个面板的布局，组成为north区域、两个NestedLayoutPanel（一个顶部的listview和底部的preview）组成的center区域和一个用来导航、进行应用控制、信息显示的区域，它的定义和创建与BorderLayout是一样的。有兴趣的读者可以自己查看Ext的API文档进行研究。

本文例程下载：http://download.csdn.net/source/241226

你可能感兴趣的:(ext)

  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • LLM 词汇表 落难Coder LLMsNLP大语言模型大模型llama人工智能
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
  • 第六集如何安装CentOS7.0，3分钟学会centos7安装教程 date分享
    从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
  • Xinference如何注册自定义模型 玩人工智能的辣条哥 人工智能AI大模型Xinference
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
  • 关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解 秋刀prince mysqlmysql数据库
    提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据
  • Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
  • 光盘文件系统 (iso9660) 格式解析 穷人小水滴 光盘文件系统iso9660denoGNU/Linuxjavascript
    越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht
  • 科幻游戏 《外卖员模拟器》 主要地理环境设定 (1) 穷人小水滴 游戏科幻设计
    游戏名称:《外卖员模拟器》(英文名称:waimai_se)作者:穷人小水滴本故事纯属虚构,如有雷同实属巧合.故事发生在一个(架空)平行宇宙的地球,21世纪(超低空科幻流派).相关文章:https://blog.csdn.net/secext2022/article/details/141790630目录1星球整体地理设定2巨蛇国主要设定3海蛇市主要设定3.1主要地标建筑3.2交通3.3能源(电力)
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
  • TextFiled 中输入金额 宁梓茞
    要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • 自定义队列 junjun2018
    队列：像排队吃饭一样，先到的先点菜，后来的后点菜。以下代码展示使用单向列表实现的队列。//链表是以节点为单位的，对于单向链表，每个节点中包含一个值和指向下一个对象的引用publicclassNode{Objectvalue;Nodenext;publicNode(Objectvalue){this.value=value;}publicObjectgetValue(){returnvalue;}p
  • 2019-07-09 AutoCompleteTextView 问题 皮皮铭
    实现自定义Adapter要实现Filterable接口，不然会报错重写getFilter()方法performFiltering()方法实现过滤数据的操作publishResults()用来接收performFiltering()的返回值，发布。
  • HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换 让开，我要吃人了 OpenHarmonyHarmonyOS鸿蒙开发harmonyos华为鸿蒙移动开发鸿蒙系统前端开发语言
    鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
  • leetcode中等.数组(21-40)python 九日火 pythonleetcode
    80.RemoveDuplicatesfromSortedArrayII(m-21)Givenasortedarraynums,removetheduplicatesin-placesuchthatduplicatesappearedatmosttwiceandreturnthenewlength.Donotallocateextraspaceforanotherarray,youmustdoth
  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • HarmonyOS Next鸿蒙扫一扫功能实现 JohnLiu_ HarmonyOSNextharmonyos华为扫一扫鸿蒙
    直接使用的是华为官方提供的api，封装成一个工具类方便调用。import{common}from'@kit.AbilityKit';import{scanBarcode,scanCore}from'@kit.ScanKit';exportnamespaceScanUtil{exportasyncfunctionstartScan(context:common.Context):Promise{if
  • golang 实现文件上传下载 wangwei830 go
    Gin框架上传下载上传（支持批量上传）httpRouter.POST("/upload",func(ctx*gin.Context){forms,err:=ctx.MultipartForm()iferr!=nil{fmt.Println("error",err)}files:=forms.File["fileName"]for_,v:=rangefiles{iferr:=ctx.SaveUplo
  • linux 安装Sublime Text 3 hhyiyuanyu Python学习linuxsublimetext
    方法/步骤打开官网http://www.sublimetext.com/3，选择64位进行下载执行命令wgethttps://download.sublimetext.com/sublime_text_3_build_3126_x64.tar.bz2进行下载3、下载完成进行解压,执行tar-xvvfsublime_text_3_build_3126_x64.tar.bz解压4、解压完成以后，移动到
  • sublime个人设置 bawangtianzun sublimetext编辑器
    如何拥有jiangly蒋老师同款编译器(sublimec++配置竞赛向）_哔哩哔哩_bilibiliSublimeText4的安装教程（新手竞赛向）-知乎(zhihu.com)创建文件自动保存为c++打开SublimeText软件。转到"Tools"（工具）>"Developer"（开发者）>"NewPlugin"（新建插件）。在打开的新文件中，粘贴以下代码：importsublimeimport
  • 自定义分区 我的K8409 Hadoophdfshadoop大数据
    通过简单例子了解partition分区类的重写方法分区是在MR的过程中进行的，属于Shuffle阶段但是在Job端不要忘记进行调用：job.setPartitionerClass(xxx.class)按照年龄分区：classAgePartitionerextendsPartitioner{@OverridepublicintgetPartition(MyComparablekey,NullWrit
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • el-table实现全选整表，单元一页复选框功能 周bro vue.jselementuijavascript前端
    全选整表单选一页0":popper-append-to-body="false":total="tableData.length":page-size="pageObj.pagesize":page-sizes="[10,50,100]"layout="total,sizes,prev,pager,next"@size-change="handleSizeChange"@current-chang
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 解决SDK Manager 中 没有 Support Library 木鱼wzh
    1、直接修改SDK-MANAGER打开sdk-manager—->Tools—->options然后点击packages—->showobsoletepackages即可在最下面的Extras目录下找到推荐两个自己使用的镜像服务器：mirrors.neusoft.edu.cn端口80mirrors.dormforce.net端口802、去官网下载SupportLibrar点击这里进入官网进入百度云
  • tomcat基础与部署发布 暗黑小菠萝 Tomcat java web
    从51cto搬家了，以后会更新在这里方便自己查看。 做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 一、Tomcat安装     安装方式：①运行.exe安装包      &n
  • 网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
  • [信息与安全]数据库的备份问题 comsci 数据库
          如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题   如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?    是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?  &n
  • 使用maven tomcat plugin插件debug关联源代码 商人shang mavendebug查看源码tomcat-plugin
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
  • 大访问量高并发 oloz 大访问量高并发
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
  • cache 服务器 小猪猪08 cache
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 　　1.Cache   是怎么样工作的? 　　Cache   是分配在服务器上
  • mysql存储过程 香水浓 mysql
    Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
  • CSS的class、id、css文件名的常用命名规则 agevs JavaScriptUI框架Ajaxcss
      CSS的class、id、css文件名的常用命名规则     (一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
  • 全局数据源 AILIKES javatomcatmysqljdbcJNDI
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
  • MYSQL的随机查询的实现方法 baalwolf mysql
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
  • JAVA的getBytes()方法 bijian1013 javaeclipseunixOS
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！      String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
  • AngularJS中操作Cookies bijian1013 JavaScriptAngularJSCookies
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
  • [Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
    Maven聚合   在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
  • 【JVM七】JVM知识点总结 bit1129 jvm
      1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
  • linux下查看nginx、apache、mysql、php的编译参数 ronin47
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
  • unity中运用Resources.Load的方法？ brotherlamp unity视频unity资料unity自学unityunity教程
    问：unity中运用Resources.Load的方法？ 答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
  • 线段树-入门 bylijinnan java算法线段树
    /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
  • 全选与反选 chicony 全选
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
  • vim一些简单记录 chenchao051 vim
    mac在/usr/share/vim/vimrc linux在/etc/vimrc   1、问：后退键不能删除数据，不能往后退怎么办？       答：在vimrc中加入set backspace=2   2、问：如何控制tab键的缩进？       答：在vimrc中加入set tabstop=4 (任何
  • Sublime Text 快捷键 daizj 快捷键sublime
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
  • php 引用(&)详解 dcj3sjt126com PHP
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容  复制代码代码如下: <?  $a="ABC";  $b =&$a;  echo
  • SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
  • 对软件设计的思考 e200702084 设计模式数据结构算法ssh活动
    软件设计的宏观与微观    软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
  • 同步、异步、阻塞、非阻塞 geeksun 非阻塞
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。   同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。   异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 实现：
  • Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
    實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 [email protected] # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
  • Hibernate中的缓存 Josh_Persistence 一级缓存Hiberante缓存查询缓存二级缓存
    Hibernate中的缓存   一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
  • 对象关系行为模式之延迟加载 home198979 PHP架构延迟加载
    形象化设计模式实战     HELLO!架构   一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。     二、实现延迟加载 实现Lazy Load主要有四种方法：延迟初始化、虚
  • xml 验证 pengfeicao521 xmlxml解析
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
  • div设置半透明效果 spjich css半透明
    为div设置如下样式：   div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}        说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
  • 你真的了解单例模式么？ w574240966 java单例设计模式jvm
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。   一，单例模式的5中写法。（回字的四种写法，哈哈。）     1，懒汉式           （1）线程不安全的懒汉式 public cla
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他