PDA

View Full Version : How to display data into a grid using a submit button?



reyes831107
9 Aug 2011, 7:23 AM
Hi, Im a cuban boy, and Im beginning to use Ext JS 3.x. I have a problem. I created a search form, it has three buttons: Search, Reset and Cancel. When I press the button Search, the page must display a grid with all data that match the text written at textfield. I really appreciate your help, and I dont know wheres the error is. I show you the codes now:

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,
(........)

bkraut
26 Aug 2011, 6:22 AM
If you would like to do that the best way is to handle all the actions through listeners on the buttons.

Let say, you click the button - on onClick click event you read the value from the search form field. Now you have to set the url of the store and then reload the store with specified parameters.