PDA

View Full Version : Getting ext grid with select Onchange event



dpn
15 Dec 2009, 7:13 AM
Hi, I'm very new to extjs.

I'm trying to display an ext grid on a select box onChnage event. I would also like to pass the value of the select box to the javascript function.

This is what I have so far.

Assmblies.php




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="./css/ext-all.css" media="screen" rel="Stylesheet" />
<script src="ext-base.js" type="text/javascript"></script>
<script src="ext-all.js" type="text/javascript"></script>
<script src="db-grid.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action='<?phpecho($_SERVER["PHP_SELF"]) ?>' method='post' name='subassylst'>
&nbsp;&nbsp;
<b>Search Sub Assemblies:</b>&nbsp;<select name='search' id='search' onChange="Call the grid from here also pass this.value">
<?
if($_GET['key'] == "")
{
$dbox =$_POST['search'];


}


else

{
$dbox=$_GET['key'];
}
switch ($dbox)
{
Case"1":
$bpc="selected";
break;
Case"2":
$lwg="selected";
break;
Case"3":
$omwg="selected";
break;
Case"4":
$oc="selected";
break;
}
echo"<option>Select...</option><option value=1 $bpc> - BPC</option><option value=4 $oc> - OC</option>





<option value=3 $omwg> - OG</option>
<option value=2 $lwg> -Assy</option>
?>
</select>
<div id="db-grid">
</div>
</form>
</body>
</html>




db-grid.js




Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: "GetSummaryData.php?dVar=dBox", //dVar should be paased from the dropdown box.
id:'config',
fields:[
{name:'config', type:'int'},
'Notes','Name','Type','SN','TS','Updated_By'




]

});





var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'config',header:'key', width:100, sortable: true, dataIndex:'config',renderer:function(myValue) {
return '<a href="ShowAssy.php?ser='+myValue+'">'+myValue+'</a>';}
},
{header: 'SN', width:100, sortable: true, dataIndex:'SN'},
{header:'TS', width:120, sortable: true, dataIndex:'TS'},
{header:'Updated By',width:100, sortable:true, dataIndex:'Updated_By'},
{header:'Status', width:120, sortable: true, dataIndex:'Type'},
{header:'Location', width:120, sortable: true, dataIndex:'Name'},




{header: 'Notes', width:300, sortable: true, dataIndex:'Notes',renderer:function(myValue)

{return '<textarea rows=2 cols=30>'+myValue+'</textarea>';}}
],





stripeRows: true,
autoHeight:true,
width:960,


title:'DB'
store.load();
});
grid.render('db-grid');
});


GetSummaryData.php



<?php

include "dbConnect.php";
include "dbQueries.php";
$dbox=$_GET['dVar'];
$getqueries=new getQueries;
$genqueries=new generalQueries;
if($dbox==21)
{
$searchres=$getqueries->getPlate();
$tablename="Palte";
$keyValName="keyPlates";


$tableType=6;


}
else if($dbox==22)
{
$searchres=$getqueries->getHammer();
$tablename="hammer";
$keyValName="keyhammer";


$tableType=7;


}

else
{
if($dbox!="")
{
$searchres=$getqueries->geSearch($dbox);
$tableType=5;
$tablename="AllTools";
$keyValName="keyAllTools";
$page="ShowAllTools.php";
}
}
if($searchres != "")
{
while($d=mysql_fetch_object($searchres))
{
$keyval=$d['MaxKey'];
$getData=$getqueries->getSummaryWithJoin($tablename,$keyValName,$tableType,$keyval);
while($stat=mysql_fetch_object($getData))
{
$data[]=$stat;
}
}
}
echo json_encode($data);





?>




I would like to fire the ext code to display the grid data on the OnChange event in the "search" select box.


Please help me. Thank you!

Arno.Nyhm
15 Dec 2009, 8:44 AM
wrong category. here is the GXT section. maybe an admin move this thread to the extjs categories

dpn
15 Dec 2009, 9:10 AM
wrong category. here is the GXT section. maybe an admin move this thread to the extjs categories

oops sorry. Posted in ext forum