PanelAndChild

From Plex-XML

The <panel> and <child> elements could be used to create a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic split bars between regions and built-in expanding and collapsing of regions.

<panel>

The panel-element generates a new frame could have multiple nested panels and could be itself a nested panel.

<panel>

Attributes: id : Required. Unique id.; target : Optional. Id of the target DIV-Element for the new panel. Default is: 'target="ext_content_content"' and the panel will be generated in the main part of the application.; layout : Optional. 'border' if there is a child panel, 'fit' if region is center

<childpanel>

Use the childpanel-element to define several nested panels.

<childpanel>

Attributes

id : Required. Unique id.

region : Required. Position of a panel (north, west, south, east, center).

type : Optional

tabPanel : for a child with a tab panel

treePanel : for a child with a tree

height : Optional. Height of a panel.

width : Optional. Width of a panel.

border : Optional. true/false

split : Optional. true/false indicator for splitted panels that could be resized. Only valid if region is not center.

Elements: <html> : For easy HTML output. Only one element should be used,

 <childpanel region="north" id="tabGroup_priceManager_north" height="34" border="false">
  <html>
   <div class="cst-hd-title" style="margin: 6px;"><xsl:value-of select="$vDescription"/></div>
  </html>
 </childpanel>

<domhelper> : For customized nested HTML output.

<childpanel region="north" id="tabGroup_priceManager_north" height="40" border="false">
 <domhelper>
  {tag: 'div',
   style: 'width:100%;border:1px solid blue;',
   cls: 'wtf',
   children: [{
    tag: 'a',
    href: 'www.allabout.de',
    children: [{
     tag: 'span',
     html: 'text'
     }]
    }]
   }
 </domhelper>
</childpanel>

See http://docs.sencha.com/ext-js/3-4/#!/api/Ext.DomHelper

<ajaxPageLoad> : To load the content of a Plex-XML function in a panel.

<childpanel height="100" region="south" id="tabGroup_priceManager_south" border="false" split="true">
 <ajaxPageLoad style="ajax">
  <request>ChartShow</request>
   <param value="55421">ChartID</param>
  </ajaxPageLoad>
</childpanel>

type="tabPanel" and <tabDialogExt> : To load a Tab-Dialog.

<childpanel region="center" id="tabGroup_priceManager_center" type="tabPanel" border="false">
 <tabDialogExt>
  <tabTab text="Statistic" initialload="false">
   <xsl:call-template name="onClickTab">
    <xsl:with-param name="param">
     <formName>SFFB101AE</formName>
     <param value="tab">style</param>
    </xsl:with-param>
   </xsl:call-template>
  </tabTab>
  <tabTab text="Enter" initialload="false">
   ...
  </tabTab>
 </tabDialogExt>
</childpanel>

type="treePanel" and <request> FindBrowse with style=tree to load a FB as tree. Group by will be first tree level.

<childpanel width="325" region="west" id="tabGroup_priceManager_west" border="false" split="true" type="treePanel">
 <request url="aServlet?request=HCFB101BE&style=tree"/>
</childpanel>

Examples

While we use Senchas Ext JS for these logic you could find some examples on the Sencha site: http://www.sencha.com/products/extjs/examples look for the "Layout-Manager" examples.

Master/Detail

You could use the panel and child logic to create a master/detail screen without modifying the existing functions and without creating a new Plex function:

XSLT:

 <!--Master/Detail-->
 <xsl:import href="/WEB-INF/resources/common/PanelAndChild.xslt"/>
 <!-- Get identifier from parameter -->
 <xsl:variable name="vparID" select="/responses/response[@request-name='Echo']/returnvalue[@name='parID']/@value"/>  
 <xsl:template name="PanelAndChild">

   <panel id="pnl_MasterDetail">
     <!-- Load Master DictionaryEdit in center region -->
     <childpanel region="center" id="tabGroup_pnl_MasterDetail_center" border="false">
       <ajaxPageLoad style="ajax">
         <request>FooUD</request>
         <param value="{$vparID}">ID</param>
         <action>P</action>
       </ajaxPageLoad>
     </childpanel>
      
     <!-- Load Detail FindBrowse in south region -->
     <childpanel region="south" id="tabGroup_pnl_MasterDetail_south" width="800" height="400" border="true" split="true">
       <ajaxPageLoad style="ajax">
         <request>FooFB</request>
         <param value="FooID">webFindName</param>
         <param value="=">webFindOper</param>
         <param value="{$vparID}">webFindValue</param>
       </ajaxPageLoad>
     </childpanel>
   </panel>
 </xsl:template>

request-config: The Echo-Request is used to pass the parameter and to create the panel and child structure.

 <webrequest name="FooMD" usedefault="false">
   <request name="Echo">
     <parameter type="web" name="parID">ID</parameter>
   </request>
   <response>
     <error type="default" name="DEFAULT"/>
     <reaction type="DEFAULT" target="DISPLAY" localized="true" name="/WEB-INF/Foo/filter/FooMD.xsl"/>
   </response>
 </webrequest>

PanelAndChild

Contents

<panel>

<panel>

<childpanel>

<childpanel>

Examples

Master/Detail

Views

Personal tools

Navigation

Search

Toolbox