PDA

View Full Version : Grid Search Plugin



Pages : 1 2 3 [4] 5

atutus
1 Mar 2010, 3:40 AM
Hi again,

I changed the line
this.field = new Ext.form.TwinTriggerField...
into
this.field = new Ext.form.ComboBox(...
with the necessary properties

and added onSelect instead of onKeyUp event
this.field.el.on({scope:this, buffer:300, select:this.onSelect});

the code is not fully completed but it worked for me

can you theoretically confirm it? thanks

jsakalos
1 Mar 2010, 8:03 AM
If it works for you it is good for you, right? I will not support combo in Search plugin though, as it breaks the design principles. So, working === fine, however, with the combo, you are on your own.

abraxxa
2 Mar 2010, 1:42 AM
Hi Saki!

After upgrading to extjs 3.1.1 i've encountered the problem that my fields params mangling in beforeload stopped working.
I've just found out that your plugin doesn't set the params but the baseParams which are merged after beforeload since 3.1.1 (for whatever reason).
Why do you not populate the params but change the baseParams?

jsakalos
2 Mar 2010, 2:06 AM
Well, you can try to set params instead of baseParams, that could work too.

abraxxa
2 Mar 2010, 2:12 AM
The problem is that beginning with 3.1.1 you can't alter the baseParams in the beforeload event which makes mangling them impossible.
I don't want to build my own grid search plugin version based on yours so my question is if you can change your code to populate params instead of baseParams?

jsakalos
2 Mar 2010, 2:21 AM
It's a kind of mystery: Why you cannot change baseParams in beforeload? Are they ignored? Maybe it's a simple cause. Anyway, I'm working on new site for Ext addons and on official ports of my extensions to Ext 3.x, if you can wait a month or so. Search plugin will come as one of the first.

abraxxa
2 Mar 2010, 2:24 AM
ExtJS changed:

3.1.0:


if (action === 'read') {
Ext.applyIf(options.params, this.baseParams);
doRequest = this.fireEvent('beforeload', this, options);
}



3.1.1:


if (action === 'read') {
doRequest = this.fireEvent('beforeload', this, options);
Ext.applyIf(options.params, this.baseParams);
}

jsakalos
2 Mar 2010, 2:30 AM
I see. Isn't that a bug? Maybe the devel team could explain rationale behind that.

jsakalos
2 Mar 2010, 2:33 AM
As a workaround, you could run line:


Ext.applyIf(options.params, this.baseParams);
at the beginning of beforeload event handler.

abraxxa
2 Mar 2010, 2:33 AM
The changelog http://www.extjs.com/products/extjs/CHANGES_ext-3.1.1.html (http://www.extjs.com/forum/../products/extjs/CHANGES_ext-3.1.1.html) mentions it (search for beforeload) but doesn't state why.
I assume they wanted to make sure that baseParams are never changes, only overwritten by params.
I've already changed your code to use params, should i post it?

jsakalos
2 Mar 2010, 2:35 AM
For me it's not necessary, the change seems quite trivial, maybe for others. What's important is if you tested it and if it works w/o any side effects.

jsakalos
2 Mar 2010, 2:38 AM
Now I remember why I put it to baseParams. Search plugin doesn't listen to beforeload event so if I changed only params and then sorted the grid I got all, unfiltered, records. Test please the situation when something else but Search plugin (re)loads the grid.

abraxxa
2 Mar 2010, 2:38 AM
I've already encountered the first 'side effect', when clicking on the next page button the search params are discarded.
Did you use baseParams instead of params to solve this problem?

abraxxa
2 Mar 2010, 2:46 AM
As a workaround, you could run line:


Ext.applyIf(options.params, this.baseParams);
at the beginning of beforeload event handler.

You're a genius!
Looking at a problem for hours makes you (me) blind.
Of course i can access store.baseParams in my beforeload function and mangle them instead of options.params.

THANKS Saki!
You've just unlocked beer #3 when visting Vienna. ~o)

jsakalos
2 Mar 2010, 3:38 AM
I'm in Vienna every week, however, I don't drink bear ;).

abraxxa
2 Mar 2010, 4:26 AM
Drinking a bear will be hard :D but why not a beer?
What are you doing in Vienna?

luke82
2 Mar 2010, 11:25 PM
Hi, thank you for this great plugin, I am newbie in EXT. Is there anybody who have done an mysql background for this plugin? Please help :) I spent all day on this.

jsakalos
3 Mar 2010, 1:23 AM
There is SQlite backend on the demo page; it can give you ideas.

luke82
3 Mar 2010, 1:33 AM
There is SQlite backend on the demo page; it can give you ideas.

Thank you for your quick reply... I read your code and all articles in this topic, but without success...

jsakalos
3 Mar 2010, 1:39 AM
I read your code and all articles in this topic, but without success...

What kind of help are you looking for?

luke82
3 Mar 2010, 7:27 AM
What kind of help are you looking for?

Same, what you have in sqlite, but in mysql... I know, its funny (:|

jsakalos
3 Mar 2010, 8:10 AM
Look, this is javascript (client-side) forum so you hardly get any mysql help here. You have 2 options: 1) study, understand and do it, 2) find somebody that will do it for you. As to mysql, you need to consult another forum, whatever option you choose.

yeyepot
19 Mar 2010, 2:18 AM
I have a panel that contains a grid in which I applied the Ext.ux.grid.Search plugin.
Whenever I close this panel and destroy the grid (w/c is an xtype) and reopen the panel, the search filter field is empty however still returns filtered store with the previous query parameter values.
how do I make sure that I destroy the search plugin?

jsakalos
19 Mar 2010, 10:42 AM
That shouldn't happen. Can you post a showcase so I can test it?

daiei27
1 Apr 2010, 8:30 AM
FYI, I took the Search.js being used by the demo and kept getting a "Ext.ux.grid.Search is not a constructor" error. After another post in this thread hinted at it, I grabbed the .js file from the latest stable zip file from the demo page and it worked fine.

Now I gotta figure out if I can get it to play nice with the GridFilter plugin... Silly, I know. :)

daiei27
1 Apr 2010, 8:41 AM
Hmm... I can't seem to get the search to filter the results (locally).

All I did was add the demo code to the plugins field for the GridPanel.


new Ext.ux.grid.Search({
iconCls:'icon-zoom'
//,readonlyIndexes:['note']
//,disableIndexes:['pctChange']
,minChars:2
,autoFocus:true
// ,menuStyle:'radio'
})
I'm already using the GridFilter and RowExpander plugins. I also have a paging toolbar tied to the JSON store with remote paging implemented. The GridFilter doesn't have any problems filtering the data locally.

I wanted to add the Search plugin as a bonus quick search. I assumed GridFilter and Search could operate independently, but I wonder if it is preventing the Search plugin from filtering.

Any ideas why it doesn't do anything?

jsakalos
1 Apr 2010, 9:13 AM
Locally? I've never tried it. The plugin in meant for server filtering.

daiei27
1 Apr 2010, 12:48 PM
This example is configured to use local filtering (mode:'local') but remote mode, when serching itself is done by the server, is also possible.
Oh, this quote from the first post made it sound like it would search the local data store, which it appears to do in your example (which is WONDERFUL btw!).

jsakalos
1 Apr 2010, 1:38 PM
So if the example does it, download the example and mimic it at your site. I haven't used the local mode that long that I've forgotten that it even exists. BTW, I'm very much opposed to loading all records from the server and doing anything with them locally. The main reason is that if your database has now 100 records it can very easily and fast grow up to 100,000 records rendering the application unusable.

kenja
9 Apr 2010, 8:39 AM
Thanks for the great plugin! I'm using it extensively throughout my site and it is awesome.

I've got one question, though. I want the ability to search fields that are not show in the grid. My data store has 10 fields, but only five are declared as visible in my ColumnModel. It appears that the grid defaults to only searching the visible fields. Is there a way to add the hidden fields to the search plugin as well?

jsakalos
9 Apr 2010, 10:16 AM
Technically it is possible but I consider it extremely confusing to user so I intentionally dropped it.

kenja
9 Apr 2010, 11:03 AM
Actually, it seems to be working. All I had to do was add the "header:" field to the hidden fields in the column model and now they show up in the search list. Problem solved!

jsakalos
9 Apr 2010, 12:01 PM
Yes, that is the trick that can be used, anyway, I still think that users shouldn't be able to search in hidden columns due to usability reasons.

Spongerusher
19 Apr 2010, 7:10 AM
Hello
Thanks a lot for this plugin

I have a question, is it possible to instanciate this object using xtype ?

If not, why ?

jsakalos
19 Apr 2010, 8:27 AM
Not xtype but ptype, in Ext 3.x.

barser
21 Apr 2010, 3:41 AM
Someone already asked about it, but there was no answer...
Plugin works fine except the fact that "Clear Button" useless. When I click on it there is no effect. If I press Esc, the text in input field deleted. And I expect similar behavior when I click on that button. But it isn't. (extjs 3.1.1 + gridsearch 1.1)

Any suggestions?
By the way, can I just hide that button?

jsakalos
21 Apr 2010, 3:53 AM
Clear button works - make sure you're using the latest version of GridSearch.

barser
21 Apr 2010, 4:11 AM
Hmm....
There is a difference between development version and 1.1:


//,onTrigger1Click:this.minChars ? Ext.emptyFn : this.onTriggerClear.createDelegate(this)
,onTrigger1Click: this.onTriggerClear.createDelegate(this)The commented string is from 1.1. As soon as I replaced it, all begin to work.

alexpotemkin
29 Apr 2010, 12:38 PM
Good day. Try use your plugin, but plugin not working in my implementation. Please help solve this problem.
store code


var regionsDataReader = new Ext.data.JsonReader({root: 'results'},regionsDataRecord);

var regionsDataProxy = new Ext.data.HttpProxy({url: 'backend/js_listRegions', method: 'POST'});

var regionsDataStore = new Ext.data.Store({
proxy: regionsDataProxy,
reader: regionsDataReader
});


plugin in grid, code


plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:3,
autoFocus:true
})]


input data in search text box, no reaction
text in ciryllic
try clear field (right button), not working also

jsakalos
29 Apr 2010, 12:45 PM
The best is if you take the example, make it working in your environment, and then you modify it to suit your needs.

LostSoul
29 Apr 2010, 12:50 PM
your store

var regionsDataReader = new Ext.data.JsonReader({root: 'results'},regionsDataRecord);

var regionsDataProxy = new Ext.data.HttpProxy({url: 'backend/js_listRegions', method: 'POST'});

var regionsDataStore = new Ext.data.Store({
proxy: regionsDataProxy,
reader: regionsDataReader
});your code


plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:3,
autoFocus:true
})]my additions


plugins:new Ext.ux.grid.Search({
store: regionsDataStore,
id: 'searchPanel',
iconCls:'icon-zoom',
minChars:3,
autoFocus:true
})try adding the store and the id to your plugin, also i don't think the [] around it is needed

jsakalos
29 Apr 2010, 1:32 PM
Sorry, I do not have enough time to debug your application. I don't think that it's a problem in the Search plugin so my advice from the above code still applies. Make the example running in your environment (w/o any change), then change something to see when it stops working. Do it in small steps.

LostSoul
29 Apr 2010, 1:34 PM
jack not sure if that reply was at me, I was posting trying to help the guy that posted before you. sry if there was confusion

jsakalos
29 Apr 2010, 2:48 PM
No problem - sorry if I haven't noticed that - I have too many posts to answer. ;)

Vepe
5 May 2010, 6:42 AM
Great plugin!!!! Really what I needed =D!

But...(there is always one XD)

You use regular expressions to search, so... if I want to search for a special character like | or * I have to use \|, \* =P
Not a big deal, but it is something that I noticed

Put this at the doc =D!

jsakalos
5 May 2010, 6:45 AM
That depends on server side; how it handles special characters.

Vepe
6 May 2010, 7:43 AM
ops! =P... true story XD

Thanks =D

Rbn_3d
21 May 2010, 12:33 AM
Hi, I have a problem, the search reloads the store, but whitout any changes.

The search are remote, and it´s managed fron php. I know the final query works, because it´s writed in a log and works in phpmyadmin.

I have this code on grid.js:



var store_entrada = new Ext.data.JsonStore({
id: 'store',
totalProperty: 'results',
proxy: new Ext.data.HttpProxy({
url: 'ext/json_entrada.php',
method: 'POST'}),
autoLoad:true,
remoteSort:true,
root: 'rows',
fields: [
{name:'id'},
{name:'fecha_entrada'},
{name:'no_orden_entrada'},
{name:'year'},
{name:'procedencia'},
{name:'remitente'},
{name:'clase_doc'},
{name:'extracto'},
{name:'observaciones'},
{name:'url'}
],
});


// Pagging toolbar para el grid (Entrada), para cargar solo los registros necesarios al trabajar con gran cantidad de datos...
var paging_entrada = new Ext.PagingToolbar({
pageSize: 100,
store: store_entrada,
displayInfo: true,
displayMsg: 'Mostrando de {0} a {1}, ({2} en total)',
emptyMsg: "No hay resultados",
beforePageText:"Pagina",
afterPageText:"de {0}",
firstText:"Primera pag.",
prevText:"Anterior",
nextText:"Siguiente",
lastText:"Ultima",
refreshText:"Refrescar"
});

