Using and Creating Widgets

<?xml version="1.0" encoding="UTF-8"?>
<wd:Description xmlns:wd="http://inubit.com/widget/schema" type="ExtDateField" uiClass="com.inubit.web.extjs.form.ExtDateFieldWidget" namespace="http://inubit.com/widget/ExtForm" prefix="">
    <Widget>
        <wd:Attributes>
            <!-- Keep in mind that, if you are using several date pickers in a form, every instance
            must have a unique name-->
            <name/>
        </wd:Attributes>
        <DateField>
            <wd:Attributes>
                <!-- The date field should be 300 px wide; the text field can have all attributes of a
                "normal" text field -->
                <width>300</width>
            </wd:Attributes>
        </DateField>
        <Meta>
            <wd:Attributes>
                <!-- The format value can be defined in the designer and defines in which format the date
                is displayed, permissible values are specified by the Ext JS framework -->
                <format/>
            </wd:Attributes>
        </Meta>
    </Widget>
</wd:Description>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="html" encoding="UTF-8"/>
    <xsl:template match="extform:Widget[@type='ExtDateField']">
        <xsl:variable name="wid" select="concat($ns,@name)"/>
        <xsl:variable name="tf">
            <TextField name="{@name}" xmlns="">
                <xsl:for-each select="extform:DateField/@*[name()!='name']">
                    <xsl:attribute name="{local-name(.)}">
                        <xsl:value-of select="."/>
                    </xsl:attribute>
                </xsl:for-each>
                <xsl:value-of select="extform:DateField"/>
            </TextField>
        </xsl:variable>
        <script language="javascript" type="text/javascript">
            addCssIS('/html/js/extjs/resources/css/ext-all.css');
            addCssIS('/html/js/extjs/resources/css/xtheme-gray.css');
        </script>
        <xsl:apply-templates select="$tf/TextField"/>
        <script language="javascript" type="text/javascript">
            Ext.onReady(function(){
            try {
            new Ext.form.DateField({
            applyTo: '<xsl:value-of select="$wid"/>'
            <xsl:if test="extform:DefaultTextField/@mandatory = 'true'">
                ,allowBlank: false
            </xsl:if>
            <xsl:if test="extform:Meta/@format != ''">
                ,format: '<xsl:value-of select="extform:Meta/@format"/>'
            </xsl:if>
            });
            }
            catch(e) {
            showMessageIS('Error in ExtDateField widget!',e);
            }
            });
        </script>
    </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:isgrid="http://inubit.com/widget/ISGrid" xmlns:inubit="http://inubit.com/xsl" version="2.0">
    <!-- The widget namespace must be identical with the one defined in the Widget.xml -->
    <!--$Id: Widget_bpc.xsl,v 1.0 2022/01/24 $-->
    <xsl:output method="html" encoding="UTF-8"/>
    <!-- need to set this params, will be filled from outside -->
    <xsl:param name="initDataISGrid"/>
    <xsl:param name="jumpDataISGrid"/>
    <!-- Dummy variables to test this script in an XSLT-Converter; they are set from outside on execution time -->
    <!--<xsl:variable name="proxy"></xsl:variable>-->
    <!--<xsl:variable name="lang"></xsl:variable>-->
    <!--<xsl:variable name="ns"></xsl:variable>-->
    <!--<xsl:function name="inubit:translate"><xsl:param name="element"/></xsl:function>-->
    <!-- The value of the type attribute must be the same as the widget type defined in the widget.xml -->
    <xsl:template match="isgrid:Widget[@type='ISGrid']">
        <!-- Portlet namespace und unique name of the widget are used as identifier -->
        <xsl:variable name="wid" select="concat($ns,@name)"/>
        <!-- div for the grid widget; EXT JS will fill it -->
        <div id="{$wid}">
            <input type="hidden" id="{concat($wid, '_content')}" name="{concat(@name, '_content')}" value=""/>
        </div>
        <!-- JavaScript and XSLT code of the widget; for this grid widget EXT JS code is used -->
        <script language="javascript" type="text/javascript">
            Ext.require([
            'Ext.data.*',
            'Ext.grid.*',
            'Ext.util.*',
            'Ext.toolbar.Paging',
            'Ext.tip.QuickTipManager'
            ]);
            Ext.onReady(function() {
            try {
            <!-- Count of columns is needed multiple times -->
            <xsl:variable name="columnCount" select="count(isgrid:Header/isgrid:Column)"/>
            <!-- Create the Data Model -->
            if(typeof(<xsl:value-of select="concat($ns,@id)"/>DataModel) == 'undefined'){
            Ext.define('<xsl:value-of select="concat($ns,@id)"/>DataModel', {
            extend: 'Ext.data.Model',
            proxy: {
            type: 'ajax',
            reader: 'xml'
            },
            fields: [
            <xsl:for-each select="isgrid:Header/isgrid:Column">
                {name: '<xsl:value-of select="inubit:translate(.)"/>', mapping: 'Column:nth(<xsl:value-of
                    select="position()"/>)'}
                <xsl:if test="position()&lt;$columnCount">,</xsl:if>
            </xsl:for-each>
            <xsl:choose>
                <xsl:when test="not(@itemId)">
                    ,{name: 'id', mapping: '@id' }
                </xsl:when>
                <xsl:otherwise>
                    ,{name: 'id', mapping: '@itemId' }
                </xsl:otherwise>
            </xsl:choose>
            ]
            })
            };
            <!-- Create the Data Store -->
            <xsl:value-of select="$wid"/>storeExtJsIS = Ext.create('Ext.data.Store', {
            <!-- need to sort over all data on the server side -->
            <xsl:if test="not(isgrid:Row)">remoteSort: true,</xsl:if>
            <xsl:if test="not(isgrid:Row)">pageSize: <xsl:value-of select="isgrid:Header/@limit"/>,
            </xsl:if>
            model: '<xsl:value-of select="concat($ns,@id)"/>DataModel',
            proxy: {
            type: 'ajax',
            <xsl:choose>
                <xsl:when test="isgrid:Row">
                    <!-- load the init data, that is mapped directly in the form -->
                    url: '<xsl:value-of select="$initDataISGrid"/><xsl:value-of select="@name"/>',
                </xsl:when>
                <xsl:otherwise>
                    <!-- load the first data from jump; this is for paging purpose -->
                    url: '<xsl:value-of select="$jumpDataISGrid"/><xsl:value-of select="@name"/>',
                </xsl:otherwise>
            </xsl:choose>
            reader: {
            type: 'xml',
            root: 'Widget',
            // records will have a "Row" tag
            record: 'Row',
            <xsl:choose>
                <xsl:when test="not(@itemId)">
                    idProperty: '@id',
                </xsl:when>
                <xsl:otherwise>
                    idProperty: '@itemId',
                </xsl:otherwise>
            </xsl:choose>
            totalProperty: '@total'
            },
            simpleSortMode : true
            }
            });
            <!-- If there are no rows, paging with a jump in the workflow is used to load data -->
            <xsl:if test="not(isgrid:Row)">
                <!-- paging bar -->
                var <xsl:value-of select="$wid"/>pagingBarExtJsIS = Ext.create('Ext.toolbar.Paging',{
                store: <xsl:value-of select="$wid"/>storeExtJsIS,
                displayInfo: true,
                emptyMsg: '-'
                });
            </xsl:if>
            <!-- Create the Grid -->
            if(Ext.Element.cache['<xsl:value-of select="$wid"/>']){
            Ext.Element.cache['<xsl:value-of select="$wid"/>'].destroy(); }
            <xsl:value-of select="$wid"/>gridExtJsIS = new Ext.grid.GridPanel({
            store: <xsl:value-of select="$wid"/>storeExtJsIS
            ,itemId: '<xsl:value-of select="$wid"/>gridExtJsIS'
            ,columns: [
            <xsl:for-each select="isgrid:Header/isgrid:Column">
                {header: '<xsl:value-of select="inubit:translate(.)"/>'
                <xsl:if test="@width">
                    ,width:
                    <xsl:value-of select="@width"/>
                </xsl:if>
                ,dataIndex: '<xsl:value-of select="inubit:translate(.)"/>'
                ,sortable: <xsl:value-of select="not(@sortable='false')"/>}
                <xsl:if test="position()&lt;$columnCount">,</xsl:if>
            </xsl:for-each>
            ]
            <xsl:if test="@enableRowDND='true'">,viewConfig: { plugins: { ptype: 'gridviewdragdrop' } }</xsl:if>
            <xsl:if test="@rowSelectable='true'">,selModel: { selType: 'checkboxmodel'<xsl:if
                    test="@singleRowSelection='true'">, mode : "SINGLE"</xsl:if>}
                ,listeners: {select: function(selModel, record, index, options) {
                var selectedrow = <xsl:value-of select="concat($wid, 'gridExtJsIS')"/>.getSelectionModel().getSelection();
                var result='';
                Ext.each(selectedrow, function (item) {
                result=result + "&lt;"+item.id+ "&gt;on&lt;/"+item.id+"&gt;";
                });
                document.getElementById('<xsl:value-of select="concat($wid, '_content')"/>').value =result; }}
            </xsl:if>
            ,renderTo: '<xsl:value-of select="$wid"/>',
            inubitBpcWebAppNs: '<xsl:value-of select="$ns"/>'
            ,
            <xsl:choose>
                ...
            </xsl:choose>
        </script>
    </xsl:template>
</xsl:stylesheet>