luv2hike
8 Feb 2008, 7:53 AM
This was a problem that had me stumped for a while. I found 3 or 4 other threads in the forum from people with the same issue and several proposed solutions. However, none of the solutions worked for me, so I came up with this one. It seems to work consistently well and is very simple to understand and use.
I was kind of surprised this functionality wasn't already present in ExtJS (I only started using it last week) but think something like this could be easily added. Maybe this scheme could be used in the panel.load() method when loadScripts is set to true? I thought that was supposed to do it and is what I tried first, however, while it loaded the page, the script inside that page did not execute.
So without further delay, here is the solution I came up with, using information from another thread on this forum about the insertHtml() call, in case someone else needs it:
// this goes inside the parent/main page
var spanel;
var grid;
function loadPage(target, url, params)
{
Ext.Ajax.request(
{
url: url,
params: params,
success: function(response, options)
{
var html = response.responseText;
var el = target.getUpdater().getEl();
el.dom.innerHTML = '<div></div>';
el.insertHtml('afterbegin', html);
}
});
}
...
// it's used in here (also in the main page)
grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'ID', width: 30, sortable: true, dataIndex: 'exerID'},
{header: 'Exercise Name', width: 120, sortable: true, dataIndex: 'exerName'},
{header: 'Bench Position', width: 80, sortable: true, dataIndex: 'bench'}
],
viewConfig: {
forceFit: true
},
renderTo: 'exer',
stripeRows: false,
frame: true,
header: true,
tbar: [
{
id: 'plus',
text: 'Add Exercise',
handler: function()
{
spanel.expand();
loadPage(spanel, "exerciseDetails.jsp");
},
tooltip: 'Click to add a new exercise.'
}
]
});
...
// spanel is defined within the viewport definition which contains a border layout
spanel = new Ext.Panel({
region:"south",
bodyStyle:"background-color:#bacfff",
title:" ",
height:300,
autoScroll:true,
collapsible:true,
collapseMode: 'mini',
collapsed: true,
hideCollapseTool:true,
split:true,
}), // only an excerpt but other panels follow
...
Then the page that gets loaded looks like:
(again, only relevant portions shown to protect some business and DB logic)
<!-- NOTICE: no html, head, or body tags! -->
<!-- notice the call to include its own javascript -->
<script type="text/javascript" src="exercise.js"></script>
<%-- Page contents --%>
<div id="body">
<%-- header --%>
<!-- the form with the action going to our script -->
<form name="mainform"
action="javascript:saveExerciseForm(document.mainform.exerid.value,
document.mainform.exerciseName.value,
document.mainform.benchPosition.value)">
<%-- overall page table --%>
<table style="border: medium solid black">
<tr>
<th align="right">Exercise Name : </th>
<td><input tabindex="1" type="text" name="exerciseName" maxlength="64" size="64" value="${results.rows[0].exerciseName}"/></td>
</tr>
<tr>
<th align="right">Bench Position : </th>
<td>
<select tabindex="2" name="benchPosition">
<option value=""<c:if test="${empty results.rows[0].benchPosition}"> selected="selected"</c:if>>-- Select Bench Position --</option>
<option value="flat"<c:if test="${'flat' == results.rows[0].benchPosition}"> selected="selected"</c:if>>flat</option>
<option value="incline"<c:if test="${'incline' == results.rows[0].benchPosition}"> selected="selected"</c:if>>incline</option>
<option value="leg"<c:if test="${'leg' == results.rows[0].benchPosition}"> selected="selected"</c:if>>leg</option>
<option value="rowing"<c:if test="${'rowing' == results.rows[0].benchPosition}"> selected="selected"</c:if>>rowing</option>
<option value="squat"<c:if test="${'squat' == results.rows[0].benchPosition}"> selected="selected"</c:if>>squat</option>
</select>
</td>
</tr>
<%-- buttons --%>
<tr><td colspan="2"> </td></tr>
<tr>
<th colspan="2">
<input type="button" value="Cancel"
onClick="spanel.getUpdater().getEl().update(' '); spanel.collapse()"/>
<input type="submit" value="Save"/>
</th>
</tr>
</table>
<c:if test="${empty param.id}">
<input type="hidden" name="exerid" value="0"/>
</c:if>
<c:if test="${not empty param.id}">
<input type="hidden" name="exerid" value="${param.id}"/>
</c:if>
</form>
</div>
And finally the external javascript in its entirety. Note that this could also be directly in the above file instead of external. This has been reformatted a tad to be easier to read in the forum space.
// exercise.js
function saveExerciseForm(id, name, bench)
{
loadPage(spanel, "saveExercise.jsp",
{
exerId:id,
exerciseName:name,
benchPosition:bench
});
}
Hopefully this makes sense. It is working well for me and hopefully might help someone else.
I was kind of surprised this functionality wasn't already present in ExtJS (I only started using it last week) but think something like this could be easily added. Maybe this scheme could be used in the panel.load() method when loadScripts is set to true? I thought that was supposed to do it and is what I tried first, however, while it loaded the page, the script inside that page did not execute.
So without further delay, here is the solution I came up with, using information from another thread on this forum about the insertHtml() call, in case someone else needs it:
// this goes inside the parent/main page
var spanel;
var grid;
function loadPage(target, url, params)
{
Ext.Ajax.request(
{
url: url,
params: params,
success: function(response, options)
{
var html = response.responseText;
var el = target.getUpdater().getEl();
el.dom.innerHTML = '<div></div>';
el.insertHtml('afterbegin', html);
}
});
}
...
// it's used in here (also in the main page)
grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'ID', width: 30, sortable: true, dataIndex: 'exerID'},
{header: 'Exercise Name', width: 120, sortable: true, dataIndex: 'exerName'},
{header: 'Bench Position', width: 80, sortable: true, dataIndex: 'bench'}
],
viewConfig: {
forceFit: true
},
renderTo: 'exer',
stripeRows: false,
frame: true,
header: true,
tbar: [
{
id: 'plus',
text: 'Add Exercise',
handler: function()
{
spanel.expand();
loadPage(spanel, "exerciseDetails.jsp");
},
tooltip: 'Click to add a new exercise.'
}
]
});
...
// spanel is defined within the viewport definition which contains a border layout
spanel = new Ext.Panel({
region:"south",
bodyStyle:"background-color:#bacfff",
title:" ",
height:300,
autoScroll:true,
collapsible:true,
collapseMode: 'mini',
collapsed: true,
hideCollapseTool:true,
split:true,
}), // only an excerpt but other panels follow
...
Then the page that gets loaded looks like:
(again, only relevant portions shown to protect some business and DB logic)
<!-- NOTICE: no html, head, or body tags! -->
<!-- notice the call to include its own javascript -->
<script type="text/javascript" src="exercise.js"></script>
<%-- Page contents --%>
<div id="body">
<%-- header --%>
<!-- the form with the action going to our script -->
<form name="mainform"
action="javascript:saveExerciseForm(document.mainform.exerid.value,
document.mainform.exerciseName.value,
document.mainform.benchPosition.value)">
<%-- overall page table --%>
<table style="border: medium solid black">
<tr>
<th align="right">Exercise Name : </th>
<td><input tabindex="1" type="text" name="exerciseName" maxlength="64" size="64" value="${results.rows[0].exerciseName}"/></td>
</tr>
<tr>
<th align="right">Bench Position : </th>
<td>
<select tabindex="2" name="benchPosition">
<option value=""<c:if test="${empty results.rows[0].benchPosition}"> selected="selected"</c:if>>-- Select Bench Position --</option>
<option value="flat"<c:if test="${'flat' == results.rows[0].benchPosition}"> selected="selected"</c:if>>flat</option>
<option value="incline"<c:if test="${'incline' == results.rows[0].benchPosition}"> selected="selected"</c:if>>incline</option>
<option value="leg"<c:if test="${'leg' == results.rows[0].benchPosition}"> selected="selected"</c:if>>leg</option>
<option value="rowing"<c:if test="${'rowing' == results.rows[0].benchPosition}"> selected="selected"</c:if>>rowing</option>
<option value="squat"<c:if test="${'squat' == results.rows[0].benchPosition}"> selected="selected"</c:if>>squat</option>
</select>
</td>
</tr>
<%-- buttons --%>
<tr><td colspan="2"> </td></tr>
<tr>
<th colspan="2">
<input type="button" value="Cancel"
onClick="spanel.getUpdater().getEl().update(' '); spanel.collapse()"/>
<input type="submit" value="Save"/>
</th>
</tr>
</table>
<c:if test="${empty param.id}">
<input type="hidden" name="exerid" value="0"/>
</c:if>
<c:if test="${not empty param.id}">
<input type="hidden" name="exerid" value="${param.id}"/>
</c:if>
</form>
</div>
And finally the external javascript in its entirety. Note that this could also be directly in the above file instead of external. This has been reformatted a tad to be easier to read in the forum space.
// exercise.js
function saveExerciseForm(id, name, bench)
{
loadPage(spanel, "saveExercise.jsp",
{
exerId:id,
exerciseName:name,
benchPosition:bench
});
}
Hopefully this makes sense. It is working well for me and hopefully might help someone else.