// create the Grid
var grid_entrada = new Ext.grid.GridPanel({
store: store_entrada,
columns: [
{id:'id',header: 'ID', width: 20, sortable: true, dataIndex: 'id'},
{header: 'Fecha de entrada', width: 85, sortable: true, dataIndex: 'fecha_entrada'},
{header: 'Orden de entrada', width: 85, sortable: true, dataIndex: 'no_orden_entrada'},
{header: 'Year', width: 85, sortable: true, dataIndex: 'year'},
{header: 'Procedencia', width: 85, sortable: true, dataIndex: 'procedencia'},
{header: 'Remitente', width: 85, sortable: true, dataIndex: 'remitente'},
{header: 'Clase Documento', width: 85, sortable: true, dataIndex: 'clase_doc'},
{header: 'Extracto', width: 85, sortable: true, dataIndex: 'extracto'},
{header: 'Observaciones', width: 85, sortable: true, dataIndex: 'observaciones'},
{header: 'Descarga', width: 85, sortable: true, dataIndex: 'url'}
],
stripeRows: true,
autoExpandColumn: 'id',
height: 305,
width: 715,
title: 'Entrada: Todos los registros',
// config options for stateful behavior
stateful: true,
stateId: 'grid',
bbar: paging_entrada,
plugins: [new Ext.ux.grid.Search({
iconCls:'icon-zoom',
readonlyIndexes:['note'],
disableIndexes:['pctChange'],
minChars:3,
autoFocus:true,
searchText: 'Buscar',
mode: 'remote',
dateFormat: 'd m Y H:i',
position: 'bottom'
})]
});


This is the php-json that's handle the store:



<?php
//header('Content-type: application/json'); // this is the magic that sets responseJSON

// Connecting, selecting database
$link = mysql_connect("localhost", "root", "")
or die('Could not connect: ' . mysql_error());
mysql_select_db("registros") or die('Could not select database');

//Codigo para obtener nombre y valor de todas las variables que llegan por $_REQUEST y guardarlo en un .log


$file = "json_log.txt";
$fh = fopen($file, 'w') or die("can't open file");

fwrite($fh, "Contenido de ".'$_REQUEST'.":\n\n");

foreach ($_REQUEST as $key => $value)
{
$write = "$key = $value \n";
fwrite($fh, $write);
}


fclose($fh);





// Paginacion (LIMIT)

if ((isset($_REQUEST['limit'])) && (isset($_POST['start'])))
{
$limit = $_REQUEST['limit'];
$start = $_REQUEST['start'];
$limitClause = "LIMIT $start,$limit ";
}
else
{
$limitClause = "LIMIT 0,100 ";
}

// Ordenación remota (Al no estar presentes todos los registros en el grid, (por la paginacion), necesitamos que cada peticion de ordenar del grid sea gestionada por el lado servidor(ORDER BY))

if ((isset($_REQUEST['sort'])) && (isset($_POST['dir'])))
{
$sort = $_REQUEST['sort'];
$dir = $_REQUEST['dir'];
$orderClause = "ORDER BY $sort $dir ";
}
else
{
$orderClause = "ORDER BY fecha_entrada DESC ";
}

// Crear WHERE a partir de $_REQUEST["fields"] y $_REQUEST["query"], enviados por el plugin de busquedas del datagrid.

if ((isset($_REQUEST['fields'])) && (isset($_POST['query'])))
{
$campos = $_REQUEST['fields'];
$criterios = $_REQUEST['query'];

$campos = addslashes($campos);

$prewhere = explode('\",\"', $campos);


//escribir $prewhere en el log (debug).
$fh1 = fopen("json_log.txt", 'a') or die("can't open file");

fwrite($fh1, "\n\nContenido de ".'$prewhere'.":\n\n");

for ($i=0;$i<=count($prewhere);$i++)
{
if($i==0)
$prewhere[$i]=substr($prewhere[0], 3);

if($i==(count($prewhere)-1))
$prewhere[$i]=substr($prewhere[$i], 0,-3);

$write1 = $prewhere[$i]."\n";
fwrite($fh1, $write1);
}
fclose($fh1);

$where=implode(' LIKE '."'%$criterios%'".' OR '.'', $prewhere);

$whereClause='WHERE '.$where.' LIKE '."'%$criterios%'".' ';

}
else
{
$whereClause = "";
}

$count_query = "SELECT COUNT(*) FROM entrada as count";
$result_count= mysql_query($count_query);


while($fetch_count = mysql_fetch_array($result_count, MYSQL_NUM))
{
$count = $fetch_count[0];
}


$query="SELECT * FROM entrada ".$whereClause.$orderClause.$limitClause;

//Escribimos la consulta final en el log.
$fh2 = fopen("json_log.txt", 'a') or die("can't open file");

fwrite($fh2, "\n\n Consulta final: \n\n");

$write2 = $query."\n\n".mysql_error();
fwrite($fh2, $write2);

fclose($fh2);


// Performing SQL query
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
$all_recs = array();

while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
$all_recs[] = $line;
}


echo "{ 'results': $count, 'rows': ".json_encode($all_recs)."}";



// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link);
?>




Probably the problem are in my javascript code, because I know the query works...

Other ploblem is: I only view the reset button, and not the search one, but pressing enter it reloads the store, without changes.

Thanks.

jsakalos
21 May 2010, 4:04 AM
If fields and query are sent to the server correctly then it must be server-side problem.

Rbn_3d
22 May 2010, 8:54 AM
I'm testing it: now the php writes in a log the json response, and it´s ok (returns the results of the search ok), so:

Can be a problem with JSON syntax (success or message property... etc)

or

Can be a problem in my javascript code (I think the ploblem are here)

Here are my log when I try to search "Fax"




$_REQUEST content:

sort = year
dir = ASC
fields = ["id","fecha_entrada","no_orden_entrada","year","procedencia","remitente","clase_doc","extracto","observaciones","url"]
query = Fax


Final query:

SELECT * FROM entrada WHERE id LIKE '%Fax%' OR fecha_entrada LIKE '%Fax%' OR no_orden_entrada LIKE '%Fax%' OR year LIKE '%Fax%' OR procedencia LIKE '%Fax%' OR remitente LIKE '%Fax%' OR clase_doc LIKE '%Fax%' OR extracto LIKE '%Fax%' OR observaciones LIKE '%Fax%' OR url LIKE '%Fax%' ORDER BY year ASC LIMIT 0,100



FINAL JSON:

({'success': true, 'results': 2, 'rows': [{"id":"13","fecha_entrada":"2010-05-21","no_orden_entrada":"744","year":"0000","procedencia":"Andalucia","remitente":"Malaga","clase_doc":"Fax","extracto":"Pruebaaaa","observaciones":"Jaaaaaaaa","url":null},{"id":"14","fecha_entrada":"2010-05-21","no_orden_entrada":"45","year":"0000","procedencia":"etyh","remitente":"","clase_doc":"Fax","extracto":"djghjfgj","observaciones":"fgjfjhgcj","url":null}]})


returns 2 rows, like in phpmyadmin using the same query, so it´s not a server side problem.

jsakalos
22 May 2010, 10:14 AM
It is impossible for me even to guess what is the problem. The general advice is: Analyze the example as to data what is sent between client and server. The example works so your application must be different.

Just from the code above: Your json is invalid: quotes must be double " not single '.

hotdesc
25 May 2010, 9:58 AM
if you add a tab, the grid (with search) shows up in new tab

jsakalos
25 May 2010, 10:20 AM
How does this relate to the plugin?

hotdesc
25 May 2010, 10:29 AM
If I remove the plugin, I open a new tab and appears only content that should appear.

If I enable (again) the plugin When open a new tab in addition to new content appears the grid which should be in previous tab


SECOND TAB

http://www.google.com.br/images/cleardot.gif

http://i48.tinypic.com/nq2wk4.jpg


FIRST TAB

http://i46.tinypic.com/2lk8s9i.jpg

jsakalos
25 May 2010, 10:40 AM
Check for duplicate ids and check if you use latest (devel) version of the plugin.

hotdesc
25 May 2010, 11:11 AM
Check for duplicate ids and check if you use latest (devel) version of the plugin.

same problem using the devel version...

about ids: if I remove the plugin everything works perfectly, if the problem were "duplicate id" should the same problem without the plugin?

but I checked the IDs and they are different



Ext.ns('Balian');
function createGrid(gridId, gridStore, gridColumns, gridAction, gridSearch){
Balian.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent:function() {
Ext.apply(this, {
id:gridId,
store:gridStore,
columns:gridColumns,
stripeRows: true,
autoHeight: true,
loadMask:true,
viewConfig: {
forceFit: true,
emptyText: '<center>Sem registros para exibir</center>'
},
plugins: new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:1,
align: 'right',
disableIndexes: gridSearch
}),
action: gridAction,
tbar: {
text: 'Other Grid',
tooltip:'Cadastrar Curso',
iconCls:'icon-cad',
handler: function(){ anotherTab(); }
}
});
this.action.on({
action:function(grid, record, action, row, col) {
window[action](record.data);
}
});
Balian.Grid.superclass.initComponent.apply(this, arguments);
}
,onRender:function() {
Balian.Grid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg(gridId, Balian.Grid);
}

First Grid (search)


createGrid('gridCurso', storesCurso, columnsCurso, actionCurso, ['ID_PROJETO']);
Second Grid ///// tbar handler anotherTab()


function anotherTab(data)
{
var tabs = Ext.getCmp('tabsIdCurso');
createGrid('gridCursoDivisao', storeCursoDivisao, columnsCursoDivisao, actionCursoDivisao, false);
tabs.add({
xtype:'gridCursoDivisao',
title:'Curso: '+data.DS_CURSO,
closable:true
}).show();
}




Panel and TABPANEL




Ext.onReady(function() {
Ext.QuickTips.init();
var tabsCursoItems = [{contentEl:'gridCurso', xtype:'gridCurso', title: 'Listagem: Curso'}];
var cursoItems = [{contentEl:'divCurso', title:'Cursos'}];
var panel = new Ext.Panel({
defaults: {frame:true, width:742, autoHeight: true},
items: cursoItems
});
var tabs = new Ext.TabPanel({
renderTo: 'tabsIdCurso',
id: 'tabsCurso',
deferredRender: false,
activeTab:0,
autoWidth:true,
autoHeight:true,
items:tabsCursoItems,
defaults: {autoScroll:true},
enableTabScroll:true
});
});

jsakalos
25 May 2010, 11:14 AM
The way you extend is not fully correct. See http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/ all three parts.

hotdesc
25 May 2010, 11:24 AM
The way you extend is not fully correct. See http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/ all three parts.

problem solved, thanks!!!!!!!!!!!!

rameshkt
27 May 2010, 8:47 PM
Hello Saki,

Can you please update on the new multi search plugin please ?. I have tried to use your grid search plugin and extend it but have not succeeded much. Your snapshot of the plugin in FaceBook looks much more promising.

Regards.

Ramesh

jsakalos
28 May 2010, 4:16 PM
It's working quite well locally and I will release it together with the new site for Ext addons and examples. Stay tuned.

rameshkt
28 May 2010, 8:35 PM
Thank you.

jeroen_syntux
1 Jun 2010, 6:09 AM
Hey Jsakalos,

I installed ext JS with the search plugin and found that the clear button wouldnt reset the search field.
After some debugging i found that if you set "minChars" so the search starts when typing the reset button does not work. I'm also using the local mode.

I found the following code in the plugin:


this.field = new Ext.form.TwinTriggerField({
width:this.width
,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
,trigger1Class:'x-form-clear-trigger'
,trigger2Class:this.minChars ? 'x-hidden' : 'x-form-search-trigger'
,onTrigger1Click:this.minChars ? Ext.emptyFn : this.onTriggerClear.createDelegate(this)
,onTrigger2Click:this.onTriggerSearch.createDelegate(this)
,minLength:this.minLength
});


Basically it says that if you set the "minChars" param, the clear trigger gets filled with an empty function. Any reason to do this like this? I could easilly change it, but I thought it might be a bug?

Regards,

Jeroen

jsakalos
1 Jun 2010, 10:15 AM
Are you sure you are using the last (devel) version of Search plugin?

jeroen_syntux
3 Jun 2010, 12:07 AM
Hey jsakalos,

I am pretty sure I am using the newest version. I got mine from http://gridsearch.extjs.eu/. I do see the same line of code in there as well.

Regards,

Jeroen

jsakalos
3 Jun 2010, 2:25 AM
Latest version means development version. Check the clear trigger behavior at http://gridsearch.extjs.eu and download the devel version.

wemerson.januario
3 Jun 2010, 10:31 AM
The best of yours ux!

tumbochka
28 Jun 2010, 10:54 AM
Hi, Jsakalos,
I use your Ext.ux.grid.Search plugin in a number of grids. Inicialization string looks like this:

