Content
- Author: Backbase
- Revision: 1
- Core Compatibility: 4.1
- Browsers: IE6+, FF1.5+, OP9+, SF3+
Integrating ExtJS JavaScript Library with Backbase
Description
Description
One of the great advantages of Backbase is that it easily integrates with
third-party widgets. In this example we will demonstrate how you can combine Backbase
widgets with the Ext JS Javascript Library.
In this example we will implement the Ext JS XML Grid to enable user interaction (e.g. sort-columns, column drag and drop, etc.).
Live Example
<![CDATA[
<ext:xmlDataStore xmlns:ext="http://www.extjs.com/ext20" xmlns:b="http://www.backbase.com/2006/btl" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" url="sheldon.xml" record="Item" for="id('grid')">
<ext:xmlDataField name="Author"></ext:xmlDataField>
<ext:xmlDataField name="Title"></ext:xmlDataField>
<ext:xmlDataField name="Manufacturer"></ext:xmlDataField>
<ext:xmlDataField name="ProductGroup"></ext:xmlDataField>
</ext:xmlDataStore>
<ext:xmlGrid xmlns:ext="http://www.extjs.com/ext20" xmlns:b="http://www.backbase.com/2006/btl" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="grid">
<ext:gridColumn header="Author" width="120" dataIndex="Author"></ext:gridColumn>
<ext:gridColumn header="Title" width="180" dataIndex="Title"></ext:gridColumn>
<ext:gridColumn header="Manufacturer" width="115" dataIndex="Manufacturer"></ext:gridColumn>
<ext:gridColumn header="Product Group" width="100" dataIndex="ProductGroup" sortable="false"></ext:gridColumn>
</ext:xmlGrid>
]]>
Integrating with Backbase
The first requirement for Ext JS to work inside any web application
is to include the <script> to load the Ext JS JavaScript library:
<![CDATA[
<b:codeHighlighter class="epage-snippet">
<head xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
<!-- Dependencies -->
<script type="text/javascript" src="../ext-2.0-rc1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.0-rc1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-2.0-rc1/resources/css/ext-all.css" />
</head>
</b:codeHighlighter>
]]>
In TDL (Tag Definition Language) we create a Ext JS namespace and two different tags:
-
ext:xmlGrid which wraps the Ext.grid.GridPanel
-
ext:xmlDataStore which wraps the Ext.data.Store combined with Ext.data.XmlReader
Because we declare the tags inside TDL, we can now use them and declare a Ext JS widget, just as any other widget would be declared, using XML.
The code from the live example is shown in the following listing:
<![CDATA[
<b:codeHighlighter class="epage-snippet">
<ext:xmlDataStore xmlns:ext="http://www.extjs.com/ext20" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" url="sheldon.xml" record="Item" for="id('grid')">
<ext:xmlDataField name="Author"></ext:xmlDataField>
<ext:xmlDataField name="Title"></ext:xmlDataField>
<ext:xmlDataField name="Manufacturer"></ext:xmlDataField>
<ext:xmlDataField name="ProductGroup"></ext:xmlDataField>
</ext:xmlDataStore>
<ext:xmlGrid xmlns:ext="http://www.extjs.com/ext20" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="grid">
<ext:gridColumn header="Author" width="120" dataIndex="Author"></ext:gridColumn>
<ext:gridColumn header="Title" width="180" dataIndex="Title"></ext:gridColumn>
<ext:gridColumn header="Manufacturer" width="115" dataIndex="Manufacturer"></ext:gridColumn>
<ext:gridColumn header="Product Group" width="100" dataIndex="ProductGroup" sortable="false"></ext:gridColumn>
</ext:xmlGrid>
</b:codeHighlighter>
]]>
The code for defining those tags is shown in the following listing (note the instantiation of the Ext code in the
DOMNodeInsertedIntoDocument handlers):
<![CDATA[
<b:codeHighlighter class="epage-snippet">
<!-- Define the "http://www.extjs.com/ext20" namespace -->
<d:namespace xmlns:d="http://www.backbase.com/2006/tdl" name="http://www.extjs.com/ext20">
<!-- Define the xmlGrid tag -->
<d:element name="xmlGrid">
<!-- Some Attributes -->
<d:attribute name="width" default="540"></d:attribute>
<d:attribute name="height" default="200"></d:attribute>
<!-- The template it's just a DIV, Ext JS will render the rest -->
<d:template type="application/xhtml+xml">
<div></div>
</d:template>
<!-- Overwrite the __children method so that the children arent getting parsed (this is done by this tag) -->
<d:method name="__children">
<d:body type="application/javascript"></d:body>
</d:method>
<!-- Handler for when the node is inserted into the document, readout the columns and create the widget -->
<d:handler event="DOMNodeInsertedIntoDocument" type="application/javascript">
var iWidth = parseInt(this.getAttribute('width'));
var iHeight = parseInt(this.getAttribute('height'));
var aColumns = [];
var aChildren = bb.xml.getChildNodesByTagNameNS(this.modelNode, 'http://www.extjs.com/ext20', 'gridColumn'), i = 0, oChild;
while(oChild = aChildren[i++]){
aColumns.push( {
header: oChild.getAttribute('header'),
width: parseInt(oChild.getAttribute('width'), 10),
dataIndex: oChild.getAttribute('dataIndex'),
sortable: oChild.getAttribute('sortable') != 'false'
} );
}
if(!this._.store){
bb.command.trace('Ext.data.Store is not defined, please define Ext.data.Store before defining your Ext.grid.GridPanel',this,3);
return;
}
// create the grid
this._.grid = new Ext.grid.GridPanel({
store: this._.store,
columns: aColumns,
width: iWidth,
height: iHeight
});
this._.grid.render(this.viewNode);
this._.store.load();
</d:handler>
</d:element>
<!-- Define the xmlDataStore tag -->
<d:element name="xmlDataStore">
<!-- Some Attributes -->
<d:attribute name="url"></d:attribute>
<d:attribute name="record"></d:attribute>
<d:attribute name="for"></d:attribute>
<!-- Handler for when the node is inserted into the document, readout the dataFields and create the widget -->
<d:handler event="DOMNodeInsertedIntoDocument" type="application/javascript">
var oTarget = this.selectSingleNode( this.getAttribute('for') );
var aFields = [];
var aChildren = bb.xml.getChildNodesByTagNameNS(this.modelNode, 'http://www.extjs.com/ext20', 'xmlDataField'), i = 0, oChild;
while(oChild = aChildren[i++])
aFields.push( oChild.getAttribute('name') );
// create the Data Store
oTarget._.store = new Ext.data.Store({
// load using HTTP
url: this.getAttribute('url'),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: this.getAttribute('record')
}, aFields)
});
</d:handler>
<!-- Overwrite the __children method so that the children arent getting parsed (this is done by this tag) -->
<d:method name="__children">
<d:body type="application/javascript"></d:body>
</d:method>
</d:element>
</d:namespace>
</b:codeHighlighter>
]]>
