Mostrar datos en un grid de ExtJS a partir de un botón submit de un formulario

[reyes831107]

Hola, un saludo a todos amigos, estoy comenzando con ExtJS 3.x y se me ha presentado el siguiente problema. He creado un form de búsqueda que tiene 3 botones: Search, reset and Cancel. Cuando se presiona el botón Search, la página desplegará un grid con todos los datos que coincidan en la BD con el texto que se escribió en el textfield del form de búsqueda, y aún no he logrado como hacerlo. Realmente apreciaré sus ayudas y sugerencias. A continuación les muestro el código...Saludos, R.

Submit Form:

var search = new Ext.FormPanel({
url:'search_legend.php',
// standardSubmit:true,
width: 785,
frame: true,
title: 'Search for legends',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 128,
defaults: {
anchor: '95%',
// allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
id:'search_param',
name:'search_param',
fieldLabel: 'Type here to search...'
}],
buttons: [{
text: 'Search',
handler: function(){
search.getForm().submit({
success: function(f,a){
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f,a){
if (a.failureType === Ext.form.Action.CONNECT_FAILURE){
Ext.Msg.alert('Failure', 'Server reported:'+a.response.status+' '+a.response.statusText);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID){
Ext.Msg.alert('Warning', a.result.errormsg);
}
}
});
gridForm.render('gridForm');
store.load();
gridForm.setVisible(true);
tb.setDisabled(true);
}

},{
text: 'Reset',
handler: function(){
search.getForm().reset();
gridForm.getForm().reset();
gridForm.hide();
}
},{
text:'Cancel',
handler:hiding_search
}]
});

PHP Script: search_legend.php

<?php
require('conection.php');

$busqueda = $_POST['search_param'];
if(isset($busqueda)){
$query = mssql_query("Select * from Legend where art_name like '%$busqueda%' or real_name like '%$busqueda%'
or age like '%$busqueda%' order by art_name");
$query2 = mssql_query("Select art_name, birth_day, death_day, age from Legend where art_name like '%$busqueda%'
or real_name like '%$busqueda%' or age like '%$busqueda%' order by art_name");
$cantFilas = mssql_num_rows($query);
if ($cantFilas == 0){
?>
<script languaje="javascript">
alert("No hay resultados que mostrar");
</script>
<?
}
else{
while($obj = mssql_fetch_object($query)){
$arr[] = $obj;
}
while($obj2 = mssql_fetch_object($query2)){
$arr2[] = $obj2;
}
echo '{success:true,rows:'.json_encode($arr).',rows2:'. json_encode($arr2).',cant:'.$cantFilas.'}';
}
}


mssql_close($link);
?>

Store:

var store = new Ext.data.Store({
id: 'store',
proxy: new Ext.data.HttpProxy({
url: 'search_legend.php', // File to connect to
method: 'POST'
}),
reader: new Ext.data.JsonReader({
// we tell the datastore where to get his data from
root: 'rows',
totalProperty: 'cant'
},[
{
name:'Art_Name',
type:'string',
mapping:'art_name'
},

{
name:'Real_Name',
type:'string',
mapping:'real_name'
},

{
name:'Birth_Date',
type:'date',
dateformat:'m/d/Y',
mapping:'birth_day'
},
{
name:'Birth_Country',
type:'string',
mapping:'birth_country'
},

{
name:'Birth_City',
type:'string',
mapping:'birth_city'
},

{
name:'Death_Date',
type:'date',
dateformat:'m/d/Y',
mapping:'death_day'
},
{
name:'Death_Country',
type:'string',
mapping:'death_country'
},

{
name:'Death_City',
type:'string',
mapping:'death_city'
},

{
name:'Death_Cause',
type:'string',
mapping:'death_cause'
},

{
name:'Age',
type:'int',
mapping:'age'
},
{
name:'Sex',
type:'string',
mapping:'sex'
},

{
name:'Skin_Color',
type:'string',
mapping:'skin_color'
},

{
name:'Top_500',
type:'string',
mapping:'top_500'
},

{
name:'Walk_Fame',
type:'string',
mapping:'walk_fame'
},
])
autoLoad:true
});

GridForm:

var gridForm = new Ext.FormPanel({
id: 'Result_legends',
frame: true,
labelAlign: 'left',
title: 'List',
bodyStyle:'padding:5px',
width: 785,
layout: 'column', // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: 'fit',
items:{
xtype: 'grid',
store: store,
heigth: 350,
title:'All legends found',
border: true,
enableColumnMove: false,
columns:[
{
id:'artname',
header: "Artistic Name",
width: 160,
sortable: true,
locked:false,
dataIndex: 'Art_Name'
},

{
header: "Birth Day",
width: 80,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'Birth_Date'
},

{
header: "Death Day",
width: 80,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'Death_Date'
},

{
header: "Age",
width: 65,
sortable: true,
dataIndex: 'Age'
},
]
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("Result_legends").getForm().loadRecord( rec);
}
}
}),
// autoExpandColumn: 'artname',

listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
} // Allow rows to be rendered.
}
},
{
columnWidth: 0.4,
(........)