Passing Params from a Host Page to Ext JS

[mihajloj]

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>

[jay@moduscreate.com]

maybe set and read the URL parameters?