PDA

View Full Version : Passing Params from a Host Page to Ext JS



mihajloj
5 Aug 2010, 6:59 AM
Can someone please suggest an elegant way of passing parameters from a host page to an Ext JS file? My problem is: I am attempting to integrate some cool Ext JS components to an existing app writing primarily using Java Server Faces (JSF, MyFaces impl). I have written a fairly simple JS code to open a window, but since this window needs to be rendered inside of a MyFaces table component (iterating over a Collection), I need a way of obtaining the row index of the row on which the user clicked.

Perhaps another way of asking this question is: are there other ways I can attach Ext JS user interface to a host page? So far I've only been using a DIV element, and can't think of an easy way to pass a parameter using that.

Here is my Ext JS code:



Ext.onReady(function() {
var formPanel = new Ext.FormPanel( {
items: [ {
checked: true,
fieldLabel: 'Yes',
boxLabel: 'Yes',
xtype: 'radio',
name: 'radioField',
inputValue: 'Y'
}, {
fieldLabel: 'No',
boxLabel: 'No',
xtype: 'radio',
name: 'radioField',
inputValue: 'N'
} ],
buttons: [ {
text: 'Submit',
handler: function() {
formPanel.getForm().load( {
url: 'myTestServlet?param=' + document.getElementById('myForm:rowIdx').getValue(),
waitMsg: 'Loading'
});
}
}, {
text: 'Cancel',
handler: function() {
w.hide();
}
} ]
});


var w = new Ext.Window( {
title: 'Demo',
collapsible: true,
maximizable: true,
width: 370,
height: 490,
minWidth: 185,
minHeight: 245,
layout: 'fit',
items: formPanel
});


var subjectId = 1;


var b = new Ext.Button( {
text: '+',
handler: function() {
alert(subjectId);
w.show();
},
renderTo: 'div-element'
});
});


and here is an excerpt from my host html page:


<t:dataTable id="table"
styleClass="recordSetTable" headerClass="resultSetTableHeader"
rowClasses="cellDataAltRow,cellDataFirstRow"
renderedIfEmpty="false" var="row" preserveDataModel="false"
value="#{bean.rows}"
rows="#{bean.numOfRowsToDisplay}"
sortColumn="#{bean.sortColumn}"
sortAscending="#{bean.sortAscending}"
preserveSort="true" disabled="#{!bean.editable}">
<!-- Render columns... -->
<div id="div-element" />
</t:dataTable>

5 Aug 2010, 7:55 AM
maybe set and read the URL parameters?