plugins.push(new Ext.ux.grid.Search({
width:200,
checkIndexes:this.checkIndexes,
minChars:3,
position:'bottom'
and runs for each grid.
Then I choose a tab with a grid and make search (search is server-sided). Search works.
http://gyazo.com/4ef25d471066e1ae01a967e2843349ec.png
(sorry, there's a Russian language in screenshot, but you can see that I entered "fap" in the search field and we can see entry Fap, and Firebug shows a correct request to server at the bottom).
Then I choose another tab with another grid, but it loads incorrectly. It takes search paramethers from the first grid and shows only elements which corresponds the search string.
http://gyazo.com/9c195cba77479265e4d74d436a6a761d.png
You can see it on the screenshot. Search field is empty, but it searches with the search paramether of the first grid.
How can I solve this problem?
Sorry for my poor English.
Thank you.

jsakalos
28 Jun 2010, 3:37 PM
There must be a same instance of something, either of the grid store or of the search plugin.

tumbochka
28 Jun 2010, 8:09 PM
Different instances (I even gave them different IDs to check).

jsakalos
28 Jun 2010, 11:17 PM
There is only one other thing to check: Do you have latesest, development version of the plugin? If you do and the problem still persists, keep searching for same instances of something.

tumbochka
29 Jun 2010, 12:04 PM
I've found and fixed the problem. It was very strange, but several instances of stores used same instance of baseParams.
Thank you for the excellent plugin and for the tip!

jsakalos
29 Jun 2010, 12:36 PM
Yes, it can happen. I'm glad you solved it.

asafm
4 Jul 2010, 9:25 AM
In Google Chrome, the Clear Icon (X) has its height larger than the height of the text field.
Do you know how to fix it?

jsakalos
4 Jul 2010, 1:47 PM
I think that this is a bug in Ext. Search forums for twin trigger alignment.

asafm
5 Jul 2010, 3:25 AM
I think that this is a bug in Ext. Search forums for twin trigger alignment.

Searched extensively but could not find a solution.
I posted the question (http://www.sencha.com/forum/showthread.php?103286-TwinTriggerField-clear-icon-is-not-aligned-with-the-input-field&p=484323) in the Ext 2.x Bugs forum.

aminaq
14 Jul 2010, 7:46 PM
Awesome plugin!

Is there a way to repeat the search box in both bbar and tbar?

jsakalos
14 Jul 2010, 10:35 PM
No, it is either bbar or tbar, but not both.

Dipish
15 Jul 2010, 8:00 AM
It would be very nice if the plugin would act correctly if the store already has it's filters applied, i.e. not breaking the existing filter(s).

jsakalos
15 Jul 2010, 10:40 AM
And what's the problem?

Dipish
16 Jul 2010, 12:50 AM
The problem is that there is no 'smart' filter management system that would stack multiple filters. At the moment all the components I've seen so far (like your grid search plugin or a standard Combobox for example) simply call clearFilter() and then apply their own single filter without taking into account the fact that the Store may have already been filtered and that filter should be persistent.

Right now I'm thinking about the best way do deal with such situation. There is a number of possible options I see:
1) one can implement a custom Store class that extends the default one adding to it methods like addFilter() and removeFilter() that wouldn't oblige components that use the Store be aware of other filters that are applied to it
2) similar to 1) but implement a separate 'third-party' Filter Manager class that would work with standard ExtJS Store objects constructing a multiple-filter function when other entities call filtering methods on it.
3) implement some kind of Data Provider that would be another layer between the Store (The Model) and Views, it would be responsible for fetching bulk data from Store and apply to it stuff like filtering and sorting so the source data in the store isn't changed on such operations.

jsakalos, what do you think of it? Maybe I am misunderstanding something and having a wrong approach or maybe such a thing is already implemented some way. Hope I've expressed myself clearly enough, sorry for my English.
Thanks in advance for the feedback!

abraxxa
16 Jul 2010, 3:00 AM
I like the first two ways best.
Making it work for client and server-side filtering/ordering will be the hard part I guess.

Dipish
16 Jul 2010, 3:40 AM
Yes, you are right about the server-side filtering but actually I would limit the application of this problem (multiple filtering) only for local filtering. The logic is that I want to apply additional filters to the dataset that was received from server (with remote filtering or not) in its base form, the purpose is client-side data presentation change.

And what you don't like about option '3)'? It came up with it after using comboboxes in the following situation. I have a dataset in the Store that I display in Grid. I also have a FormPanel that has a Combobox that displays data from the same Store. The problem is that if I enable the autocomplete feature in Combobox, it filters out the source data in my Store, so the operation also filters rows in my grid. Because of this I have to create another copy of the Store just for the Combo and I don't like it.
I believe there must be an additional layer between The Model and The View for handling such cases.

jsakalos
16 Jul 2010, 2:46 PM
Search plugin was not developed with local filtering in mind, it was added later. Searching of local store doesn't make too much sense to me as you cannot load 10 million records to the store and then start searching. I want to avoid as much as possible anything like "bulk data in store". Bulk data in server database is what I have and want but I want to load the store with as few records as possible.

About smartness: I have developed GridMultiSearch (not published yet) that allows you to filter individual columns - again, no local filtering viewpoint.

aminaq
16 Jul 2010, 2:56 PM
I'm having a problem with the clear button. Everything works fine until I add the minChars, then the clear button doesn't work anymore. Any idea?



plugins: [ new Ext.ux.grid.Search({
mode : 'local',
minChars : 3,
position : 'top',
align : 'right',
checkIndexes: 'all',
width : 150,
autoFocus : true,
})]

jsakalos
16 Jul 2010, 2:59 PM
Re-download the newest (devel) version of the plugin.

aminaq
16 Jul 2010, 3:46 PM
Replaced with the devel version. It fixed the clear problem, but then the search itself nor longer works unless I remove the minChars. Pressing enter no longer works either. I get the following error as well.

tip is undefined
http://localhost/pxg/web-prototype/extjs/ext-all-debug.js
Line 30989

Thanks!

Dipish
16 Jul 2010, 11:23 PM
Searching of local store doesn't make too much sense to me as you cannot load 10 million records to the store and then start searching.
This depends on field of application of your project. In my specific case I can have 1-2 hundreds records max and I need to minimize server load as possible. But thanks for your point of view!

jsakalos
16 Jul 2010, 11:56 PM
100-200 records is still too much. I've stated many times that, based on the observation of my users, they usually want ONE particular record or A FEW related records and they usually refine their searches if they get more than 10 - 20 records.

Also I don't like the idea that I'd ALWAYS need to get ALL records, even if "only" 100 - 200 over internet and then search locally. I like "what you need is what you get but not unneeded extras" is the policy I've adopted.

However, YMMV.

jsakalos
16 Jul 2010, 11:59 PM
@animaq, does http://gridsearch.extjs.eu (currently running against 3.1.1) also exhibit the behavior you describe? There must be a problem on your end if not.

mayurid
17 Jul 2010, 4:13 AM
i want to implement combo box in search only combo nt radio in that hw to do it?
Ext.onReady(function(){
Ext.QuickTips.init();

var names = [
['Product'],
['Srevice']
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ['name']});
function handleDelete(){
if(grid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Do you want to delete?', deleteRow);
} else if(grid.selModel.getCount() > 1){
Ext.MessageBox.confirm('Confirmation','Delete Rows Selected?', deleteRow);
} else {
Ext.MessageBox.alert('Uh oh...','You can\'t really delete something you haven\'t selected huh?');
}
}
function deleteRow(btn){
if(btn=='yes'){
var selections = grid.selModel.getSelections();
var prez = [];
for(i = 0; i< grid.selModel.getCount(); i++){
prez.push(selections[i].json.id);
}
var encoded_array = Ext.encode(prez);
Ext.Ajax.request({
waitMsg: 'Please Wait',
url: 'gl_acc.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(){
store.load({params : {start : 0}});

},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','Could not connect to the database. Retry later');
}
});
}
}
var Employee = Ext.data.Record.create([{
gl_name: 'gl_name',
type: 'string'
}, {
id: 'id',
type: 'numeric'
}]);

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "list"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'id',type:'numeric'}, {name:'gl_name',type: 'string'}

])
});
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "search"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'id',type:'numeric'}, {name:'gl_name',type: 'string'}

])
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'});

editor.on('afteredit', function(rowEditor, changes, record, rowIndex){
var record = rowEditor.grid.getStore().getAt(rowIndex);
Ext.Ajax.request({
url:'gl_account_details.php',
params: {
task: 'update',
field: 'gl_name',
row: rowIndex,
id:record.get('id'),
value: changes['gl_name']
}
});
});
var grid = new Ext.grid.GridPanel({
store: store,
width: '100%',
region:'center',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),viewConfig:{ forceFit:true },
tbar: [{xtype:'label',text:'Type'},{
xtype:'combo',
fieldLabel: 'Type',
displayField : 'name',
mode:'local',
id:'product',
name:'product',
typeAhead: false,
store: mySimpleStore,
triggerAction: 'all',
allowBlank : true,
width :120},{xtype:'label',
text: 'Category',
style:{"margin-left":"20px"}
},
new Ext.ux.form.SearchField({
width:130,store:ds,id:'search_field'
}),'->',{
iconCls: 'icon-user-add',
text: 'Add Employee',
id:'add',
handler: function(){
var e = new Employee({
gl_name: 'New Guy',
id:0
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
var s= grid.getSelectionModel().getSelections();
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Employee',

handler:handleDelete

}],
columns: [{header:"ID",dataIndex:'id',width:25,hidden:true},
{
id: 'name',
header: 'First Name',
dataIndex: 'gl_name',
width:200,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],bbar: new Ext.PagingToolbar
({
store:store,

pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

})
});
var layout = new Ext.Panel({
title: 'Categories',
layout: 'border',
layoutConfig: {
columns: 1
},
width:'100%',
height:500,

minSize: 100,
maxSize: 500,

items: [grid]
});
layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

store.load({params : {start : 0}});
ds.load({params : {start : 0}});

});

jsakalos
18 Jul 2010, 11:23 PM
How does it relate to this thread?

aminaq
27 Jul 2010, 10:25 AM
@animaq, does http://gridsearch.extjs.eu (currently running against 3.1.1) also exhibit the behavior you describe? There must be a problem on your end if not.

I tried 3.1.1 but still the same, I guess I'm doing something wrong cuz the demo works fine.

jsakalos
27 Jul 2010, 12:16 PM
If demo works fine, find out how your code differs from it. What you have dropped? What you have added?

elgalle
28 Jul 2010, 12:23 PM
Awesome plugin!
Is there any way to add an "id" to the search text or fields?
I need to get them to check the data inside them but the only way I found is by the actual index, but as I add buttons to the top toolbar of the grid the indexes changes.

Thanks

jsakalos
28 Jul 2010, 12:34 PM
Why would you need to search ids? They are meaningless auto-generated numbers.

bareflix
28 Jul 2010, 1:20 PM
Is there a way to get the search box to appear at the beginning of the toolbar?
I tried adding my own onRender function to add my extra items, but the plugin onRender must still fire after that because my button was still before the search button and field.

jsakalos
28 Jul 2010, 1:32 PM
This is excerpt from onRender function, hope it shads a light on it:



,onRender:function() {
var panel = this.toolbarContainer || this.grid;
var tb = 'bottom' === this.position ? panel.bottomToolbar : panel.topToolbar;
// add menu
this.menu = new Ext.menu.Menu();

// handle position
if('right' === this.align) {
tb.addFill();
}
else {
if(0 < tb.items.getCount()) {
tb.addSeparator();
}
}

// add menu button
tb.add({
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
});

elgalle
29 Jul 2010, 7:12 AM
Why would you need to search ids? They are meaningless auto-generated numbers.
Maybe I didn't explain correctly.
I add dinamically buttons on the tbar, but not allways I add the same quantity of buttons so the item index in the tbar changes depending of the quantity of buttons that I add.
Example: The user A has permittion to add a new product so I add dinamically the button "Add Product" into the grid. So, to access the text completed by the user in the fieldset I put in my code:

productsGrid.topToolbar.items.items[10].getValue()
The problem is when I don't add the button "Add product" or other button. so the index (in this case 10) is not the textfield of the search bacause the items quantity in the tbar is different.

Is there any way to assign an id to the textfield and the fields instead of the auto-generated ids?

jsakalos
29 Jul 2010, 1:14 PM
Yes, all Ext components, also fields, accept id config option.

Anyway, I have no clue what are you trying to achieve. Search plugin searches grid's store, locally or remotely and has nothing to do with toolbar buttons.

knappy
1 Aug 2010, 7:18 AM
Re-download the newest (devel) version of the plugin.

I have the same problem. The clear button is not working when I use minChars:... I downloaded the latest dev but no luck.

Here is what i'm using.

new Ext.ux.grid.Search({
iconCls:'icon-zoom',
disableIndexes:['iwh_preview_filename','dmdate_published','downs'],
//minChars:3,
autoFocus:true,
queryDelay: 2000,
position:'top',
width: 320
})

sosy
2 Aug 2010, 9:36 PM
Hi Saki, well first off all i would like to thank you for your commitment and genius examples, it helped me a lot getting into Extjs.

Second, this post is really, really long, i did not read it all, so i don't know if this issue i made an fix on,
isn't already been discussed nor if there is an solution for.

Since i use linebreaks on the grid header, the search field looked really "bad". So tomorrow i modified some of your original code and added an option to it.

In Ext.ux.grid.Search.js if added the following line

after shortcutModifier i added



/**
* @cfg {String} shortcutModifier Modifier for shortcutKey. Valid values: alt, ctrl, shift (defaults to "alt")
*/
, shortcutModifier: 'alt'
//
// how many chars
//
,maxMenuChar: 15
and inserted the following in the menu



Ext.each(cm.config, function (config) {
var disable = false;
//
// MOD by Sosy
//
var maxchar = this.maxMenuChar;
var repHeader = config.header.replace('<br />', '');
var cutHeader = repHeader.substring(0,maxchar);
var demHeader = Ext.util.Format.stripTags(cutHeader);
//
//
//
if (config.header && config.dataIndex) {
Ext.each(this.disableIndexes, function (item) {
disable = disable ? disable : item === config.dataIndex;
});
if (!disable) {
menu.add(new Ext.menu.CheckItem({
//text : config.header
text: demHeader,
hideOnClick: false,
group: group,
checked: 'all' === this.checkIndexes,
dataIndex: config.dataIndex
}));
}
}
}, this);
In the grid plugin you can set the max of the chars displayed in the search menu by adding



plugins: [new Ext.ux.grid.Search({
iconCls: 'icon-zoom',
readonlyIndexes: ['note'],
checkIndexes: ['artikel_naam'],
shortcutKey: 'r',
disableIndexes: ['pctChange'],
width: 200,
maxMenuChar: 20,
searchTipText: locale.tooltip.searchText,
}),
It limits the maximum showed characters in the search menu (for long grid descriptions)

Further this mod whipes out any linebreak and puts the text together before showed.
You could ad an whitespace to replace a linebreak with it.

I don't know if this is programmed the right way but this is what i can after 3 weeks of Extjs.
Maybe there are more efficient solutions for this, be free to point me out.

I hope this will help some of you who have linebreaks in the grid headers to..

Regards

Sosy

jsakalos
2 Aug 2010, 11:20 PM
It's fine; I'd just only remove <br /> before cutting the text because you can wind up with: "Menu item <b".

sosy
3 Aug 2010, 12:29 AM
Hello Saki, yes you are right, i will change that, slight mistake..!

Can anyone tell me, how to do exactly this on the colum header menu, in which you can select which column is visible.

In there the linebreaks also look real terrible. I could not find it.
Probably i have to override something in the Extjs core but
thats probably way out to far for me right now.

So maybe someone already acomplished it, or give me an direction on how to...

Regards

Sosy

sosy
3 Aug 2010, 12:38 AM
So, i just edited my post above and changed it as Saki said. Its better like that.

@Saki, thank you for your blogpost 'Philosophy' it gave me new views and energy,
should be an 'must-read' for every ExtJs starter!

Cheers
Sosy

michiel
10 Aug 2010, 3:17 AM
Hi Saki,

FIrst of all: thanks for the great plugin! Very useful! I have two short questions about the use of the Grid Search plugin, and I wasn't able to find the answers in this (huge! ;)) thread.

1) Is it possible to change the position of the search field? For example next to the refresh button of a bbar?
2) I'm having a problem with the checkIndexes configuration. And I think it's caused by the fact that my grid columns are loaded directly from the server as such:



.....
store: my_store,
columns: [],
stripeRows: true,
viewConfig: {
forceFit: true,
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
},
.....


My Json looks something like this:



{"columns":[
{"dataIndex":"author","header":"Author"},
{"dataIndex":"email","header":"E-mail"},
{"dataIndex":"website","header":"Website"},
{"dataIndex":"datetime","header":"Datetime"},
{"dataIndex":"ip","header":"IP address"},
{"dataIndex":"active","header":"Active"}
],
"metaData":
{"fields":["id","author","email","website","datetime","ip","active"],
"idProperty":"id",
"root":"root",
"totalProperty":"total"}
,"root":[
.....
],
"total":2}


When I use:



plugins:[new Ext.ux.grid.Search({
checkIndexes: ['author', 'email', 'website'],
minLength: 3,
autoFocus:true
})]


I only get a 'Select All' option, but not the seperate Indexes.

Any ideas?

Thanks in advance for your time! Michiel

jsakalos
10 Aug 2010, 4:13 AM
1. Try to set align:'left'
2. That won't work. Try to use reconfigure instead.

feodor
10 Aug 2010, 4:42 AM
I had some problems with switching pages on grid with PagingJsonStore in local mode. When i switch page - i always loose filtering. As i understand, this was due to store reloading
Solved by adding line

if('local' === this.mode) {
this.grid.store.on({scope:this, load:function()
{this.onTriggerSearch();}
});
}

after

if(true === this.autoFocus) {
this.grid.store.on({scope:this, load:function(){this.field.focus();}});
}

michiel
10 Aug 2010, 5:18 AM
1. Try to set align:'left'
2. That won't work. Try to use reconfigure instead.

Using reconfigure solves my issue yes. Great! Thanks :)

