View Full Version : Form field values to reload a grid

14 May 2008, 3:07 AM
I have an Ext grid whose data must be filtered based on field values taken from a plain (no ExtJS) html form. I put an onclick event on the form submit button which should fire a function that gets the JSON datastore filtered by the form field passed into the baseparams and tries to reload the grid.

<input type="text" id="lastname" name="lastname" value=""><br>
<input type="button" class="button" value="Search Phone Book" name="get" onclick="doSearch();">
function doSearch(){
var thegrid = Ext.getCmp("myJSON");
thegrid.baseParams = { limit : 10, start : 0, lastname : $("#lastname").val() };
The Grid is defined like this:

<script type="text/javascript">

var myJSON = new Ext.data.JsonStore({
autoLoad: true
, remoteSort: true
, url: "views/data21.cfm"
, root: "query.data"
, totalProperty: "totalcount"
, fields: [ "distinguishedname","sn","givenname","employeeid","mobile","telephonenumber" ]
, baseParams: { start: 0, limit: "10" }
, dummy: true

var myGrid = new Ext.grid.GridPanel({
height: 287, renderTo: "phonelist", store: myJSON, stripeRows: true, title: "Phonebook", width: 654, columns: [
{ dataIndex: "distinguishedname" , header: "ID" , sortable: true , width: 40 , dummy: true}
, { dataIndex: "sn", header: "Cognome", sortable: true, width: 150, dummy: true }
, { dataIndex: "givenname", header: "Nome", sortable: true, width: 160, dummy: true }
, { dataIndex: "mobile", header: "Cell", sortable: true, width: 120, dummy: true }
, { dataIndex: "telephonenumber", header: "Tel", sortable: true, width: 60, dummy: true }
, bbar:
new Ext.PagingToolbar({
displayInfo: true, pageSize: 10, store: myJSON,
dummy: true
, dummy: true



<div id="phonelist"></div>

When i click the button that fires the doSearch() function I get the message "thegrid has no properties" in the firebug console. If I move the doSearch() function inside the Ext.onReady block I get the message "doSearch() is not defined" in the firebug console.
I guess there's a scoping issue, but I don't know javascript enough to fix it.
The constraint I have is that I must use a regular plain html form and cannot use a ExJS defined form object.
Any help would be appreciated. Thanks.