Technology Articles: extjs

Showing posts with label extjs. Show all posts

Thursday, September 29, 2011

Extjs Applet Integration

In recent years most of the systems are getting upgraded with the new User Interface and Extjs is once of the most widely used technology for the rich look and feel. In most of the domain mostly in DMS (Document Management System) upload and download functionality is provided. To achieve the performance most of the system uses applets for upload and downloading the content from the systems. One of the major problem with applet is they used different tags (applet, object and embed) for different browsers. I came across such issues so decided to write a blog on it.

To achieve the mention problem i am writing few steps that will be helpful to you guys.

1) Create a main.html page and in the same directory put the ext-base.js and ext-all.js files.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="applet.js"></script>
<script>
Ext.onReady(function(){
my.appletRenderer.getFileSelector();
my.appletRenderer.getUploadApplet();
});
</script>
</head>
<body scroll="no">
<div id="center">
<div id="x-desktop">
<div id="center-panel-container" style="background:transparent;"></div>
</div>
</div>
</body>
</html>

2) Create an applet.js file in the same directory with following contents.

my.appletRenderer = {

getFileSelector : function() {
if (new ActiveXObject("Scripting.Dictionary") != null) {
return this.getActiveXFileSelector();
} else {
return this.getSwingFileSelector();
}
},

getSwingFileSelector : function(){
if (Ext.isIE || Ext.isChrome) {
if (Ext.isIE8 ) {
return new Ext.Panel({
renderTo: 'center-panel-container',
height : 0,
html : '<object ' +
'id = "SwingFileSelectorApplet" ' +
'name="SwingFileSelectorApplet" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'cache_archive="" ' +
'cache_version="" ' +
'width="0" ' +
'height="0" ' +
'mayscript="true" ' +
'bodyStyle="display:none;"> ' +
'</object>'
});
}else{
return new Ext.Panel({
renderTo: 'center-panel-container',
height : 0,
html : '<applet ' +
'id="SwingFileSelectorApplet" ' +
'name="SwingFileSelectorApplet" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'width=0 ' +
'height=0 ' +
'mayscript="true">' +
'<param name="cache_archive" value="" />'+
'<param name="cache_version" value="" />'+
'</applet>'
});
}
}else{
return new Ext.Panel({
renderTo: 'center-panel-container',
height : 0,
html : '<EMBED '
+ 'id="SwingFileSelectorApplet" '
+ 'name="SwingFileSelectorApplet" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'type="application/x-java-applet;version=1.4" '
+ 'cache_archive="" '
+ 'cache_version="" '
+ 'EMBEDDED="true" '
+ 'mayscript="true" '
+ 'width="0" '
+ 'height="0"> '
+ '<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED> '
+ '</EMBED>'
});
}
},

getActiveXFileSelector : function() {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : ' <object classid="" align="baseline" border="0">'
+ '<param name="LPKPath" value="">'
+ '</object>'
+ '<object classid="" codebase="" '
+ 'VIEWASTEXT name="fileDialog" id="CommonDialog1"><param NAME="CancelError" VALUE="0">'
+ '<param NAME="DialogTitle" VALUE="'+ fs.locale.write("docUpload", "selectFile") +'">'
+ '<param NAME="" VALUE=""><param NAME="" VALUE="">'
+'</object>'
});
},

getUploadApplet : function(){
if(Ext.isWindows){
return this.getWindowsUploadApplet();
}
else{
return this.getUnixUploadApplet();
}
},

getWindowsUploadApplet : function(){
if (Ext.isIE) {
if (Ext.isIE8 ) {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<object '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</object>'
});
}else{
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}
}else if (Ext.isChrome) {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}else{
return new Ext.Panel({
renderTo: 'center-panel-container',
height : 0,
html : '<EMBED ' +
'id="FileUpload" ' +
'name="FileUpload" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'type="application/x-java-applet;version=1.4" ' +
'cache_version="" ' +
'cache_archive="" ' +
'width="0" ' +
'height="0" ' +
'mayscript="true"> ' +
'<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED>'+
'</EMBED>'
});
}
},

getUnixUploadApplet : function(){

return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}

}

3) In the applet.js file if you pass the proper values of the attribute which i have kept blank like codebase, archive,code,classid etc. the applets will get render.

4) View the main.html and view source the applets be enabled.

5) And this code will work for almost all the browser and OS. (Only you need to create your own jar files operating system specific)

6) Same check can be applied for the download and other applet.

Tuesday, September 27, 2011

Extjs Fix For Firefox Text overflow.

HTML Online Editor Sample