With respect to using 'align:left', what I actually meant is that I would prefer to have the search field directly after the refresh button, and *before* some other buttons I have in the bbar. I didn't mention that properly. I guess that setting align to left (which is the default value anyway, right?) won't change that, does it?

Michiel

jsakalos
10 Aug 2010, 6:20 AM
Try it. If PagingToolbar already exists that should do.

michiel
10 Aug 2010, 7:04 AM
I did try off course .. and it remains on the far right of the bbar. Currently it's:

- paging toolbar
- refresh button
- 2 custom buttons
- display info
- search field

When I change the align-property to 'right' the order slightly changes (search field appears left of display info), but I'd prefer to have it directly after the refresh button. If it's not possible, then it's alright too :)

jsakalos
10 Aug 2010, 7:24 AM
Then it is a problem of paging toolbar as search plugin adds tbFill only if the config is align:'right'. Check in Firebug HTML browser.

Shaguar
24 Aug 2010, 11:09 PM
Hi,
i try to focus the search field with gridSearch.focus()



gridSearch = new Ext.ux.grid.Search
({
id:'fw',
mode:'remote',
iconCls:false,
dateFormat:'m/d/Y',
minLength:2,
position: 'top',
align: 'right'
}),
and i get this error:
gridSearch.focus is not a function
chrome://firebug/content/blank.gif gridSearch.focus();

the searchfield is already rendered when i try to focus it, do i use the wrong syntax?

PS: Is it possible to activate the clear search event (when you click the "x" button) via code just like this :
gridSearch.clear()

jsakalos
24 Aug 2010, 11:24 PM
The plugin has autoFocus config option.

Shaguar
24 Aug 2010, 11:40 PM
That doesnt help me. I want to focus the field after pressing a shortcut like ctrl +y , the shortcut is not a problem but i always get that error i posted above.


PS: What about the clear search issue?

jsakalos
25 Aug 2010, 12:07 AM
There's public property "field". There's no clear search issue in the latest version.

Shaguar
25 Aug 2010, 12:26 AM
Ok thanks a lot. gridSearch.field.focus() works fine.


There's no clear search issue in the latest version.

Im not talking about a bug, im talking about calling the clear search method within the code.
I want that the search gets cleared if you press a special shortcut just like if you hit the "X" button.

jsakalos
25 Aug 2010, 4:37 AM
plugin.onTriggerClear(), where "plugin" is reference to Search plugin.

Shaguar
26 Aug 2010, 12:36 AM
Thank you, it works now.
One more thing, how can i manually modifiy where to search, like
plugin.field.indexes('title','comments','year');
That he searches only in these 3 columns.

jsakalos
26 Aug 2010, 3:34 AM
RTFM (the source) please, there is a config option for that.

Shaguar
26 Aug 2010, 4:41 AM
I know that there's a config option for that but i wont preconfigure it, i will do it afterwards like i said, and the manual doesnt help in this case.

jsakalos
26 Aug 2010, 5:19 AM
Well, I don't know what you need then. You can either put indexes there or check/uncheck checkboxes in menu. If you need to do it from the code, do what checking/unchecking of menu checkboxes does.

jizhang88
27 Aug 2010, 7:28 PM
Hi jsakalos (http://www.sencha.com/forum/member.php?2178-jsakalos).

I am new for Extjs. I have a large paged grid with JSP on the back. What is the minimal I should do to add remote search (only search, no edit, no delete .. ) into my existing grid?

Thanks alot in advance.

Ji

jizhang88
28 Aug 2010, 9:09 AM
Guys, I am new in ExtJS. I am very interested in adding this lovely plugin into my large read-only existing grib. I need only search function, no editing, no deletion. Thanks in advance.

jsakalos
28 Aug 2010, 10:48 AM
There's a demo page: http://gridsearch.extjs.eu - that contains almost minimum necessary code.

Samuel.reed
3 Sep 2010, 8:41 AM
Jsakalos, thanks for supporting this so well. I've had some pretty good luck with it so far. I had to do some modification to make it work with our backend DB but once it did, it did so beautifully.

What I was wondering was if you or anyone else had toyed with the idea of highlighting search terms much like any web browser does when you search for a word. Our DB has a lot of columns (30+) and even more rows (sometimes in the millions! slow searching there) and it's not obvious all the time where your search term has appeared. It would be great if it highlighted the search term in the grid.

We're using a livegrid so it gets a little more complicated there but if you have any pointers as to where I might get started I would appreciate it!

Thanks
Sam

jsakalos
3 Sep 2010, 9:20 AM
Good idea, however, I didn't try to do it. It calls for a custom renderer(s) that would highlight the search term, probably with the help of RegExp.

sense.nda12
5 Sep 2010, 7:29 PM
how step to including plugin grid serach???
coz my configuration is not working and the error message is : "Ext.ux.grid is undefined"
do simple code???

jsakalos
6 Sep 2010, 4:15 PM
See the demo page. The first step should always be to replicate the demo w/o any change on your server.

Coil
7 Sep 2010, 6:45 AM
Hi, added the plugin to my existing grid, its a paging grid, search is working fine, its using server side filtering. My problem is with the paging, it doesnt seem to update like it does in your example. It keeps showing the total ammount of entries and total ammount of pages. Any tip on how to fix this? Thanks

jsakalos
7 Sep 2010, 11:28 AM
I'd bet it is a server-side problem. Server has to respond with the correct number of total filtered records (not unfiltered total).

Coil
7 Sep 2010, 1:00 PM
D'oh, obviously, sorry for the retard question :P
I'll ask this tho, is it possible to specify the timeout for the typing in the search box? Something like if you dont type for 3 seconds then do actual request? it seems a bit fast right now, like if i type a bit slow i get multiple ajax requests... All i saw on the documentation are options for minchar and minlenght.

Thanks for the quick response btw :D

jsakalos
7 Sep 2010, 1:09 PM
The buffer time is currently hardcoded (300 ms) - I'll make it configurable in the next version. It is this line:


if(this.minChars) {
this.field.el.on({scope:this, buffer:300, keyup:this.onKeyUp});
}

Samuel.reed
8 Sep 2010, 9:45 AM
(Regarding highlighting search terms in the grid)Good idea, however, I didn't try to do it. It calls for a custom renderer(s) that would highlight the search term, probably with the help of RegExp.

Hey Jozef,

I got it going. It makes a nice visual improvement to the search.

For all those who want to give it a try, add this renderer to your grid:


searchHighlightRenderer : function(value) {
var gridSearch = this._getGridSearch();
var search = gridSearch.field.getValue().toString();
var pos = value.toLowerCase().indexOf(search.toLowerCase());
// If there's a match, highlight it
if (pos>=0 && search != ""){
var retVal = value.substring(0,pos) + "<font style='background-color: yellow'>"
+ value.substring(pos, pos + search.length) +
"</font>" + value.substring(pos + search.length, value.length);
return retVal;
}
// Otherwise do nothing
return value;
}

Our js is a little strange, thus the odd syntax, but those of you who are somewhat experienced with extjs should get the picture. I had to call the renderer in this way, however:


renderer: this.searchHighlightRenderer.createDelegate(this),

This makes sure that it can get your gridSearch object because JS is a little funny with "this" scope. Replace this._getGridSearch() with however you get your object, or just a reference to the object itself.

Samuel.reed
8 Sep 2010, 11:52 AM
Also, IE8 with old versions of Ext has trouble with the placement of the TwinTriggerField. I am using Ext 2.1 (old codebase) so it may be unique to me but I got the spacing going like this:



// install event handlers on input field
this.field.on('render', function() {
this.field.el.dom.qtip = this.minChars ? String.format(this.minCharsTipText, this.minChars) : this.searchTipText;

if(this.minChars) {
this.field.el.on({scope:this, buffer:300, keyup:this.onKeyUp});
}

// IE8 fix, replace with Ext.isIE8 if we ever upgrade Ext past 2.2.1
var ver = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
ver = parseFloat( RegExp.$1 );
}

if (ver >= 8.0){
this.field.el.setTop.defer(10, this.field.el, ['1px']);
}

// End IE fix


Of course, like in the comment, if you have above Ext 2.2 you can just use Ext.isIE8. The key line is "this.field.el.setTop.defer(10, this.field.el, ['1px']);". Be aware it will slightly mess up spacing on pre-IE8. And I believe that if you have Ext 3 or above the spacing issue no longer exists, so this is a fringe case. But I figured it would be useful to put this out there.

An alternative way to fix this problem is to change the TwinTriggerField into a TriggerField, and renaming trigger1Class and onTrigger1Click to triggerClass and onTriggerClick. Considering the second trigger is always hidden, there is only a little loss in functionality - I have been unable to get a tooltip working on a TriggerField, at least in my app. So for now I'm using the above (ugly) fix.

jsakalos
8 Sep 2010, 4:36 PM
Perfect! I'll try it to see how it looks. Meanwhile, could you post a screenshot?

Re IE: I personally am not interested at all. I set "minimum system requirements" of my applications that say Safari or Firefox, no IE.

Samuel.reed
9 Sep 2010, 10:24 AM
Perfect! I'll try it to see how it looks. Meanwhile, could you post a screenshot?

Re IE: I personally am not interested at all. I set "minimum system requirements" of my applications that say Safari or Firefox, no IE.

I can't post a screenshot, but it looks exactly as you'd think. Just yellow highlighting at every instance of the search term, in every column and row, even partial. So if you searched "foo", you would see wofoo, foobar, etc. Of course highlighted, not bold.

As for IE, I wish I had that luxury. Unfortunately 90%+ of our users use it. Figuring out that IE8 bug was one of the head-smashingest times I've had all month. There are few things more frustrating than IE compatibility!

zoja
20 Sep 2010, 1:50 AM
Something's wrong with the download server. I keep getting errors like this one :


Duplicate entry '4386513' for key 1

Query : INSERT INTO phpmv_link_vp (idvisit, idpage, idpage_ref, total_time_page_ref) VALUES ('1103364', '214', '214', '179')

jsakalos
20 Sep 2010, 2:09 AM
Fixed - you can download now.

scottmartin
22 Sep 2010, 11:06 AM
Saki,

Nice plugin ... thanks.

Question: What is the best way to setup a search if my grid field is rendered? The field value is numeric, the display value is text.

The user would like to search on the text value.

I saw there was reference to 'searchUsingRenderer' in your earlier posts, but I was unable to determine the final outcome.

Regards,
Scott.

jsakalos
22 Sep 2010, 12:50 PM
I don't use it in grids with renderers, however, I believe that it can be done. You need to back-translate the rendered value to the real value before you send it to the server. It can get quite complicate so I prefer the server to deliver final data that wouldn't need these tricks.

abraxxa
22 Sep 2010, 1:51 PM
You have to either convert the user's search term to what your server needs on the client or on the server, whatever makes more sense in your case.

scottmartin
23 Sep 2010, 2:00 PM
I finally decided to simply create a JOIN in my table and return the 'displayField'. Renderers are gone and all is working fine.

Regards,
Scott.

jsakalos
23 Sep 2010, 2:17 PM
Yes, that is the way I do it always - simplest, cleanest, bulletproof.

rxopt
24 Sep 2010, 6:35 PM
very well. thanks

extjs1111_user
30 Sep 2010, 5:56 AM
Hi, great Plugin!!!
i have a case when i hide a column in grid in that event i uncheck checkbox menu of search and it doesnt show the data for same column on search, but
similarly,when i show the same column in that event i check the unchecked column..

For first scenario it works fine ,but sometimes for second case it suddenly stops searching...on onKeyUp function stops taking characters i.e, grid search stops working...

Any ideas why?? I have been trying to find a work around,I am using mode local for plugin...

jsakalos
30 Sep 2010, 11:41 AM
That what you describe should work, however, I have no idea how you implement it. Just continue debugging.

extjs1111_user
30 Sep 2010, 9:33 PM
Thanks for the reply ...
this is how i implemented..

also i have implemented auto state maintainence....for menu


var gridStateId = this.grid.stateId;
this.menu = new Ext.menu.Menu({
id:'gridMenu', //id assigned for menu
listeners:{
render:function(){
var colState = null; // code for setting checked and uncheck from cookie auto state
var cookie = Ext.state.Manager.getProvider();
var gridState = cookie.get(gridStateId);
if(gridState != null || typeof gridState != 'undefined')
{
var gridColumnState = gridState.columns;
var menuId = Ext.getCmp('gridMenu');

for(var i = 1;i<gridColumnState.length;i++)
{
if(gridColumnState[i].hidden)
{
menuId.get(i+1).setChecked(false);
}
else
{
menuId.get(i+1).setChecked(true);

}
}
}
}
}
});

now in col model i have added listener

listeners: {
hiddenchange: function(cm, colIndex, hidden) {
menuId = Ext.getCmp('gridMenu');
if(hidden)
{
menuId.get(colIndex+1).setChecked(false);
}
else
{
menuId.get(colIndex+1).setChecked(true);

}
}
}

note :- setting of indexing is done pertaining to my requirement it wont give desirable result everywhere!!!

Everything works fine except when after hiding when i again show column it stops working sometimes...i have to double click at field area to start it functioning again...

I have implemented it in 5 grids...I dont think this is due to id 'gridmenu' because when i am changing in one grid change doesn't gets reflected in other grids......

render listener i have used because this is the closest listener i have found to be called everytime the page gets refresh.......

extjs1111_user
30 Sep 2010, 10:20 PM
i forgot to add 1 more change....

after debugging i found that if i press clear button before searching it works fine every time so if have added this
but still it sometimes doesnt work

,onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = this.grid.store;
this.menu.fireEvent('render'); // just to make sure all desired menus r checked and unchecked....

jsakalos
1 Oct 2010, 12:47 AM
Hmm, I don't assign any id, of course, id must be unique.

dax
6 Oct 2010, 7:38 AM
1.) Are you talking about this thread (GridSearch) or about GridFilter (http://extjs.com/forum/showthread.php?t=14503)?
2.) In any case, convert everything (web page, server scripting and database texts) to UTF-8 and all your problems will be gone. I use GridSearch in Slovakia, we have accented characters too and I'm not experiencing any encoding troubles.

Hi,

One question relationed with the second point.

I have seen that the plugin get like differents words with or without accent.

In your test page for the plugin I've tested to diferents words "hola" and "holá" and if you serach for one, the other doesn't appear.

Is it posible get the two words when I search for one?? It's like ignore the differences about the accent.

Thanks.

jsakalos
6 Oct 2010, 8:37 AM
You would need to implement that logic at server. Server receives what user types (a or á) and then filters records in the database.

bk1
7 Oct 2010, 1:37 AM
Hi- In implementing the Grid Search plugin in Ext 3.0, the onTriggerClear event does not seem to be called, though all other events are able to be invoked: init, onKeyUp... The ESC to clear the search field does not work either.

Would appreciate your thoughts on resolving this. Thanks!

BK

jsakalos
7 Oct 2010, 10:03 AM
Do you have the latest (devel) version?

bk1
8 Oct 2010, 1:20 AM
I downloaded http://gridsearch.extjs.eu/gridsearch.zip and used the Ext.ux.grid.Search.js replacing it with the copy I had. While it workred in the examples, it gave errors such as "throw without catch" and "object expected".

Is there another version l should look for?

Thanks.

BK

Shmoo
12 Oct 2010, 11:43 PM
Hi!

Amazing plug-in, as expected from Saki. :)

