30.51. <w:requires>

Ext框架非常的庞大,如果把全部的javascrpit代码都放在同一个js文件里面,那么是不现实的,因此Ext引入了包的概念(与java的包类似),把不同的包放在不同的js文件里面,在引用Ext的时候可以按需引用,而不用把全部都引入,如果想在客户端编写Ext的代码,那么就要用到Requires构件,Requires构件就类似java中的import功能,用来引用Ext中某个包。

30.51.1. 构件信息

表 30.125. 构件信息

Tag Classorg.operamasks.faces.webapp.widget.RequiresTag

继承体系

30.51.2. 属性

表 30.126. 属性

package 定义类
类型 java.lang.String
是否必须 延时求值
引用的包名,对应下面的包与文件的对应关系中的name,例如:All,Ext.Base

30.51.3. 构件API

包与文件对应关系如下:

<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>

30.51.4. 示例

下面的例子介绍了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>