In the recent Extjs development i faced an issue related to the content overflow for Firefox. i was retrieving a data from the DB table which is having the CLOB field. CLOB type filed is used to store a data more than 4k. The CLOB field in My XML response have a data of around 8k. So i was not able to see the full data (8k) of that field. i was able to see only the 4k data in the Extjs text area. After doing a search i have got the following information.

A text node in Firefox allows only 4K data. So an XML Ajax response gets split up into multiple text child nodes instead of only one node. Its fine in Internet Explorer(only up to 64k) and opera (only up to 32k). For Firefox, to get the full data you either need to use node.normalize() before you call node.firstChild or use node.textContent, or user node.wholeText both of which are Mozilla specific methods.

To fix this issue in Extjs i did the following steps.

If you are using the XmlReader then you need to override it.

/**

* The class represents a custom XML reader component for FusionSaas. Hold

* handle to the current viewer and configuration parameters for XML Reader.

my.XmlReader=Ext.extend(Ext.data.XmlReader,{

constructor: function(meta, recordType){

my.XmlReader.superclass.constructor.call(this, meta, (recordType || meta.fields));

/**

* Create a data block containing Ext.data.Records from an XML document.

* @param {Object} doc A parsed XML document.

* @return {Object} records A data block which is used by an {@link Ext.data.Store} as

* a cache of Ext.data.Records.

readRecords : function(doc){

this.xmlData = doc;

var root = doc.documentElement || doc;

var q = Ext.DomQuery;

var recordType = this.recordType, fields = recordType.prototype.fields;

var sid = this.meta.idPath || this.meta.id;

var totalRecords = 0, success = true;

if(this.meta.totalRecords){

totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);

}

if(this.meta.success){

var sv = q.selectValue(this.meta.success, root, true);

success = sv !== false && sv !== 'false';

}

var records = [];

var ns = q.select(this.meta.record, root);

for(var i = 0, len = ns.length; i < len; i++) {

var n = ns[i];

var values = {};

var id = sid ? q.selectValue(sid, n) : undefined;

for(var j = 0, jlen = fields.length; j < jlen; j++){

var f = fields.items[j];

var v = this.selectMoreThan4KValue(Ext.value(f.mapping, f.name, true), n, f.defaultValue);

v = f.convert(v, n);

values[f.name] = v;

}

var record = new recordType(values, id);

record.node = n;

records[records.length] = record;

}

return {

success : success,

records : records,

totalRecords : totalRecords || records.length

};

selectMoreThan4KValue : function(path, root, defaultValue){

trimRe = /^\s+|\s+$/g

path = path.replace(trimRe, "");

valueCache = {};

if(!valueCache[path]){

valueCache[path] = Ext.DomQuery.compile(path, "select");

}

var n = valueCache[path](root),

n = n[0] ? n[0] : n;

if(n && Ext.isGecko){

v = (n && n.firstChild ? n.firstChild.wholeText : null);

}else{

v = (n && n.firstChild ? n.firstChild.nodeValue : null);

}

return ((v === null||v === undefined||v==='') ? defaultValue : v);

}

});

Tuesday, September 6, 2011

mxGraph Extjs Integration

HTML Online Editor Sample
This article will help you to integrate the mxGraph in the Extjs.

Follow the following steps to create a setup.

1) Create a folder named mxgraph_extjs_integrtion.

2) Download ext-all.js, ext-base.js and mxClient.js files into mxgraph_extjs_integrtion folder.

3) Create a MxGraphExtjsIntegration.html file in the same folder with the following content.

<html>

<head>

<title>Integrating mxGraph with Extjs</title>

<style>

div.styled {

border-width:2px;

border-color:#ff9900;

border-style: solid solid solid solid;

background: url('workflow-designer/grid_10.png');

}

</style>

Ext.onReady(function(){

var centerDiv = document.getElementById('center-panel-container');

var mainDiv = document.createElement('div');

mainDiv.id = 'workflow-designer-main-panel';

// Process Container

var graphDiv= document.createElement('div');

graphDiv.id = 'graph';

graphDiv.style.width = '900px';

graphDiv.style.height = '600px';

graphDiv.style.top = '30px';

graphDiv.className = 'styled';

// Toolbar

var tbarDiv = document.createElement('div');

tbarDiv.id = 'toolbar';

tbarDiv.style.height = '24px';

tbarDiv.style.left= '300px';

tbarDiv.style.width = '500px';

tbarDiv.style.overflow = 'hidden';

tbarDiv.style.display = 'block';

tbarDiv.style.position = 'absolute';

mainDiv.appendChild(tbarDiv);

mainDiv.appendChild(graphDiv);

centerDiv.appendChild(mainDiv);

new loadWFConfig('fsworkflowconfig.xml');

});

selectionChanged = function(graph) {

};

loadWFConfig = function(config) {

try {

if (!mxClient.isBrowserSupported()) {

mxUtils.error('Browser is not supported!', 200, false);

}else {

var node = mxUtils.load(config).getDocumentElement();

var editor = new mxEditor(node);

}

} catch (e) {

// Shows an error message if the editor cannot start

mxUtils.alert('Cannot start application: ' + e.message);

throw e; // for debugging

}

return editor;

};

onInit = function(editor, isFirstTime){

mxEvent.disableContextMenu(document.body);

editor.validation = true;

var editorGraph = editor.graph;

// Defines an icon for creating new connections in the connection handler.

// This will automatically disable the highlighting of the source vertex.

mxConnectionHandler.prototype.connectImage = new mxImage('workflow-designer/connector.gif', 16, 16);

// Highlights the vertices when the mouse enters

var highlight = new mxCellTracker(editorGraph, '#999900');

editorGraph.setConnectable(true);

editorGraph.setDropEnabled(true);

editorGraph.setPanning(true);

editorGraph.setTooltips(true);

editorGraph.setAllowDanglingEdges(false);

editorGraph.connectionHandler.setCreateTarget(true);

mxGraphHandler.prototype.cloneEnabled = false;

// Sets the cursor

editorGraph.container.style.cursor = 'default';

var listener = function(sender, evt){

// This code tests to see if a node is dragged to less than the far left or top and

// if so, re-positions it at the 0px left or top

try{

var change = evt.properties.changes[0];

var cell = change.hasOwnProperty("cell") ? change.cell : change.child;

var geometry = cell.getGeometry();

var x = geometry.x;

var y = geometry.y;

if(x < 0) geometry.x = 10;

if(y < 0) geometry.y = 10;

if(x < 0 || y < 0){

cell.setGeometry(geometry);

editorGraph.refresh();

}

catch(e){}

// Perform validation after any change

editorGraph.validateGraph();

};

editorGraph.model.addListener(mxEvent.CHANGE, listener);

// Creates rubberband selection

//var rubberband = new mxRubberband(editorGraph);

// Stop cells from being resized - this stops distortion of teh graphic and over / undersize imagery

editorGraph.setCellsResizable(false);

// mxCellAttributeChange to change properties

// Implements a properties panel that uses

editorGraph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt){

//fs.BPDefinition.hasChange = true;

selectionChanged(editorGraph);

});

};

</script>

</head>

<body>

</div>

</body>

</html>

4) Create a file named fsworkflowconfig.xml in the same folder with following content.

<add as="onInit"><![CDATA[

function (isFirstTime){

onInit(this, isFirstTime);

}

]]>

</add>

<ui>

</ui>

</group>

</add>

</mxCell>

</connector>

</add>

</mxCell>

</Text>

</add>

</mxCell>

</start>

</add>

</mxCell>

</activity>

</add>

</mxCell>

</agent>

</add>

</mxCell>

</timer>

</add>

</mxCell>

</cancel>

</add>

</mxCell>

</finish>

</add>

</mxCell>

</andjoin>

</add>

</mxCell>

</orjoin>

</add>

</mxCell>

</andsplit>

</add>

</mxCell>

</decision>

</add>

</mxCell>

</conditionalor>

</add>

</Array>

<add as="getTooltipForCell"><![CDATA[

function(cell){

return cell.getAttribute('form');

}

]]>

</add>

<add as="convertValueToString"><![CDATA[

function(cell){

var cellTitle = cell.getAttribute('name');

return cellTitle;

}

]]>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</mxStylesheet>

<add as="valueForCellChanged"><![CDATA[

function(cell, value){

var previous = null;

if (isNaN(value.nodeType)){

previous = cell.getAttribute('name');

cell.setAttribute('name', value);

}else{

previous = cell.value;

cell.value = value;

}

modified = true;

return previous;

}

]]>

</add>

</mxGraphModel>

</mxGraph>

</mxDefaultKeyHandler>

</mxDefaultToolbar>

</mxEditor>

5) Create workflow-designer folder under the same folder. and put your images mentioned in the fsworkflowconfig.xml file.

6) Open the MxGraphExtjsIntegration.html in the fireforx browser.
.

Technology Articles

Thursday, September 29, 2011

Extjs Applet Integration

Tuesday, September 27, 2011

Extjs Fix For Firefox Text overflow.

Tuesday, September 6, 2011

mxGraph Extjs Integration

Pages

About Me