I am using EXT JS 3.1.0, Firefox 3.6.10. The "x" button, or should I say the clear / reset button doesn't seem to work when I press on it.
Here is how I used the grid plugin..

,plugins: [new Ext.ux.grid.Search({
iconCls:'icon-magnifier'
,minChars:2
,mode:'local'
,autoFocus:true
,width: 150

})]

Also, how do I set it to be position on the top toolbar if I have one such toolbar already existing? Is it simply adding a configuration option position:'top' ?

Thanks in advance! :)

Dipish
13 Oct 2010, 12:37 AM
I am using EXT JS 3.1.0, Firefox 3.6.10. The "x" button, or should I say the clear / reset button doesn't seem to work when I press on it.

I have the same problem, ExtJS 3.2.1

jsakalos
13 Oct 2010, 5:03 AM
I didn't test 3.2.1 specifically, but example run against Ext 3.2.2 works as expected including clear trigger. Are you sure that you run rev 798 from the devel download package?

Dipish
13 Oct 2010, 6:13 AM
No, I used stable version. Is the current devel version more 'bulletproof'?

jsakalos
13 Oct 2010, 7:48 AM
Devel contains bugfixes.

jbusuulwa
14 Oct 2010, 12:39 PM
Hi all,

the self-contained Grid Search Plugin usage example follows. This example is configured to use local filtering (mode:'local') but remote mode, when serching itself is done by the server, is also possible. The plugin should also work with AutoGrid(s) and paging grids.

Enjoy.


http://gridsearch.extjs.eu

I have just downloaded the Grid Search Plugin and am trying to use the example that come with it. I only replaced the .php file with my java servlet that gives us the json data. All is well except that the search does not work, I have gone through the code a mth times and I cannot figure out where I messed up.

From the explanation above the plugin could be used for a local search too.

Help me here, what am not doing right? Help!

Jesseb

jsakalos
14 Oct 2010, 1:19 PM
Just continue debugging while referring to the example. The server side has to filter the records, of course.

Shmoo
14 Oct 2010, 8:20 PM
Hi Saki,

I updated to 3.3.0 and the clear trigger didn't work, I went to 3.2.2, it didn't work for me too.

But when I made a change in the grid.Search code and the clear trigger works for me now. (See below)
Line 207

//,onTrigger1Click:this.minChars ? Ext.emptyFn : this.onTriggerClear.createDelegate(this)
,onTrigger1Click:this.onTriggerClear.createDelegate(this)

The clear trigger is now working fine. I may have downloaded an older version of Ext.ux.grid.Search..

I hope this helps Dipish as well. :)

jsakalos
15 Oct 2010, 1:50 AM
This is the direct download link to the latest working version: gridsearch.zip (http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//gridsearch.extjs.eu/gridsearch.zip&id=1&pagename=FILE:%20download/gridsearch/gridsearch.zip)

Samuel.reed
15 Oct 2010, 10:58 AM
Yeah old bug, I checked and it's fixed in Saki's newest version. For the lazy, use this code:



,trigger2Class:this.minChars ? 'x-hidden' : 'x-form-search-trigger'
,onTrigger1Click:this.onTriggerClear.createDelegate(this)
,onTrigger2Click:this.minChars ? Ext.emptyFn : this.onTriggerSearch.createDelegate(this)



Hi Saki,

I updated to 3.3.0 and the clear trigger didn't work, I went to 3.2.2, it didn't work for me too.

But when I made a change in the grid.Search code and the clear trigger works for me now. (See below)
Line 207

//,onTrigger1Click:this.minChars ? Ext.emptyFn : this.onTriggerClear.createDelegate(this)
,onTrigger1Click:this.onTriggerClear.createDelegate(this)

The clear trigger is now working fine. I may have downloaded an older version of Ext.ux.grid.Search..

I hope this helps Dipish as well. :)

Shmoo
17 Oct 2010, 11:31 PM
Thanks for the link Saki. :)

Thank you Samuel.reed as well for pointing that out. :)

Dipish
17 Oct 2010, 11:58 PM
Thanks all! I'll try out the latest development version as soon as I get back to that part of my project.

dax
18 Oct 2010, 8:14 AM
You would need to implement that logic at server. Server receives what user types (a or á) and then filters records in the database.

Hi jsakalos,

Solved by "query" and "remote" properties.

Thanks.

jsakalos
18 Oct 2010, 10:06 AM
Can you elaborate a little bit more? I know that you've solved it but I have no clue how.

dax
18 Oct 2010, 11:06 PM
I have changed the call to the plugin from "local" to "remote" like this


new Ext.ux.grid.Search({ mode: "remote", iconCls: false, minLength: 2 })

and in the server part I've check the "query" param


$query = "SELECT * FROM table WHERE field LIKE '%" . $_POST["query"] . "%' ORDER BY ID";

I don't know if it's the best way, but it's OK for me.

jsakalos
19 Oct 2010, 2:42 AM
I see. So server ignores differences between a and á by default. I thought you've written some code.

dax
19 Oct 2010, 2:54 AM
Yes, in my case this is what is happenning, the server ignores the differences with a and á.

abraxxa
19 Oct 2010, 8:07 AM
SQL injection FTW!

easycodes
20 Oct 2010, 1:53 AM
Nice Plugin Saki, but if we try to use it in more than one grid in a same file. autoFocus option works only in one. How to fix it.?

jsakalos
20 Oct 2010, 2:40 AM
What exactly do you mean by "works only in one"? Initially? On store load? Shortcut key?

easycodes
20 Oct 2010, 2:46 AM
i have 4 different grids, linked with different stores. i am using this plugin in all of them. autoFocus is working for only one grid/store. I hope it clarifies.

jsakalos
20 Oct 2010, 5:46 PM
Well, it is same as above; the only thing I know is that you have 4 grids. What is the behavior? All of them are autoFocus? Field is not focused on store (re)loads? Shortcut doesn't work? Just describe the expected behavior and the actual behavior.

easycodes
21 Oct 2010, 12:09 AM
Well, it is same as above; the only thing I know is that you have 4 grids. What is the behavior? All of them are autoFocus? Field is not focused on store (re)loads? Shortcut doesn't work? Just describe the expected behavior and the actual behavior.

Saki, Thank you so much for your reply. yes field is not focused on store loads/reloads all of them are set to autoFocus but only one field gets focus on store loads/reloads which was rendered first. i am expecting all of them to get focus on store loads/reloads. And in IE 8, only one Search field(textfield)(of a grid which was rendered first) renders and rest of 3 dont. please check the attachments.

easycodes
23 Oct 2010, 1:04 AM
any update regarding above issue.?

