Ext框架非常的庞大,如果把全部的javascrpit代码都放在同一个js文件里面,那么是不现实的,因此Ext引入了包的概念(与java的包类似),把不同的包放在不同的js文件里面,在引用Ext的时候可以按需引用,而不用把全部都引入,如果想在客户端编写Ext的代码,那么就要用到Requires构件,Requires构件就类似java中的import功能,用来引用Ext中某个包。
表 30.126. 属性
| package | 定义类 | |||
| 类型 | java.lang.String | |||
| 是否必须 | 是 | 延时求值 | 否 | |
| 引用的包名,对应下面的包与文件的对应关系中的name,例如:All,Ext.Base | ||||
包与文件对应关系如下:
<packages>
<!--
Everything
-->
<package name="_all" file="/yuiext/ext-all.js"/>
<package name="_FacesProxy" file="/yuiext/package/FacesProxy.js"/>
<package name="_FacesTreeLoader" file="/yuiext/package/FacesTreeLoader.js"/>
<package name="All">
<requires name="_all"/>
<requires name="_FacesProxy"/>
<requires name="_FacesTreeLoader"/>
</package>
<package name="Everything">
<requires name="All"/>
</package>
<!--
Core - Utilities
Files:
ClickRepeater.js CSS.js Format.js JSON.js KeyMap.js KeyNav.js
MixedCollection.js TaskMgr.js TextMetrics.js
-->
<package name="Utilities" file="/yuiext/package/util.js"/>
<!--
Core - Date Parsing and Formatting
Files:
Date.js
-->
<package name="Date" file="/yuiext/package/date.js"/>
<package name="OM.Date" file="/yuiext/package/om/DateFormat.js"/>
<!--
Core - Layers
Files:
Component.js Layer.js Shadow.js
-->
<package name="Ext.Component" file="/yuiext/package/widget-core.js">
<requires name="Utilities"/>
</package>
<package name="Ext.Layer">
<requires name="Ext.Component"/>
</package>
<package name="Ext.Shadow">
<requires name="Ext.Component"/>
</package>
<!--
Core - Drag and Drop
Files:
DDCore.js StatusProxy.js Registry.js DragSource.js DropTarget.js DragZone.js DropZone.js
Dependencies:
Layer.js Shadow.js
Optional Features/Dependencies:
Overflow Scrolling Support - ScrollManager.js
-->
<package name="Ext.dd.DragDrop" file="/yuiext/package/dragdrop.js">
<requires name="Ext.Layer"/>
</package>
<!--
Core - State Management
Files:
State.js
-->
<package name="Ext.state.Manager" file="/yuiext/package/state.js"/>
<!--
Resizable
Files:
Resizable.js
-->
<package name="Ext.Resizable" file="/yuiext/package/resizable.js"/>
<!--
QuickTips - Tooltip Widget
Files:
QuickTips.js
Dependencies:
Shadow.js Layer.js
-->
<package name="Ext.QuickTips" file="/yuiext/package/qtips.js">
<requires name="Ext.Layer"/>
</package>
<!--
AreaTips - Tooltip Widget
Files:
AreaTips.js
Dependencies:
Shadow.js Layer.js
-->
<package name="Ext.om.AreaTips" file="/yuiext/package/om/AreaTips.js">
<requires name="Ext.Layer"/>
</package>
<!--
Button Widget
Files:
Button.js MenuButton.js
Dependencies:
TextMetrics.js
Optional Features/Dependencies:
Button QuickTips: QuickTips.js
-->
<package name="Ext.Button" file="/yuiext/package/button.js">
<requires name="Utilities"/>
</package>
<package name="Ext.MenuButton" file="/yuiext/package/menu-button.js">
<requires name="Ext.Button"/>
</package>
<!--
Tabs Widget
Files:
TabPanel.js
-->
<package name="Ext.TabPanel" file="/yuiext/package/tabs.js">
</package>
<!--
SplitBar Widget
Files:
SplitBar.js
Dependencies:
DDCore.js
-->
<package name="Ext.SplitBar" file="/yuiext/package/splitbar.js">
<requires name="Ext.dd.DragDrop"/>
</package>
<!--
Date Picker Widget
Files:
DatePicker.js
Dependencies:
Date.js Layer.js Shadow.js Component.js KeyNav.js ClickRepeater.js
-->
<package name="Ext.DatePicker" file="/yuiext/package/datepicker.js">
<requires name="Utilities"/>
<requires name="Date"/>
<requires name="OM.Date"/>
<requires name="Ext.Layer"/>
<requires name="Ext.menu.Menu"/>
<requires name="Ext.Button"/>
</package>
<!--
Calculator Widget
Files:
Calculator.js
Dependencies:
Layer.js Shadow.js Component.js KeyMap.js KeyNav.js ClickRepeater.js
-->
<package name="Ext.om.Calculator" file="/yuiext/package/om/Calculator.js">
<requires name="Utilities"/>
<requires name="Ext.Layer"/>
<requires name="Ext.menu.Menu"/>
<requires name="Ext.Button"/>
</package>
<!--
Color Palette Widget
Files:
ColorPalette.js
Dependencies:
Layer.js Shadow.js Component.js
-->
<package name="Ext.ColorPalette" file="/yuiext/package/color-palette.js">
<requires name="Ext.Component"/>
</package>
<!--
Menu Widget
Files:
Adapter.js BaseItem.js CheckItem.js Item.js Menu.js MenuMgr.js Separator.js TextItem.js
Dependencies:
MixedCollection.js Shadow.js Layer.js Component.js KeyNav.js
Optional Features/Dependencies:
Color Palette Item: ColorPalette.js
Date Picker Item: DatePicker.js
-->
<package name="Ext.menu.Menu" file="/yuiext/package/menus.js">
<requires name="Utilities"/>
<requires name="Ext.Component"/>
</package>
<package name="Ext.menu.MenuBar" file="/yuiext/package/menubar.js">
<requires name="Ext.menu.Menu"/>
</package>
<!--
Date Picker Popup (DateMenu)
Files:
DateMenu.js DatePicker.js DateItem.js
Dependencies:
Date.js Layer.js Shadow.js MenuMgr.js Menu.js BaseItem.js Adapter.js Component.js KeyNav.js ClickRepeater.js
-->
<package name="Ext.menu.DateMenu">
<requires name="Ext.menu.Menu"/>
<requires name="Ext.DatePicker"/>
</package>
<!--
Calculator Popup (CalcMenu)
Files:
CalcMenu.js Calculator.js CalcItem.js
Dependencies:
Layer.js Shadow.js MenuMgr.js Menu.js BaseItem.js Adapter.js Component.js KeyMap.js KeyNav.js ClickRepeater.js
-->
<package name="Ext.om.menu.CalcMenu" file="/yuiext/package/om/CalcMenu.js">
<requires name="Ext.menu.Menu"/>
<requires name="Ext.om.Calculator"/>
</package>
<!--
Color Picker Popup (ColorMenu)
Files:
ColorMenu.js ColorItem.js ColorPalette.js
Dependencies:
Layer.js Shadow.js MenuMgr.js Menu.js BaseItem.js Adapter.js Component.js
-->
<package name="Ext.menu.ColorMenu">
<requires name="Ext.menu.Menu"/>
<requires name="Ext.ColorPalette"/>
</package>
<!--
Loading Mask Widget
Files:
LoadMask.js
-->
<package name="Ext.LoadMask" file="/yuiext/package/loadmask.js"/>
<!--
Border Layout Widget
Files:
BsicLayoutRegion.js BorderLayout.js BorderLayoutRegions.js ContentPanels.js
LayoutManager.js LayoutRegion.js LayoutStateMananger.js SplitLayoutRegion.js
Dependencies:
MixedCollection.js SplitBar.js DDCore.js TabPanel.js
-->
<package name="Ext.BorderLayout" file="/yuiext/package/layout.js">
<requires name="Utilities"/>
<requires name="Ext.dd.DragDrop"/>
<requires name="Ext.state.Manager"/>
<requires name="Ext.SplitBar"/>
<requires name="Ext.TabPanel"/>
</package>
<!--
Toolbar Widget
Files:
Toolbar.js
Dependencies:
MixedCollection.js Button.js TextMetrics.js
Optional Features/Dependencies:
Menu Buttons: MenuButton.js
Paging Toolbar: PagingToolbar.js
-->
<package name="Ext.Toolbar" file="/yuiext/package/toolbar.js">
<requires name="Utilities"/>
<requires name="Ext.MenuButton"/>
</package>
<package name="Ext.PagingToolbar">
<requires name="Ext.Toolbar"/>
</package>
<!--
Dialog - Basic Widget
Files:
BasicDialog.js
Dependencies:
Shadow.js
Optional Features/Dependencies:
Dialog Resize Support: Resizable.js
Dialog Drag and Drop Support: DDCore.js
Tabs Support: TabPanel.js
-->
<package name="Ext.BasicDialog" file="/yuiext/package/dialogs.js">
<requires name="Ext.Shadow"/>
<requires name="Ext.dd.DragDrop"/>
<requires name="Ext.state.Manager"/>
<requires name="Ext.Resizable"/>
<requires name="Ext.TabPanel"/>
</package>
<!--
Dialog - MessageBox
Files:
MessageBox.js
Dependencies:
BasicDialog.js Shadow.js
-->
<package name="Ext.MessageBox">
<requires name="Ext.BasicDialog"/>
</package>
<!--
Data
Files:
Connection.js DataField.js DataProxy.js DataReader.js Record.js SortTypes.js
Store.js HttpProxy.js ScriptTagProxy.js MemoryProxy.js JsconReader.js ArrayReader.js
XmlReader.js SimpleStore.js
Dependencies:
JSON.js MixedCollection.js
-->
<package name="Ext.data.Store" file="/yuiext/package/data.js">
<requires name="Utilities"/>
</package>
<package name="Ext.data.FacesProxy" file="/yuiext/package/FacesProxy.js">
<requires name="Ext.data.Store"/>
</package>
<package name="Ext.om.PagingLink" file="/yuiext/package/om/PagingLink.js"/>
<!--
Views - Data Bound Views
Files:
View.js JsonView.js
Optional Features/Dependencies:
JSON Support: JSON.js
-->
<package name="Ext.View" file="/yuiext/package/view.js">
<requires name="Utilities"/>
<requires name="Ext.data.Store"/>
</package>
<!--
Form - Basic Fields
Files:
Field.js Checkbox.js NumberField.js Radio.js TextArea.js TextField.js Editor.js
Dependencies:
Component.js Layer.js Shadow.js
Optional Features/Dependencies:
Custom Validations: VTypes.js
-->
<package name="Ext.form" file="/yuiext/package/form.js">
<requires name="Utilities"/>
<requires name="Ext.Component"/>
</package>
<package name="Ext.form.Field">
<requires name="Ext.form"/>
</package>
<package name="Ext.form.Checkbox">
<requires name="Ext.form"/>
</package>
<package name="Ext.form.NumberField">
<requires name="Ext.form"/>
</package>
<package name="Ext.om.form.CalcNumberField" file="/yuiext/package/om/CalcNumberField.js">
<requires name="Ext.form.Field"/>
<requires name="Ext.om.menu.CalcMenu"/>
</package>
<package name="Ext.form.Radio">
<requires name="Ext.form"/>
</package>
<package name="Ext.form.TextArea">
<requires name="Ext.form"/>
</package>
<package name="Ext.form.TextField">
<requires name="Ext.form"/>
</package>
<!--
Form - ComboBox Widget
Files:
Combo.js
Dependencies:
Component.js Field.js TextField.js TriggerField.js View.js KeyNav.js
-->
<package name="Ext.form.ComboBox">
<requires name="Ext.form.Field"/>
<requires name="Ext.View"/>
</package>
<!--
Form - Date Field
Files:
DateField.js
Dependencies:
TriggerField.js Field.js TextField.js Component.js DateMenu.js DatePicker.js
DateItem.js Date.js Layer.js Shadow.js MenuMgr.js Menu.js BasicItem.js Adapter.js
KeyNav.js ClickRepeater.js
-->
<package name="Ext.form.DateField">
<requires name="Ext.form.Field"/>
<requires name="Ext.menu.DateMenu"/>
</package>
<!--
Form - Floating Editor
Files:
Editor.js
Dependencies:
Layer.js Shadow.js Component.js
-->
<package name="Ext.Editor">
<requires name="Ext.form.Field"/>
<requires name="Ext.Component"/>
</package>
<!--
Grid - Core
Files:
AbstractGridView.js AbstractSelectionModel.js RowSelectionModel.js Grid.js
ColumnModel.js GridView.js
Dependencies:
CSS.js
Optional Features/Dependencies:
Cell Selection Model: CellSelectionModel.js
Drag and Drop Column Reorder: ColumnDD.js
Column Resizing: ColumnSplitDD.js
Drag Grid Rows: GridDD.js
Loading Mask: LoadMask.js
-->
<package name="Ext.grid.Grid" file="/yuiext/package/grid.js">
<requires name="Utilities"/>
<requires name="Ext.dd.DragDrop"/>
<requires name="Ext.data.Store"/>
</package>
<!-- SelectionModel extension -->
<package name="Ext.grid.SelectionModel2" file="/yuiext/package/om/SelectionModel2.js">
<requires name="Ext.grid.Grid"/>
</package>
<!--
Grid - Editing Support
Files:
GridEditor.js EditorGrid.js
Dependencies:
Editor.js Layer.js Shadow.js Component.js
-->
<package name="Ext.grid.EditorGrid" file="/yuiext/package/edit-grid.js">
<requires name="Ext.grid.Grid"/>
<requires name="Ext.Editor"/>
</package>
<!--
Tree - Core
Files:
Tree.js TreePanel.js TreeEditor.js TreeSelectionModel.js TreeNode.js TreeNodeUI.js
Optional Features/Dependencies:
Sorting Support: TreeSorter.js
Filtering Support: TreeFilter.js
Drag and Drop Support: TreeDragZone.js TreeDropZone.js
Ajax Loading Support: AsyncTreeNode.js TreeLoader.js JSON.js
Editing Support: Editor.js Shadow.js Layer.js Component.js Field.js TextField.js
-->
<package name="Ext.tree.TreePanel" file="/yuiext/package/tree.js">
<requires name="Utilities"/>
<requires name="Ext.dd.DragDrop"/>
<requires name="Ext.Editor"/>
</package>
<package name="Ext.tree.FacesTreeLoader" file="/yuiext/package/FacesTreeLoader.js">
<requires name="Ext.tree.TreePanel"/>
</package>
<!--
Slider Widget
Files:
Slider.js
-->
<package name="Ext.om.Slider" file="/yuiext/package/om/Slider.js"/>
<!--
Progress Bar Widget
Files:
Progress.js
-->
<package name="Ext.om.ProgressBar" file="/yuiext/package/om/ProgressBar.js"/>
<package name="Ext.ux.Accordion" file="/yuiext/package/ux/Accordion.js">
<requires name="Ext.BorderLayout"/>
<requires name="Ext.Resizable"/>
</package>
<package name="Ext.ux.InfoPanel" file="/yuiext/package/ux/InfoPanel.js">
<requires name="Ext.BorderLayout"/>
<requires name="Ext.Resizable"/>
</package>
<package name="Ext.Dialogs" file="/yuiext/package/dialogs.js">
<requires name="Ext.state.Manager"/>
<requires name="Ext.dd.DragDrop"/>
<requires name="Ext.Resizable"/>
</package>
</packages>下面的例子介绍了w:requires的一个用法,由于要在客户端写javascript来弹出Ext的对话框,因此用w:requires引入了"Ext.MessageBox"包,当点击按钮的时候就弹出一个确认的对话框,用户选择后,又弹出一个信息对话框来显示用户的选择结果。
<f:view>
<w:requires package="Ext.MessageBox" />
<w:button value="Show Dialog" onclick="showDialog()" />
<script>
function showDialog(){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
}
function showResult(btn){
Ext.MessageBox.alert("", "you click the '" + btn + "' button");
};
</script>
</f:view>