PDA

View Full Version : How to search in the Grid



Asadjan
23 Jun 2010, 8:42 AM
Hello everyone,

I have been doing the grids in the last few days and I have managed it so far but I am simply not able to implement the search in the toolbar. I would appreciate if someone can send me some simple steps on how to implement the search in the Grid. Please help, thanks,
Asad

yagi
23 Jun 2010, 5:37 PM
Here is my code, you can try this :


newhid.core.eqplan.grid = Ext.extend(Ext.grid.GridPanel,{
constructor: function(config)
{
config = config || {};
config.id = config.id || 'site_grid';
config.title = config.title || 'Equipment Plan List';
config.ds = new newhid.core.eqplan.store();

config.columns = [
{header: "Site", width: 90, sortable:true, dataIndex:'sitename'},
{header: "Fleet", width: 90, sortable: true, dataIndex: 'idfleet'},
{header: "Prefix", width: 60, sortable: true, dataIndex: 'idprefix'},
{header: "Equipment Plan", width: 90, sortable: true, dataIndex: 'eqplan'},
{header: "Serial", width: 90, sortable: true, dataIndex: 'serialnumber'},
{header: "Customer", width: 150, sortable: true, dataIndex: 'customername'},
config.rowActions
];

config.bbar = config.bbar || new Ext.PagingToolbar({
pageSize: 20,
store: config.ds,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: 'No data display'
})

config.search = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
store: config.ds,
searchText:'Search',
minChars:2,
autoFocus:true,
mode:'remote',
position:'top',
paramNames:
{
fields:'fields',
query:'query'
},
//tbPosition: 15,

onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = config.ds;

// grid's store filter

// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});

// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}

// reload store
store.reload();



}

})
config.tbar=[
]

config.plugins = [config.rowActions, config.search];

config.viewConfig = {forceFit:true};
config.height = config.height || 200;
config.width = config.width || 500;
config.border = config.border || true;
config.deferredRender = true;
config.stripeRows = true;
config.loadMask = true;

newhid.core.eqplan.grid.superclass.constructor.call(this, config);
}
});

I'm using gridsearch plugin.

Actually, after creating an object of gridsearch and define all its config, don't forget to define the plugin you're using ( config.plugins = [config.search]; ).

Good Luck :)

Asadjan
24 Jun 2010, 6:20 AM
Dear Yagi,
Thanks a lot for the code steps, and I tried to change mine and implement the Search plugin somehow, but I could not do that. I put the plugin in various places and defined the object but it simply does not work.
Here is my code where I would like to put my code for search, If you or someone can help, would be very much appreciated.


Ext.ns('MyGrid');