jsakalos
23 Oct 2010, 1:56 AM
Post please a working showcase (http://www.sencha.com/learn/Ext_Forum_Help#Posting_a_working_showcase), I'll take a look.

wavedan
27 Oct 2010, 12:07 AM
I am completely new to plugins, but I need to add search functionality to a grid, and it seems that this plugin is the best option for me. Simply including the gridsearch.js and the files doesn't seem to do anything, and I can't find any sample code.
What do I need to do to include the search plugin in my existing extjs application?

jsakalos
27 Oct 2010, 12:09 AM
First of all, replicate the example (http://gridsearch.extjs.eu) at your site w/o changes. Then adjust it to your needs.

wavedan
27 Oct 2010, 1:07 AM
First of all, replicate the example (http://gridsearch.extjs.eu) at your site w/o changes. Then adjust it to your needs.

I am including these files from your plugin:
<link rel="stylesheet" type="text/css" href="css/gridsearch.css">
<link rel="shortcut icon" href="./img/extjs.ico">
<script type="text/javascript" src="./js/WebPage.js"></script>
<script type="text/javascript" src="./js/Ext.ux.ThemeCombo.js"></script>
<script type="text/javascript" src="./js/Ext.ux.IconMenu.js"></script>
<script type="text/javascript" src="./js/Ext.ux.Toast.js"></script>
<script type="text/javascript" src="./js/Ext.ux.grid.Search.js"></script>
<script type="text/javascript" src="./js/Ext.ux.grid.RowActions.js"></script>

But when I reload the site, I get this error:
p.ptype is undefined
http://www.mossekortet.no/extjs/ext-all-debug.js
Line 9740

jsakalos
27 Oct 2010, 1:23 AM
Check if paths are correct and if you're really loading all above files from the server. No 404 error?

wavedan
27 Oct 2010, 2:17 AM
Check if paths are correct and if you're really loading all above files from the server. No 404 error?

No 404 error.
I am now including the following files:

<link rel="stylesheet" type="text/css" href="./css/icons.css">
<link rel="stylesheet" type="text/css" href="./css/Ext.ux.grid.RowActions.css">
<link rel="stylesheet" type="text/css" href="./css/empty.css" id="theme">
<link rel="stylesheet" type="text/css" href="./css/webpage.css">
<link rel="stylesheet" type="text/css" href="./css/gridsearch.css">
<link rel="shortcut icon" href="./img/extjs.ico">

<script type="text/javascript" src="./js/WebPage.js"></script>
<script type="text/javascript" src="./js/Ext.ux.ThemeCombo.js"></script>
<script type="text/javascript" src="./js/Ext.ux.IconMenu.js"></script>
<script type="text/javascript" src="./js/Ext.ux.Toast.js"></script>
<script type="text/javascript" src="./js/Ext.ux.grid.Search.js"></script>
<script type="text/javascript" src="./js/Ext.ux.grid.RowActions.js"></script>


The following code is what gives me the error, that is, including the plugins: part gives me the error:

var grid = new Ext.grid.GridPanel({
plugins:[new Ext.ux.grid.Search({
//iconCls:'icon-zoom'
//,readonlyIndexes:['note']
//,disableIndexes:['pctChange']
minChars:3
,autoFocus:true
// ,menuStyle:'radio'
}), this.rowActions],

store: store,
//title:'test',
width:500,
columns: [
{header: "Butikknavn", width: 270, dataIndex: 'butikk_navn', sortable: true},
{header: "Internettside", width: 215, dataIndex: 'www', sortable: true},
{header: "Addresse", width: 270, dataIndex: 'butikk_addresse', sortable: true},
{header: "Telefon", width: 145, dataIndex: 'butikk_telefon', sortable: true},
{header: "Bransje", width: 390, dataIndex: 'bransje', sortable: true}

jsakalos
27 Oct 2010, 4:39 AM
Just continue finding the error. Use Firebug, set "Stop on all errors", put some console.log statements in your code until you find where's problem.

Samuel.reed
28 Oct 2010, 12:02 PM
I have an interesting IE issue. Unfortunately I have to support IE so this is pretty critical.

You can see this even on the example on your page, jsakalos:

Use IE7/8 and click on the search menu that brings down the list of columns. Then click on the search box. Type something, no event fires. Hit enter, no event fires. Ext doesn't seem to "snap out of it" until you click somewhere else then back into the search box. It's like the menu is somehow holding onto focus? Notice that if you click the search dropdown twice, that is, once to open and once to close, everything behaves normally. So there's something about closing the menu by clicking on the text box (the natural thing to do IMO) that causes IE to lose its head.

Any ideas on this one?

jsakalos
28 Oct 2010, 4:40 PM
I have no IE for development so it's hard to test. Somebody else?

extjs1111_user
14 Dec 2010, 11:45 PM
Hi,

Do search plugin doesnt work for date fields.
I am using the latest devel version

thanks.

baldeep_bhatia
21 Dec 2010, 6:49 AM
hi guys, how can i use this with my work.... i need the same functionality for my grid..

I have two grids on my page, from which I drag and drop items from one grid to another.

I needed the same functionality to do a search from the grid1. If the item in grid1 exists then onEnter, it will put that item into grid2 and remove it from grid1.

My current code is below:

/*!
* Ext JS Library 3.2.1
*/
Ext.onReady(function () {
var myData = {
records: [
{ name: "Rec 0", column1: "0", column2: "0" },
]
};
 
// Generic fields array to use in both store defs.
var fields = [
{ name: 'StockId', mapping: 'StockId' },
{ name: 'Fidessa', mapping: 'Fidessa' },
{ name: 'BloombergCode', mapping: 'BloombergCode' },
{ name: 'ReutersRic', mapping: 'ReutersRic' },
{ name: 'StockName', mapping: 'StockName' }
];
// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields: fields,
data: _stock1,
root: 'rows'
});
 
// Column Model shortcut array
var cols = [
{ header: "Bloomberg Code", width: 110, sortable: true, dataIndex: 'BloombergCode' },
{ header: "Reuters Ric", width: 90, sortable: true, dataIndex: 'ReutersRic' },
{ header: "Fidessa", width: 90, sortable: true, dataIndex: 'Fidessa' },
{ id: 'name', header: "Stock Name", width: 130, sortable: true, dataIndex: 'StockName' }
];
// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
width: 480,
height: 295,
ddGroup: 'secondGridDDGroup',
store: firstGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Stock list',
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
});
var secondGridStore = new Ext.data.JsonStore({
fields: fields,
data: _stock2,
root: 'rows'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
width: 480,
height: 295,
ddGroup: 'firstGridDDGroup',
store: secondGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Your portfolio',
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
 
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width: 960,
height: 295,
layout: 'hbox',
renderTo: 'panel',
defaults: { flex: 1 }, //auto stretch
layoutConfig: { align: 'stretch' },
items: [
firstGrid,
secondGrid
],
bbar: [
'->', // Fill
{
height: 50,
text: 'Save',
handler: function () {
secondGridStore.each(function (Records) {
var stockId = $("input[name=StockId]:first").clone();
stockId.val(Records.data.StockId);
stockId.appendTo("#portfolioform");
});
$("input[name=StockId]:first").remove();
$("#portfolioform").submit();
//refresh source grid
//firstGridStore.loadData(myData);
//purge destination grid
//secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup: 'firstGridDDGroup',
notifyDrop: function (ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
//firstGrid.store.sort('name', 'ASC');
returntrue
}
});
 
// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup: 'secondGridDDGroup',
notifyDrop: function (ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
secondGrid.store.add(records);
// secondGrid.store.sort('name', 'ASC');
returntrue
}
});
});

Any suggestions will help guys,

Thanks

Kind Regards

chrislovecnm
10 Jan 2011, 2:55 PM
Has anyone had a problem where the waitMsg image and message does not appear with the search plugin? I was able to fix the same problem with this.getForm().waitMsgTarget = this.getEl(); with a form, but of course the grid's base class is panel ....

jsakalos
12 Jan 2011, 2:22 AM
@baldeep_bhatia, does your question relate to this plugin?

jsakalos
12 Jan 2011, 2:24 AM
@chrislovecnm, does your grid behave as expected w/o the search plugin?

Note: I do not mask the text input of the plugin but I opt for masking the grid while loading if it is required.

abraxxa
12 Jan 2011, 3:21 AM
@Saki: I've discovered that if a user types the search term so slow that a search query is performed, then adds some more chars, another search query is triggered but the first one not canceled.
If the first query takes longer than the second, the results of it overwrite the one matching the search term's result.
Canceling all active requests before starting a new one should fix this issue.

jsakalos
12 Jan 2011, 3:58 PM
Good idea! Thank you.

dumpf
14 Feb 2011, 1:42 AM
As i'm not familiar with Sencha, i'm now at a loss:

Where do i integrate this great plugin in an Editor Gridpanel, i promoted the grid to a class but it seems i can't find the correct Place:">.



would be nice, to tell me where to read/learn.

jsakalos
14 Feb 2011, 3:38 AM
As any other plugin, put it in YourGrid.js file that contains extension of the designer-configured grid in YourGrid.ui.js.

dumpf
14 Feb 2011, 6:42 AM
i think i'm a bit slow.
i've read this: http://www.sencha.com/forum/showthread.php?94996-Help-Grid-Plugins-in-Designer

but im still unclear about the plugin Registration process..i started last week with Extjs and now i feel like being on square one again :(
It would be nice if you know an example to point me to?

jsakalos
14 Feb 2011, 8:08 AM
Have you read "Writing a Big..." (link in my signature)?

dumpf
15 Feb 2011, 2:16 AM
Yes i did read it. My problem so far is, not the comprehension of the logic behind those Extjs/Sencha parts, but how they are put together. My normal MO is to buy a book, read it once, then when actual projects happen, to study them and then 'learning by doing'. And i believe in 'the right tools for the job' so i downloaded Ext Designer. The difference between Ext Designer workflow and building it manually is to me what Neal Stephenson described as 'metaphor shear'. that's the reason of those stupid questions i asked.

my Big Application is running smoothly (build with Ext-Designer, thanks) but now i have to integrate a search for tags or keywords, and i'm a bit lost...

is there any integrate a plugin/search into a Gridpanel howto?

jsakalos
15 Feb 2011, 3:28 AM
If you need basic info on how plugins work then read plugins config option in docs (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel&member=plugins) plus you should study sources of the examples of plugins usage (http://dev.sencha.com/deploy/dev/examples/grid/grid-plugins.html) and, of course, source of http://gridsearch.extjs.eu.

Grid Search is a plugin and works exactly the same way as any other plugin

mcafee
17 Feb 2011, 3:09 PM
Great plugin!! But can i somehow configure what all menu items I want to show in my drop down list?
I do not want to show the user all my column names form the table in the drop down but just 2 fields.

ruperty
18 Feb 2011, 9:42 AM
Hi,

Nice plug-in.

I need to write the backend in a servlet, would you be able to give me some pointers on what the functionality is of your php example so that I can reproduce it in Java?

Regards,
Rupert

jsakalos
18 Feb 2011, 4:04 PM
It's very simple: a) get request params b) create sql with correct where c) return data back.

ruperty
19 Feb 2011, 4:16 AM
I am quite new to ExtJS so I am probably not appreciating some of the fundamentals; I recently did the ExtJS course in London with David Marsland, which was fricking awesome!

The URL is 'process-request.php', there is no query string so how do the request parameters get transferred?

Is there anything I need to change in the ExtJS code apart from the URL?

jsakalos
19 Feb 2011, 4:40 AM
Params are POSTed so they are not part of the url. See http://en.wikipedia.org/wiki/POST_(HTTP)

ruperty
19 Feb 2011, 4:48 AM
Ok, but from where in the ExtJS code are they posted?

And what parameters are posted?

jsakalos
19 Feb 2011, 5:40 AM
Feel free to fully analyze the example at http://gridsearch.extjs.eu including sources. Also, use Firebug (if you use Firefox) or Web Inspector (if you use Safari or Chrome) to analyze the client/server communication.

ruperty
19 Feb 2011, 6:24 AM
Yes, I have looked at the code, but do not understand it fully, which is why I am asking for some help.

I don't have a server running the php code so I can't analyze the communication.

jsakalos
19 Feb 2011, 9:21 AM
Yes, I have looked at the code, but do not understand it fully There is a lot of learning resources. You can start at http://sencha.com/learn, you can read my blog at http://blog.extjs.eu and you can also get some books (ExtJS in Action, Learning ExtJS, and more).

don't have a server running the php code so I can't analyze the communication. You can analyze the communication directly on the example at http://gridsearch.extjs.eu.

BTW, do you use Firebug or Web Inspector?

ruperty
19 Feb 2011, 11:14 AM
Yes, I could look at those resources, but it would be much more useful, and quicker, if you answered my question.

If you do not wish to help let me know and I will not bother you.

jsakalos
19 Feb 2011, 12:32 PM
If you do not wish to help...

It not the question if I wish or not. It is the question if I can. The community has 220,000 members to date and I cannot teach them all personally and individually.

daniel_82
22 Feb 2011, 6:01 PM
I want to make the searching box to a combobox and once you select an item in the searching combobox,
the grid will highlight the selected row (or change the background colour of matched row) and also show the other rows other than only show the matched row.

How can i do this?

Thanks

jsakalos
22 Feb 2011, 11:53 PM
That is entirely different task than the one Search plugin was written for. I think that the best would be to start from scratch.

raydeen
27 Feb 2011, 10:53 PM
I was wondering how I would be able to do a quick validation (to see if a certain input box outside of the grid is filled) before the search is actually sent. If the field has content, the search will go through. Any ideas? :-?
Thanks,
Tony

jsakalos
28 Feb 2011, 6:19 AM
You could listen to store beforeload event and cancel the load if some field is invalid.

wki01
17 Mar 2011, 1:16 AM
The way I see things this is the most useful plugin ever.
Other types of filters are too complex for me.
It would be really useful to have them available in ext40.
There will be a version for ext40?
Thanks

jsakalos
17 Mar 2011, 3:16 AM
Yes.

andyproxis
6 Apr 2011, 6:40 AM
Hello Jozef,

I saw your nice video tutorial about MultiSearch Grid plugin. Is it already avalaible for test ?

Im just programming small intranet application and I think your plugin can speed up work with this application.

PS: VERY GOOD JOB with ExtJS.

Best Regards (S pozdravom)
Andy

jsakalos
6 Apr 2011, 9:55 AM
GMS (Grid MultiSearch) is a commercial extension. Send me a PM with you e-mail, I'll send you details.

idefix
5 May 2011, 5:56 AM
Is there a version available that runs with extjs 4.0.0?

jsakalos
6 May 2011, 2:17 AM
Not yet, but it is on top of my "porting list".

JorisA
3 Jun 2011, 7:17 AM
Jup this one is a must have for EXT4!

jcar98
4 Jun 2011, 2:02 PM
Hi Saki,

Just wanted to congratulate you and thank you for this very excellent plugin. It worked right out of the box as great plugins should!

Will be looking forward to the Ext 4 compatible version!

Keep up the good work!
JC

paubach
15 Jun 2011, 1:41 AM
I'm trying that to make an automated search, the first part works ok, but the second doesn't.
It means I get the text on the search box, but it doesn't get updated. Any help about how to make an automated search?

Thanks,
Pau



I found.

On the grid listeners :


'render':function(grid) {
grid.topToolbar.items.items[1].setValue('defaultStringToSearchHere');
grid.topToolbar.items.items[1].onTrigger2Click.call();
},


EDITED: I'm using it over ExtJS 3.3.1: So, maybe it's not the correct thread, but it's the one where I've found anything useful for what I need.

jsakalos
16 Jun 2011, 8:09 AM
Lines should read:


Ext.getCmp('examplegrid1').plugins[0].field.setValue('lle');
Ext.getCmp('examplegrid1').plugins[0].onTriggerSearch();


Of course, you wouldn't use getCmp in the real app, I've used them to test at http://gridsearch.extjs.eu

paubach
20 Jun 2011, 12:35 AM
Thanks Saki,

It was just perfect!!


BTW, maybe it could be interesting to have this action on the plugin? Have you thought about this???


Regards, and again congratulations and thanks for this great plugin.

Pau

shaoming
23 Jun 2011, 9:41 PM
I managed to get the plugin to work just fine.
I am trying to add a checkbox beside the search box and I need the value to be submitted to the server for processing.
The example shows adding of a checkbox to a secondary toolbar below. However, the checkbox value is not submitted with the search box query value to the server.
Is there a way of doing the above?

hatsu1119
26 Jun 2011, 5:58 PM
I switch dynamically the remote url of JSON DataStore by combobox on the top of grid panel. grid panel works well. but grid search keeps requesting to first url after url switched.
The red line in below code works only once just after urlSelectForm 'select' event is fired, and next JSON DS request to first url again.
I want to make it keep switched url!!

Anyone help me?



Ext.onReady( function(){
Ext.QuickTips.init();
var url1="URL1";
var url2="URL2";
var myStore = new Ext.data.JsonStore( {
autoLoad: true,
remoteSort: true,
baseParams:{
limit:100,
start:0
},
url: url1,
root: 'data',
fields: [
{name: 'name1', type: 'string'},
{name: 'name2', type: 'string'},
{name: 'name3', type: 'string'},
]
});

var urlSelectForm = new Ext.form.ComboBox({
editable: false,
triggerAction: 'all',
valueField: 'value',
displayField: 'name',
store: [url1, url2]
});

urlSelectForm.on("select", function(cmb){
myStore.proxy.conn.url = cmb.getValue();
myStore.load();
gridPanel.store.proxy.conn.url = cmb.getValue();
});

var searchBox = new Ext.ux.grid.Search({
align: 'right',
minChars: 3,
autoFocus: true,
iconCls: "icon-magnifier"
});

var gridPanel = new Ext.grid.GridPanel({
renderTo: 'gridArea',
columns: [
{id: 'name1', header: 'NAME1', dataIndex: 'name1'},
{id: 'name2', header: 'NAME2', dataIndex: 'name2'},
{id: 'name3', header: 'NAME3', dataIndex: 'name3'}
],
store: myStore,
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: myStore,
displayInfo: true,
paramNames : {start: 'start', limit: 'limit'},
doLoad : function(start){
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = 100;
if(this.fireEvent('beforechange', this, o) !== false){
this.store.proxy.conn.url = urlSelectForm.getValue();
this.store.load({params:o});
}
}
}),
tbar: new Ext.Toolbar({
items: [
{ text: "URL:" },
urlSelectForm
]
}),
plugins: [
searchBox
]
});
});

parimala
4 Jul 2011, 1:37 AM
Hi,

I have a GridPanel, and each row of this GridPanel(parent grid) have a expander.When I click on the expander, another GridPanel(child grid) opens with several rows. When I do the search operation using Grid Search Plugin, only the rows of parent grid are getting filtered, but not the child grid.
How i do achieve search for child grid also? any suggestions???

Thanks a lot.

parimala
5 Jul 2011, 10:36 PM
Hi, Earlier one was my second post, and I did not get any replies for my both the posts :(

parimala
5 Jul 2011, 10:48 PM
hi ,
I have two girdPanels, On expanding the first gridpanel, the second gridPanel will pop up.
If I use FilterRow config to filter the rows, it is filtering rows of only the first grid, but not the second grid.
Is it possible to apply the same FilterRow to filter the row of second grid also.
If so how can we achieve it?

thanks

ivanleblanc
8 Jul 2011, 7:42 AM
Saki, this GridSearch plugin has by far been the most useful plugin I have used in Ext 3 and want to thank you for your contribution.

I am moving to Ext 4 and saw that you have not had time yet to port the plugin into Ext 4 so I made a go at it. I hope you don't mind me posting my revisions.

I created a Grid Feature out of the GridSearch plugin.
This feature can easily be applied to the Ext 4 grid example array-grid.js and far as I can tell everything seems to work.

Once the Searching.js file is included you get a ftype "searching".

Searching.js


// JavaScript Document// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, by Ing. Jozef Sakalos
* @date 17. January 2008
* @version $Id: Ext.ux.grid.Search.js 220 2008-04-29 21:46:51Z jozo $
*
* @license Ext.ux.grid.Search is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*
Revised for Ext 4
by Nathan LeBlanc
on July 8, 2011
*/

Ext.define('Ext.ux.grid.feature.Searching', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.searching',

/**
* cfg {Boolean} autoFocus true to try to focus the input field on each store load (defaults to undefined)
*/

/**
* @cfg {String} searchText Text to display on menu button
*/
searchText:'Search',

/**
* @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip
*/
searchTipText:'Type a text to search and press Enter',

/**
* @cfg {String} selectAllText Text to display on menu item that selects all fields
*/
selectAllText:'Select All',

/**
* @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom)
* Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[]
* for position bottom. Plugin does NOT create any toolbar.
*/
position:'bottom',

/**
* @cfg {String} iconCls Icon class for menu button (defaults to icon-magnifier)
*/
iconCls:'icon-magnifier',

/**
* @cfg {String/Array} checkIndexes Which indexes to check by default. Can be either 'all' for all indexes
* or array of dataIndex names, e.g. ['persFirstName', 'persLastName']
*/
checkIndexes:'all',

/**
* @cfg {Array} disableIndexes Array of index names to disable (not show in the menu), e.g. ['persTitle', 'persTitle2']
*/
disableIndexes:[],

/**
* @cfg {String} dateFormat how to format date values. If undefined (the default)
* date is formatted as configured in colummn model
*/
dateFormat:undefined,

/**
* @cfg {Boolean} showSelectAll Select All item is shown in menu if true (defaults to true)
*/
showSelectAll:true,

/**
* @cfg {String} menuStyle Valid values are 'checkbox' and 'radio'. If menuStyle is radio
* then only one field can be searched at a time and selectAll is automatically switched off.
*/
menuStyle:'checkbox',

/**
* @cfg {Number} minChars minimum characters to type before the request is made. If undefined (the default)
* the trigger field shows magnifier icon and you need to click it or press enter for search to start. If it
* is defined and greater than 0 then maginfier is not shown and search starts after minChars are typed.
*/

/**
* @cfg {String} minCharsTipText Tooltip to display if minChars is > 0
*/
minCharsTipText:'Type at least {0} characters',

/**
* @cfg {String} mode Use 'remote' for remote stores or 'local' for local stores. If mode is local
* no data requests are sent to server the grid's store is filtered instead (defaults to 'remote')
*/
mode:'remote',

/**
* @cfg {Array} readonlyIndexes Array of index names to disable (show in menu disabled), e.g. ['persTitle', 'persTitle2']
*/

/**
* @cfg {Number} width Width of input field in pixels (defaults to 100)
*/
width:100,

/**
* @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}
*/
paramNames: {
fields:'fields'
,query:'query'
},

/**
* @cfg {String} shortcutKey Key to fucus the input field (defaults to r = Sea_r_ch). Empty string disables shortcut
*/
shortcutKey:'r',

/**
* @cfg {String} shortcutModifier Modifier for shortcutKey. Valid values: alt, ctrl, shift (defaults to alt)
*/
shortcutModifier:'alt',

/**
* @cfg {String} align 'left' or 'right' (defaults to 'left')
*/

/**
* @cfg {Number} minLength force user to type this many character before he can make a search
*/

/**
* @cfg {Ext.Panel/String} toolbarContainer Panel (or id of the panel) which contains toolbar we want to render
* search controls to (defaults to this.grid, the grid this plugin is plugged-in into)
*/

attachEvents: function() {
this.grid = this.view.up('gridpanel');
if(this.grid.rendered)
this.onRender();
else
this.grid.on('render', this.onRender, this);
},

onRender:function() {

var panel = this.toolbarContainer || this.grid;
var tb = 'bottom' === this.position ? panel.getDockedItems('toolbar[dock="bottom"]') : panel.getDockedItems('toolbar[dock="top"]');
if(tb.length > 0)
tb = tb[0]
else {
tb = Ext.create('Ext.toolbar.Toolbar', {dock: this.position});
panel.addDocked(tb);
}

// add menu
this.menu = Ext.create('Ext.menu.Menu');

// handle position
if('right' === this.align) {
tb.add('->');
}
else {
if(0 < tb.items.getCount()) {
tb.add('-');
}
}

// add menu button
tb.add({
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
});

// add input field (TwinTriggerField in fact)
this.field = Ext.create('Ext.form.TwinTriggerField', {
width:this.width,
qtip: 'ddd',
selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus,
trigger1Cls:'x-form-clear-trigger',
trigger2Cls:this.minChars ? 'x-hidden' : 'x-form-search-trigger',
onTrigger1Click: Ext.bind(this.onTriggerClear, this),
onTrigger2Click: this.minChars ? Ext.emptyFn : Ext.bind(this.onTriggerSearch, this),
minLength:this.minLength
});

// install event handlers on input field
this.field.on('render', function() {

var qtip = this.minChars ? Ext.String.format(this.minCharsTipText, this.minChars) : this.searchTipText;
Ext.QuickTips.register({
target: this.field.inputEl,
text: qtip
});

if(this.minChars) {
this.field.el.on({scope:this, buffer:300, keyup:this.onKeyUp});
}

// install key map
var map = new Ext.KeyMap(this.field.el, [{
key:Ext.EventObject.ENTER
,scope:this
,fn:this.onTriggerSearch
},{
key:Ext.EventObject.ESC
,scope:this
,fn:this.onTriggerClear
}]);
map.stopEvent = true;
}, this, {single:true});

tb.add(this.field);

// reconfigure
this.reconfigure();

// keyMap
if(this.shortcutKey && this.shortcutModifier) {
var shortcutEl = this.grid.getEl();
var shortcutCfg = [{
key:this.shortcutKey
,scope:this
,stopEvent:true
,fn:function() {
this.field.focus();
}
}];
shortcutCfg[0][this.shortcutModifier] = true;
this.keymap = new Ext.KeyMap(shortcutEl, shortcutCfg);
}

if(true === this.autoFocus) {
this.grid.store.on({scope:this, load:function(){this.field.focus();}});
}
} // eo function onRender
// }}}
// {{{
/**
* field el keypup event handler. Triggers the search
* @private
*/
,onKeyUp:function() {
var length = this.field.getValue().toString().length;
if(0 === length || this.minChars <= length) {
this.onTriggerSearch();
}
} // eo function onKeyUp
// }}}
// {{{
/**
* private Clear Trigger click handler
*/
,onTriggerClear:function() {
if(this.field.getValue()) {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch();
}
} // eo function onTriggerClear
// }}}
// {{{
/**
* private Search Trigger click handler (executes the search, local or remote)
*/
,onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue(),
store = this.grid.store,
proxy = store.getProxy();

// grid's store filter
if('local' === this.mode) {
store.clearFilter();
if(val) {
store.filterBy(function(r) {
var retval = false;
this.menu.items.each(function(item) {
if(!item.checked || retval) {
return;
}
var rv = r.get(item.dataIndex);
rv = rv instanceof Date ? Ext.Date.format(rv, this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(val, 'gi');
retval = re.test(rv);
}, this);
if(retval) {
return true;
}
return retval;
}, this);
}
else {
}
}
// ask server to filter records
// your proxy must be a Server proxy
else if(proxy instanceof Ext.data.proxy.Server) {
// 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 && item.dataIndex) {
fields.push(item.dataIndex);
}
});

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

// reload store
store.load();
}

} // eo function onTriggerSearch
// }}}
// {{{
/**
* @param {Boolean} true to disable search (TwinTriggerField), false to enable
*/
,setDisabled:function() {
this.field.setDisabled.apply(this.field, arguments);
} // eo function setDisabled
// }}}
// {{{
/**
* Enable search (TwinTriggerField)
*/
,enable:function() {
this.setDisabled(false);
} // eo function enable
// }}}
// {{{
/**
* Enable search (TwinTriggerField)
*/
,disable:function() {
this.setDisabled(true);
} // eo function disable
// }}}
// {{{
/**
* private (re)configures the plugin, creates menu items from column model
*/
,reconfigure:function() {

// {{{
// remove old items
var menu = this.menu;
menu.removeAll();

// add Select All item plus separator
if(this.showSelectAll && 'radio' !== this.menuStyle) {
menu.add({
xtype: 'menucheckitem',
text:this.selectAllText,
checked:!(this.checkIndexes instanceof Array),
hideOnClick:false,
handler:function(item) {
var checked = item.checked;
item.parentMenu.items.each(function(i) {
if(item !== i && i.setChecked && !i.disabled) {
i.setChecked(checked);
}
});
}
},'-');
}

// }}}
// {{{
// add new items
var columns = this.grid.headerCt.items.items;
var group = undefined;
if('radio' === this.menuStyle) {
group = 'g' + (new Date).getTime();
}

Ext.each(columns, function(column) {
var disable = false;
if(column.text && column.dataIndex && column.dataIndex != '') {
Ext.each(this.disableIndexes, function(item) {
disable = disable ? disable : item === column.dataIndex;
});
if(!disable) {
menu.add({
xtype: 'menucheckitem',
text: column.text,
hideOnClick: false,
group:group,
checked: 'all' === this.checkIndexes,
dataIndex: column.dataIndex,
});
}
}
}, this);
// }}}
// {{{
// check items
if(this.checkIndexes instanceof Array) {
Ext.each(this.checkIndexes, function(di) {
var item = menu.items.find(function(itm) {
return itm.dataIndex === di;
});
if(item) {
item.setChecked(true, true);
}
}, this);
}
// }}}
// {{{
// disable items
if(this.readonlyIndexes instanceof Array) {
Ext.each(this.readonlyIndexes, function(di) {
var item = menu.items.find(function(itm) {
return itm.dataIndex === di;
});
if(item) {
item.disable();
}
}, this);
}
// }}}

} // eo function reconfigure
// }}}

}); // eo extend