// Create the Grid for Threat types
MyGrid.Grid =Ext.extend(Ext.grid.GridPanel,
{
initComponent:function()
{
enableColLock:false;
config =
{
store:new Ext.data.JsonStore(
{
totalProperty :'totalCount',
root :'rows',
url :'getMyGrid.php',
method :'GET',
fields :[
{name :'fileno',type:'numeric'},
{name :'repdate',type:'numeric'},
{name :'repName',type:'numeric'},
{name :'countryname',type:'numeric'}

]
}
)
,columns:[
{
header :'File No',
width :70,
sortable :true,
dataIndex :'fileno',
renderer :showDetails
},
{
header :'Country',
width :100,
sortable :true,
dataIndex :'countryname',

},
{
header :'Reporting Date',
width :80,
sortable :true,
dataIndex :'repdate',

},
{
header :'Repatriation Type',
width :100,
sortable :true,
dataIndex :'repName',

}
],

viewConfig:{forceFit:true}
};


function showDetails(value, p, record)
{
return String.format('<b><a href="./index.php?fileNum={0}">{0}</a></b>', value, record.data.forumtitle, record.id, record.data.fileno);
}
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

this.bbar = new Ext.PagingToolbar(
{
store :this.store,
pageSize :10,
displayInfo :true,
displayMsg :'Displaying results {0} - {1} of {2}',
emptyMsg :"No results to display"
}
);

// call parent
MyGrid.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function()
{
MyGrid.Grid.superclass.onRender.apply(this, arguments);
this.store.load({params:{start:0,limit:10}});
} // End of - function onRender
});
Ext.reg('myGrid2', MyGrid.Grid); //register the name space for the Grid

thank you

Asadjan
24 Jun 2010, 1:50 PM
I have managed to display the search input field in the paging toolbar, Now i am trying to figure out how to write the backend function in PHP to retrieve the records that match the words typed in the input fields. Would be great If someone can tell me. Thank you.

yagi
24 Jun 2010, 5:32 PM
Dear Yagi,
Thanks a lot for the code steps, and I tried to change mine and implement the Search plugin somehow, but I could not do that. I put the plugin in various places and defined the object but it simply does not work.
Here is my code where I would like to put my code for search, If you or someone can help, would be very much appreciated.


Ext.ns('MyGrid');

// Create the Grid for Threat types
MyGrid.Grid =Ext.extend(Ext.grid.GridPanel,
{
initComponent:function()
{
enableColLock:false;
config =
{
store:new Ext.data.JsonStore(
{
totalProperty :'totalCount',
root :'rows',
url :'getMyGrid.php',
method :'GET',
fields :[
{name :'fileno',type:'numeric'},
{name :'repdate',type:'numeric'},
{name :'repName',type:'numeric'},
{name :'countryname',type:'numeric'}

]
}
)
,columns:[
{
header :'File No',
width :70,
sortable :true,
dataIndex :'fileno',
renderer :showDetails
},
{
header :'Country',
width :100,
sortable :true,
dataIndex :'countryname',

},
{
header :'Reporting Date',
width :80,
sortable :true,
dataIndex :'repdate',

},
{
header :'Repatriation Type',
width :100,
sortable :true,
dataIndex :'repName',

}
],

viewConfig:{forceFit:true}
};


function showDetails(value, p, record)
{
return String.format('<b><a href="./index.php?fileNum={0}">{0}</a></b>', value, record.data.forumtitle, record.id, record.data.fileno);
}
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

this.bbar = new Ext.PagingToolbar(
{
store :this.store,
pageSize :10,
displayInfo :true,
displayMsg :'Displaying results {0} - {1} of {2}',
emptyMsg :"No results to display"
}
);

// call parent
MyGrid.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function()
{
MyGrid.Grid.superclass.onRender.apply(this, arguments);
this.store.load({params:{start:0,limit:10}});
} // End of - function onRender
});
Ext.reg('myGrid2', MyGrid.Grid); //register the name space for the Grid
thank you

Hmmm..., Actually I've never tried code like you have before.
Have you tried this?


config=
{
search :
new Ext.ux.grid.Search({
iconCls:'icon-zoom',
store: config.ds,
searchText:'Search',
minChars:2,
autoFocus:true,
mode:'remote',
position:'top',
paramNames:
{
fields:'fields',
query:'query'
},
//tbPosition: 15,

onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = config.ds;

// grid's store filter

// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});

// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}

// reload store
store.reload();



}
,tbar:[]
,plugins : [config.search];
})


}

yagi
24 Jun 2010, 5:52 PM
I have managed to display the search input field in the paging toolbar, Now i am trying to figure out how to write the backend function in PHP to retrieve the records that match the words typed in the input fields. Would be great If someone can tell me. Thank you.

I'm using codeigniter for my web.
Here is my function in controller code :


function getData()
{
$limit = ($this->input->post('limit'))? $this->input->post('limit'):10;
$start = ($this->input->post('start'))? $this->input->post('start'):0;

$query = $this->input->post('query');
$fields = $this->input->post('fields');

$query = $this->Mvims_comp_group->get_data($limit, $start, $query, $fields);
$total = $query['num_rows'] ;
$rowData = array("total"=>$total);
if($total > 0)
{
foreach($query['result'] as $row)
{
$rowData['rows'][] = array(
'comp_id'=>$row['component_management_id']
, 'idsite'=>$row['idsite']
, 'idfleet'=>$row['idfleet']
, 'idprefix'=>$row['idprefix']
, 'component_code'=>$row['component_code']
, 'idmodifier'=>$row['idmodifier']
, 'order_index'=>$row['order_index']
);
}
}
else
{
$rowData['rows'] = "";
}
echo json_encode($rowData);
}


This is the model :


function get_data($limit, $start, $query, $fields)
{
if($query)
{
$fields = str_replace("[","",$fields);
$fields = str_replace("]","",$fields);
$fields = str_replace("\"","",$fields);
$fields = explode(",",$fields);
$search = array();
foreach ($fields as $fd)
{
//$fd = ($fd == 'idsite') ? "tblprefix.idsite" : $fd;
$search[$fd] = $query;
}

$data['num_rows'] = $this->db->count_all_results('tblcomponent_management');
$this->db->select('*');
$this->db->from('tblcomponent_management');
$this->db->limit($limit,$start);
$this->db->or_like($search);
$query = $this->db->get();
$data['result'] = $query->result_array();
return ($query->num_rows() > 0) ? $data : FALSE;
}
else
{
$data['num_rows'] = $this->db->count_all_results('tblcomponent_management');

$this->db->select('*');
$this->db->from('tblcomponent_management');
$this->db->limit($limit,$start);
$query = $this->db->get();
$data['result'] = $query->result_array();
return ($query->num_rows() > 0) ? $data : FALSE;
}
}


If you're using Native PHP, don't worry because the logic is the same.
Actually gridsearch plugin will post 2 parameters to the controller, they are fields and query. That's why in my controller, I create 2 variables to get the parameter and send them to the model.

yagi
25 Jun 2010, 1:01 AM
I have managed to display the search input field in the paging toolbar, Now i am trying to figure out how to write the backend function in PHP to retrieve the records that match the words typed in the input fields. Would be great If someone can tell me. Thank you.

I'm using codeigniter for my web. You can refer to my code because the logic is the same with native PHP (If you're using native PHP). Here is my code : controller
function getData() { $limit = ($this->input->post('limit'))? $this->input->post('limit'):10; $start = ($this->input->post('start'))? $this->input->post('start'):0; $query = $this->input->post('query'); $fields = $this->input->post('fields'); $query = $this->Mvims_comp_group->get_data($limit, $start, $query, $fields); $total = $query['num_rows'] ; $rowData = array("total"=>$total); if($total > 0) { foreach($query['result'] as $row) { $rowData['rows'][] = array( 'comp_id'=>$row['component_management_id'] , 'idsite'=>$row['idsite'] , 'idfleet'=>$row['idfleet'] , 'idprefix'=>$row['idprefix'] , 'component_code'=>$row['component_code'] , 'idmodifier'=>$row['idmodifier'] , 'order_index'=>$row['order_index'] ); } } else { $rowData['rows'] = ""; } echo json_encode($rowData); } Model
function get_data($limit, $start, $query, $fields) { if($query) { $fields = str_replace("[","",$fields); $fields = str_replace("]","",$fields); $fields = str_replace("\"","",$fields); $fields = explode(",",$fields); $search = array(); foreach ($fields as $fd) { //$fd = ($fd == 'idsite') ? "tblprefix.idsite" : $fd; $search[$fd] = $query; } $data['num_rows'] = $this->db->count_all_results('tblcomponent_management'); $this->db->select('*'); $this->db->from('tblcomponent_management'); $this->db->limit($limit,$start); $this->db->or_like($search); $query = $this->db->get(); $data['result'] = $query->result_array(); return ($query->num_rows() > 0) ? $data : FALSE; } else { $data['num_rows'] = $this->db->count_all_results('tblcomponent_management'); $this->db->select('*'); $this->db->from('tblcomponent_management'); $this->db->limit($limit,$start); $query = $this->db->get(); $data['result'] = $query->result_array(); return ($query->num_rows() > 0) ? $data : FALSE; } } Good Luck ..

yagi
25 Jun 2010, 1:04 AM
I have managed to display the search input field in the paging toolbar, Now i am trying to figure out how to write the backend function in PHP to retrieve the records that match the words typed in the input fields. Would be great If someone can tell me. Thank you. I'm using codeigniter for my web. You can refer to my code because the logic is the same with native PHP (If you're using native PHP). Here is my code : controller
function getData() { $limit = ($this->input->post('limit'))? $this->input->post('limit'):10; $start = ($this->input->post('start'))? $this->input->post('start'):0; $query = $this->input->post('query'); $fields = $this->input->post('fields'); $query = $this->Mvims_comp_group->get_data($limit, $start, $query, $fields); $total = $query['num_rows'] ; $rowData = array("total"=>$total); if($total > 0) { foreach($query['result'] as $row) { $rowData['rows'][] = array( 'comp_id'=>$row['component_management_id'] , 'idsite'=>$row['idsite'] , 'idfleet'=>$row['idfleet'] , 'idprefix'=>$row['idprefix'] , 'component_code'=>$row['component_code'] , 'idmodifier'=>$row['idmodifier'] , 'order_index'=>$row['order_index'] ); } } else { $rowData['rows'] = ""; } echo json_encode($rowData); } Model :
function get_data($limit, $start, $query, $fields) { if($query) { $fields = str_replace("[","",$fields); $fields = str_replace("]","",$fields); $fields = str_replace("\"","",$fields); $fields = explode(",",$fields); $search = array(); foreach ($fields as $fd) { //$fd = ($fd == 'idsite') ? "tblprefix.idsite" : $fd; $search[$fd] = $query; } $data['num_rows'] = $this->db->count_all_results('tblcomponent_management'); $this->db->select('*'); $this->db->from('tblcomponent_management'); $this->db->limit($limit,$start); $this->db->or_like($search); $query = $this->db->get(); $data['result'] = $query->result_array(); return ($query->num_rows() > 0) ? $data : FALSE; } else { $data['num_rows'] = $this->db->count_all_results('tblcomponent_management'); $this->db->select('*'); $this->db->from('tblcomponent_management'); $this->db->limit($limit,$start); $query = $this->db->get(); $data['result'] = $query->result_array(); return ($query->num_rows() > 0) ? $data : FALSE; } } Good Luck

Asadjan
25 Jun 2010, 3:04 AM
Dear Yagi,

Thank you so much for your prompt answer. After a lot of reading I have managed to put the search grid in the bottom toolbar . its working now and I can search for the input characters. The only thing I am trying to change is to put it before the paging info in the bbar because it is displayed at the right of bbar. I would appreciate If you can help somehow.

Grazie Mil,

yagi
27 Jun 2010, 6:44 PM
Dear Yagi,

Thank you so much for your prompt answer. After a lot of reading I have managed to put the search grid in the bottom toolbar . its working now and I can search for the input characters. The only thing I am trying to change is to put it before the paging info in the bbar because it is displayed at the right of bbar. I would appreciate If you can help somehow.

Grazie Mil,

You can set it in its config : position:'bottom'