// eof




var searching = {
ftype: 'searching',
minChars: 2,
mode: 'local'
};


Then in your Grid config (this comes straight from array-grid.js in the examples):


var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
features: [searching],
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
}
....

stevwinata
20 Jul 2011, 10:23 PM
hy Saki, i create store with metadata, i had changed var cm = this.grid.getColumnModel(), the column header can't retrieve(menu list), i init this plugin in metachange...what should i do? thanks..

clements
21 Jul 2011, 8:54 AM
Saki,

Excellent plugin, as always.

Minor problem, when using IE7 the user cannot seem to filter the results in the following situation,

- start the app (refresh page)

- click on the 'Search' menu, deselect 'All', and select 'Company'

- click on the Search input field, and enter 'marks'

result: no filtering has happened.

Apparently, this has something to do with the focus, but can not seem to find how to fix the problem.

This is still and issue with Internet Explorer 9. And, you can see it on the demo page http://gridsearch.extjs.eu/.

To reproduce: Load demo page using IE 9, click Search button, uncheck a column, click on Search textfield. Enter text and nothing happens.

I confirmed that the KeyUp event is never fired.

Juanyong
26 Jul 2011, 10:38 AM
Greetings, I am facing problem while using search plugin in multi page result table, it only look up the current page instead of all records, below is my settings, please kindly advise, thanks in advance!

GridTable.Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
// defaults - can be changed from outside
layout:'fit'
,border:true
,stateful:false
,width:730
,autoHeight:true



,plugins:[new Ext.ux.grid.Search({
searchText: 'Search'
,iconCls: false
,minChars:2
,disableIndexes:['endDate','effectiveDate','grantAccess','denyAccess']
,mode: 'local'
,autoFocus:true
,dateFormat: 'd m Y H:i'
,position: 'bottom'
})]

Ixtinkt
27 Jul 2011, 7:08 AM
Hi to all. I am nooby in ExtJs, that is why I can't find answer on my question. Here is my code

var cardsStore = new Ext.data.GroupingStore({

url : 'scripts/getCardsList.php',
reader : new Ext.data.JsonReader({
root:'rows',
id:'id',
totalProperty : 'results'
},[
'id',
'prefix',
'description'
]),
baseParams : {
group_id : record.id
}
});
cardsStore.load();
var cardsGrid = new Ext.grid.EditorGridPanel({
store: cardsStore,
clicksToEdit : '1',
autoExpandColumn : 'description',
columns : [
{header : lng.Headers.Groups.CardGroups.CardID, dataIndex : 'id'},
{header : lng.Headers.Groups.CardGroups.Prefix, dataIndex : 'prefix', sortable : true,editor: CardFieldEdit},
{header : lng.Headers.Groups.CardGroups.Description, dataIndex : 'description', id : 'description', editor: CardFieldEdit}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners : {
afteredit : function(e){
var conn = new Ext.data.Connection();
conn.request({
url : 'scripts/groups_Operation.php',
params : {
action : 'update',
id : e.record.data.id,
field : e.record.fields.keys[e.column],
value : e.value,
func : 'Cards'
},
success : function(resp,opt){
Ext.getCmp('groupCards-statusbar').setText(lng.Success.ChngsApply); //изменения применены
e.record.commit();
},
failure : function(resp,opt){
Ext.getCmp('groupCards-statusbar').setText(lng.Errors.Error); //изменения применены
e.record.reject();
}
});
}
},
bbar: new Ext.PagingToolbar({
pageSize: 9,
store: cardsStore
}),
plugins: [new Ext.ux.grid.Search({
searchText: 'Поиск',
mode : 'local',
dateFormat:'m/d/Y',
iconCls: false,
minChars:1,
position: 'bottom',
deferredRender:true
})]
});
Problem is that it can't work remotely. Data in grid displays in different pages, but search occurs on the current page. I tried to change mode to 'remote' - searching doesn't work. How to resolve this problem. If this topik already discussed sorry and please give the link on discussing page. Thks in advance!

jadiagaurang
1 Aug 2011, 10:09 AM
Thanks for writing really useful plugin. But, I want to use this plugin outside Grid Toolbar. I want to place search textbox above and below the grid.

Is it possible t render this plugin outside grid toolbar, somewhere else on page?

Thanks,
Gaurang

ivanleblanc
1 Aug 2011, 10:14 AM
To Juanyong:

I would imaging its because you have

mode: 'local'

When paging you only have the current page's data in cache. So if you are using mode local you will only search the current page.
Setting:

mode: 'remote'
would cause the search to hit the server for a search which is what you want if your paging it using remote.

ivanleblanc
1 Aug 2011, 10:25 AM
Hi to all. I am nooby in ExtJs, that is why I can't find answer on my question. Here is my code

var cardsStore = new Ext.data.GroupingStore({

url : 'scripts/getCardsList.php',
reader : new Ext.data.JsonReader({
root:'rows',
id:'id',
totalProperty : 'results'
},[
'id',
'prefix',
'description'
]),
baseParams : {
group_id : record.id
}
});
cardsStore.load();
var cardsGrid = new Ext.grid.EditorGridPanel({
store: cardsStore,
clicksToEdit : '1',
autoExpandColumn : 'description',
columns : [
{header : lng.Headers.Groups.CardGroups.CardID, dataIndex : 'id'},
{header : lng.Headers.Groups.CardGroups.Prefix, dataIndex : 'prefix', sortable : true,editor: CardFieldEdit},
{header : lng.Headers.Groups.CardGroups.Description, dataIndex : 'description', id : 'description', editor: CardFieldEdit}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners : {
afteredit : function(e){
var conn = new Ext.data.Connection();
conn.request({
url : 'scripts/groups_Operation.php',
params : {
action : 'update',
id : e.record.data.id,
field : e.record.fields.keys[e.column],
value : e.value,
func : 'Cards'
},
success : function(resp,opt){
Ext.getCmp('groupCards-statusbar').setText(lng.Success.ChngsApply); //изменения применены
e.record.commit();
},
failure : function(resp,opt){
Ext.getCmp('groupCards-statusbar').setText(lng.Errors.Error); //изменения применены
e.record.reject();
}
});
}
},
bbar: new Ext.PagingToolbar({
pageSize: 9,
store: cardsStore
}),
plugins: [new Ext.ux.grid.Search({
searchText: 'Поиск',
mode : 'local',
dateFormat:'m/d/Y',
iconCls: false,
minChars:1,
position: 'bottom',
deferredRender:true
})]
});
Problem is that it can't work remotely. Data in grid displays in different pages, but search occurs on the current page. I tried to change mode to 'remote' - searching doesn't work. How to resolve this problem. If this topik already discussed sorry and please give the link on discussing page. Thks in advance!

What do you mean searching doesn't work?
When mode is set to 'remote' the plugin reloads you store with the extra parameters of the filter applied to the load call.
You have to handle the filtering on your server side. The plugin will just give you the parameters you need to do so.

Ixtinkt
3 Aug 2011, 1:05 AM
ivanleblanc, thanks for answer. Do you met some examples of server side using of this params?

Ixtinkt
3 Aug 2011, 2:12 AM
Here is my server side code


<?php
include('../settings.php');
$arr = array();


$db = mysql_connect ($DB_HOST,$DB_USER,$DB_PASS) or die("Database error");;
mysql_select_db($DB_NAME, $db);
mysql_query("SET NAMES 'utf8'");
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['$limit'] != '') ? $_REQUEST['$limit'] : 9;
if (!empty($_REQUEST['fields']) && !empty($_REQUEST['query'])){
$campos = substr(stripcslashes($_REQUEST['fields']),2,-2);
$prewhere = split('\",\"', $campos);
foreach ($prewhere as $index=>$value){
$where[$index] = $value." LIKE '%".$_REQUEST['query']."%' ";
}
$endwhere = " AND ".implode(" OR ",$where);
$count_sql = "SELECT id,name,code,city,address,description FROM shops WHERE group_id = ".$_REQUEST['group_id']." ".$endwhere;
} else {
$count_sql = "SELECT id,name,code,city,address,description FROM shops WHERE group_id = ".$_REQUEST['group_id'];
}

$sql = $count_sql." LIMIT ".$start.", ".$limit;
If (!$rs = mysql_query($sql)) {
Echo '{success:false}';

}else{
$rs_count = mysql_query($count_sql);
$results = mysql_num_rows($rs_count);

while($obj = mysql_fetch_object($rs)){
$arr[] = $obj;
}
Echo '{success:true,results:'.$results.',rows:'.json_encode($arr).'}';
}
?>

idefix
3 Aug 2011, 4:06 AM
As small comment to you php script. It is vulnerable to sql injection, you should fix that in your final version. If you pass a string as start='5;delete from shops' it will clean up your table :)

Ixtinkt
3 Aug 2011, 5:01 AM
As small comment to you php script. It is vulnerable to sql injection, you should fix that in your final version. If you pass a string as start='5;delete from shops' it will clean up your table :)
You can not pass anything else distinct of integer. Ext.ux.grid.Search plugin deny this, only int.
P.S. I try "5;delete from shops" - doesn't work.

ivanleblanc
3 Aug 2011, 5:04 AM
ivanleblanc, thanks for answer. Do you met some examples of server side using of this params?

Well this is what the plugin attaches to the reload request based on what columns you tell the plugin you want to search in.


fields : ["id","invoice_to","vendor_name","description"]
query: 4608


On my server side I will have a function called remote_filtering. It looks like this:



function remote_filtering($fields=false, $table = NULL) {

$table = ($table == NULL) ? $this->table : $table;
$query = $this->input->get_post('query');
if($query && $query != '') {

if($fields!=false) {}
elseif($this->input->get_post('fields'))
$fields = !($fields) ? json_decode($this->input->get_post('fields')) : $fields;
else
$fields = $this->db->list_fields($table);

$query = addslashes($this->input->get_post('query'));
foreach($fields as $field) {
$this->db->or_having($field.' LIKE \'%'.$query.'%\'');
}
}
}


The code above is using Codeigniter to build the query... but you get the idea of what I'm doing.
I check to see if I have a "query" parameter on the request and if so i use the "fields" parameter that the plugin sends to know what column to apply a LIKE statement too.

The code just appends HAVING statements to the end of an already created SQL statement.

idefix
3 Aug 2011, 5:17 AM
Try:


http://host/phpscript.php?limit=2%3Bdelete%20from%20shops

Ixtinkt
3 Aug 2011, 7:06 AM
1. All requests sends via JS, to call main script with get params doesn't return
terrible result.
2. Haker do not know where scripts are place.
3. I do not understand but if call my php script with get param I get
"SELECT g.id,g.name,g.description,(select count(s.id) FROM shops s where s.group_id=g.id) count FROM shop_groups g LIMIT 0, 2;delete from shop;"
but table shop rest not empty
and sql query do not execute

idefix
3 Aug 2011, 7:23 AM
Is the table not named shops?

Ixtinkt
4 Aug 2011, 3:17 AM
I have created a new table, named "shop", to do not erase "shops"

idefix
4 Aug 2011, 4:39 AM
it will not erase the table. It will only clear the content in the table.
But maybe you have some security modules in your webserver enabled that will filter out the kind of chained querries.

Ixtinkt
4 Aug 2011, 10:25 PM
it will not erase the table. It will only clear the content in the table.
But maybe you have some security modules in your browser enabled that will filter out the kind of chained querries.
You think I do not understand what it can erase? It is server side script, browser doesn't have any attitude.