PDA

View Full Version : Grid Search Plugin for Ext 4.x [updated]



Pages : 1 2 [3] 4 5

franck34
15 Apr 2009, 4:35 PM
Great plugin !

I'm looking for a way to set a default value in the textfield (local store), after render (or before?), to be able to filter the grid by default.

Any way ?

Thanks in advance.

franck34
15 Apr 2009, 5:43 PM
I found.

On the grid listeners :


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

elona
30 Apr 2009, 7:53 AM
great work!
Saki u'r the man ...i followed ur tips how to work on a big application and now everything works like a charm

i have'got one question regarding the search plugin ...i couldn't read all the posts in this thread so i'm just posting my problem
here's a screenshot of the search plugin. why do this checkboxes and find image appear in such a weird way ?

jsakalos
30 Apr 2009, 9:50 AM
Check your Ext.BLANK_IMAGE_URL and location of ext/resources in <link rel...> in the head.

elona
4 May 2009, 3:08 AM
Thanks a lot for the help. The link to Ext.BLANK_IMAGE_URL was wrong. Now it's ok

elona
4 May 2009, 3:42 AM
ups i've got another problem :((
what about this case in IE ?

jsakalos
4 May 2009, 7:04 AM
It's bug in Ext 2.x, fixed in SVN but fix can be also found in Bugs forum. Please search.

perdar
7 May 2009, 7:48 AM
Exactly! There is also config variable checkIndexes. It can be either 'all' or array of indexes to check initially.

Saki,

I had this problem when rendering 2 Grids at the same time.
The old search would contribute to the new search component's parameters when loading the store. I fixed this problem by adding 1 line the the onRender Code.

I added one line into the onRender Code.... (highlighted in bold.)



,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
});

// add input field (TwinTriggerField in fact)
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
});
//darrin added this line
this.onTriggerSearch();

// 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});
}

// 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

jsakalos
7 May 2009, 10:10 AM
It looks like some object/array had been shared between the two instances. Can you post the simplified code of those 2 grids?

aomadevelopers
19 May 2009, 1:33 AM
Hi,

i am using your grid search plugin which is really great. But i have created the grid panel by using xtype:'grid' to render the same grid in two different places in the same page.
But there are two search triggerfield which is coming on my first grid panel toolbar and also if i try to search it is searching in both the grid at the same time.

Below is my code:


this.gridPanel ={
xtype:'grid',
cls:'searchgrid',
border:false,
loadMask:{
msg:'Loading Approvals...'
},
viewConfig: {
forceFit: true,
emptyText: 'No Existing Approvals Available'
},
store: this.store,
autoHeight: true,
cm: new Ext.grid.ColumnModel([{
header: 'DATE',
sortable: true,
dataIndex: 'Date',
renderer:formatDate
},
{
header: 'APPROVAL TYPE',
sortable: true,
dataIndex: 'ApprovalType'
},
{
header: 'STATUS',
sortable: true,
dataIndex: 'Status'
},
{
header: 'ADDITIONAL COMMENTS',
sortable: true,
dataIndex: 'AdditionalComments'
}]),
plugins:[new Ext.ux.grid.Search({
width:240,
searchText:'',
autoFocus:true,
dateFormat:'Md, Y'
})],
tbar:[{}]
}


And am calling this.gridPanel in two different panels.

will the grid search plugin work only if I have a separate instance for two grid panel? or Is there any other solution?

jsakalos
19 May 2009, 12:18 PM
You cannot have one instance of a grid (or any other component) simultaneously displayed in two different places.

chinnapandu
20 May 2009, 1:43 PM
Creating two different grid panel instances for showing the grid in different places is the only solution

juferoto
25 May 2009, 8:40 AM
My problem is that plugin work very well of mode local but it's using mode remote not working

var dsBase = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'respuesta',
totalProperty: 'total',
id:'numError',
fields:
[
{name: 'numError', mapping: 'numError'},
{name: 'descriPro', mapping: 'descriPro'},
{name: 'numLis', mapping: 'numLis'},
{name: 'numSol', mapping: 'numSol'}
]
}),
proxy: new Ext.data.HttpProxy({
url: '<?echo URL_APIS?>base/Error'
}),
remoteSort: true
});

var expansion = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<br /><table border="1" cellpadding=4 cellspacing=0><tr>',
'<td width="34%"><p>&nbsp;</p><p align="l"><b>Descripci&oacute;n del Problema:</b></p><p>&nbsp;</p></td>',
'<td width="66%"><p>&nbsp;</p><p align="justify">{descriPro}</p><p>&nbsp;</p></td>',
'</tr></table>'
)
});

var colModelErr = new Ext.grid.ColumnModel([
expansion,
{id:'numErr', header: "Número del Problema", width: 52, sortable: true, dataIndex: 'numError', renderer:function(val){ return ('# '+val) }},
{header: "Descripción del Problema", width: 210, sortable: true, dataIndex: 'descriPro', renderer:function(val){ return (val+'...') }},
{header: "Número de Soluciones", width: 55, sortable: true, dataIndex: 'numSol', renderer:function(val){ return (val+' Sol.') }}
]);

var buscarErr = new Ext.ux.grid.Search({
mode:'remote',
position:top,
width:260,
autoFocus:true,
showSelectAll:true
})

var panelResul = new Ext.grid.GridPanel({
id: 'buscaInfo',
border:false,
stateful:false,
title:'Resultados de la Busqueda',
bodyStyle:{ background: '#ffffff' },
height: 447,
hidden: false,
autoScroll:true,
ds: dsBase,
cm: colModelErr,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
enableColLock:false,
clicksToEdit:1,
viewConfig:
{
forceFit:true
},
tbar: [
{
text: 'Ver Soluciones',
id:'Solucion',
tooltip: 'Opción para ver las soluciones de un error en específico',
handler: function()
{
realizar(this.id);
},
iconCls:'libreta'
},'-',{
text: 'Ver PDF',
id:'PDF',
tooltip: 'Opción para ver el pdf de un error específico',
handler: function()
{
realizar(this.id);
},
iconCls:'pdf'
}
],
bbar: new Ext.PagingToolbar({
store: dsBase,
pageSize: 1,
displayInfo: true,
displayMsg: 'Resultados {0} - {1} of {2}',
emptyMsg: "Ningun resultado disponible"
}),
plugins:
[
buscarErr, expansion
]
});

dsBase.load({params:{start:0, limit:1}});


public function executeError()
{
$conexion = Propel::getConnection();
$resulDatosTotal = $conexion->executeQuery('select count(*) from apis_error');
$resulDatosTotal->next();
$numeroDatosTotal = $resulDatosTotal->getInt("count");
$consulta = 'SELECT * FROM apis_error';
$inicio = (integer) ($this->getRequestParameter('start'));
$fin = (integer) ($this->getRequestParameter('limit'));
$limite = $consulta." LIMIT ".$fin." OFFSET ".$inicio;
$sentencia = $conexion->prepareStatement($limite);
$result = $sentencia->executeQuery();
$pos = 0;
$datos;
while($result->next())
{
$datos[$pos]['numError'] = $result->get("no_error");
$datos[$pos]['descriPro'] = $result->get("descrip_prob");
$datos[$pos]['numLis'] = $result->get("no_listado");
$sentencia = $conexion->prepareStatement("select count(*) from apis_listado_asignado where no_listado_as = '".$datos[$pos]['numLis']."'");
$resultCone = $sentencia->executeQuery();
$resultCone->next();
$datos[$pos]['numSol'] = $resultCone->getInt("count");
$pos++;
}
$conversion = json_encode($datos);
return $this->renderText('({"total":"'.$numeroDatosTotal.'","respuesta":'.$conversion.'})');

}


Please, help me

jsakalos
25 May 2009, 10:01 AM
I'd suspect the server side code as long as the plugin sends query and fields variables.

juferoto
25 May 2009, 11:17 AM
I'd suspect the server side code as long as the plugin sends query and fields variables.

How can i make?

jsakalos
25 May 2009, 11:53 AM
There is an example server side code at http://gridsearch.extjs.eu/

stefanorg
27 May 2009, 11:37 PM
Hi saky,
first of all i want to thank you for your work thanks to that i've learned a lot about developing with ext. THANKS :)

There is a version 3.x of this plugin?

jsakalos
28 May 2009, 12:24 AM
The current version works OOTB in Ext 3.0. I've tested just briefly so if you have any issues post back.

stefanorg
28 May 2009, 2:02 AM
ok it works but i've some issue with the alignment, the search field is always on the right after or before the status info:

i've this code:


Ext.apply(this,{
store:jsonStore
,columns: this.columns
,sm: sm
,bbar: new Ext.PagingToolbar({
pageSize:this.defPageSize
,displayInfo:true
,store:jsonStore
})
,loadMask:{
msg:this.loadingWaitMsg
,removeMask:true
,store:jsonStore
}
,plugins:new Ext.ux.grid.Search({
iconCls:'icon-zoom'
,position:'bottom'
,readonlyIndexes:['company']
,disableIndexes:['email']
,minChars:2
,autoFocus:true
//,align:'rigth'
})
});


i can't be able to put the search field after the refresh button of the paging toolbar, i'm doing something wrong with the configuration?




The current version works OOTB in Ext 3.0. I've tested just briefly so if you have any issues post back.

jsakalos
28 May 2009, 10:51 AM
Yes, it behaves different between 2.x and 3.x. No idea why (yet).

Nam
3 Jun 2009, 2:25 AM
I replicated the example of yours into a project I am working on, and everything works except the X to reset the search. Do you have any possible ideas as to why, or do you have any tips in regards to figuring out why it's not working?

Thanks

jsakalos
3 Jun 2009, 6:00 AM
If X works at demo page then there must be a difference in your case. Version of Search plugin? Version of Ext? Something else?

Nam
3 Jun 2009, 9:09 AM
If X works at demo page then there must be a difference in your case. Version of Search plugin? Version of Ext? Something else?

Of course, only difference I can think of is that I attached some listeners (rowcontextclick/dblclick).

Latest at http://gridsearch.extjs.eu/
Latest Stable 2.x

jsakalos
3 Jun 2009, 9:10 AM
Use devel version of the plugin - it has majority of bugs fixed.

Nam
3 Jun 2009, 9:26 AM
Use devel version of the plugin - it has majority of bugs fixed.

Yup, that fixed it, Thanks.

wki01
3 Jun 2009, 11:03 PM
Yes, it behaves different between 2.x and 3.x. No idea why (yet).



I studied the source a bit but I can not understand why is happening ..

stefanorg
4 Jun 2009, 9:17 AM
I studied the source a bit but I can not understand why is happening ..

nor me. i hope saki will fix when he have some time.

jsakalos
4 Jun 2009, 10:57 AM
Definitely not before Ext 3.0 final is out.

Nam
4 Jun 2009, 4:21 PM
Is there a way to specify the search fields?... I have the columns Name, Rating, and Cost, and in the Row Body I have the description. I would like the search fields to allow the user to select Name and Description. So I have disabled using disableIndexes Rating and Cost, but I haven't yet figured out how to specify indexes which are not listed in the column model.

Thanks.

jsakalos
4 Jun 2009, 11:36 PM
It is not possible, however, you could listen to store beforeload event and add that field to fields array in baseParams.

pantarhei
8 Jun 2009, 2:34 AM
i need to select in grid A containing the search plugin only one search parameter, fill the search field with a value coming from a grid B in a "pop up window" and trigger the search plugin in grid A by script from row doubleclick from grid B.

hopefully someone can understand what i need. any ideas?

regards

jsakalos
8 Jun 2009, 10:47 AM
http://extjs.eu/docs/?class=Ext.ux.grid.Search&member=field

pantarhei
8 Jun 2009, 10:19 PM
thx a lot. i was digging around in the plugin code to find something. but i'm using a kind of very old version. so that field wasn't available. i think an update is needed and recommended.

btw. great work

nar
18 Jun 2009, 12:40 PM
I am sure there is a better way to do this, but this is the first time i've tried to add to an extension.

The goal was to allow the search bar to be moved off the grid so it could support different layouts.

In the onRender function of Ext.ux.grid.Search.js I added:



if (tb == undefined) {
tb = Ext.getCmp(this.newLocation);
}


In the grid I do not have a tbar or bbar defined and I define this in my grid as:


plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:2,
position:top,
autoFocus:true,
newLocation: 'statusBar'
})],


Seems to be working fine for me, thoughts?

jsakalos
18 Jun 2009, 1:32 PM
Any live demo? Sounds interesting and useful.

mango
19 Jun 2009, 5:37 AM
Is there anyway to combine the search box with title bar in grid?

I want to add search box on next to title of the grid, instead of on toolbar.

I hope my question is clear :)

Thanks,
Sri

jsakalos
19 Jun 2009, 5:50 AM
No, the plugin is for top or bottom toolbar.

mjlecomte
19 Jun 2009, 6:08 AM
Is there anyway to combine the search box with title bar in grid?

I want to add search box on next to title of the grid, instead of on toolbar.

I hope my question is clear :)

Thanks,
Sri
I think Jay Garcia is working on an extension for this, search and ye shall find.

nar
22 Jun 2009, 1:11 PM
No demo sorry, pretty easy to implement though for anyone that wants to play =). As for use I have the search box coming up in a bar at the bottom of a panel that controls a number of actions for items in the panel (one of the items being a grid). Just for aesthetics mainly, the way my interface was designed it looks odd to use tbar or bbar.

nar
24 Jun 2009, 1:58 PM
Other items that I added that were nice was a id field and a hidden field, this gave me the ability to hide the searchField and the searchButton. This is not as clean as it could be, but I hope it gives ideas to people.



// add menu button
tb.add({
id: 'searchButton' + this.id,
hidden: this.hidden,
text:this.searchText,
menu:this.menu,
iconCls:this.iconCls
});
....
this.field = new Ext.form.TwinTriggerField({
id: 'searchField' + this.id,
hidden: this.hidden,
width:this.width,
selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus,
trigger1Class:'x-form-clear-trigger',
trigger2Class:this.minChars ? 'x-hide-display' : 'x-form-search-trigger',
onTrigger1Click:this.onTriggerClear.createDelegate(this),
onTrigger2Click:this.minChars ? Ext.emptyFn : this.onTriggerSearch.createDelegate(this),
minLength:this.minLength
});


I have multiple grids in an accordion and save the header of the accordion to create unique values for the buttons.


grid.searchButtonId = 'searchButton' + store.getAt(i).get("accordionHeader");
grid.searchFieldId = 'searchField' + store.getAt(i).get("accordionHeader");


Plugins:


plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:2,
autoFocus:true,
id: store.getAt(i).get("accordionHeader"),
hidden: true,
newLocation: 'generalStatusBar'
}), expander],


On the expand and collapse functions of the accordions parent I add:


'expand': function (p) {
Ext.getCmp(p.items.get(0).searchButtonId).show();
Ext.getCmp(p.items.get(0).searchFieldId).show();
},
'collapse': function (p) {
var searchButtonObject = Ext.getCmp(p.items.get(0).searchButtonId)
if (searchButtonObject != undefined) {
Ext.getCmp(p.items.get(0).searchButtonId).hide();
Ext.getCmp(p.items.get(0).searchFieldId).hide();
}
}

Had to add a check of searchButtonObject since the default state of the accordion is collapse, dont need to fire that off at the start.

Hope this makes since, I had to change alot of code for posting.

What this has given me is several grids in an accordion layout, if you expand an item in the accordion with a grid the search button and text field are added to generalStatusBar, if you collapse the item the search button and text field are removed.

jsakalos
24 Jun 2009, 2:58 PM
Although I haven't tested it myself it sounds very good and may be useful in some situations. I'll make my own tests and will imagine some use cases and I'll let you know if come up with something.

mystik
25 Jun 2009, 4:09 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.

jsakalos
25 Jun 2009, 10:26 AM
Can you find a fix? I'm on FF@Linux.

moegal
26 Jun 2009, 2:16 PM
Great plugin!

I have 2 questions.

1. How can I clear the field without clicking the X button. I am implementing a simple search here and a more advanced search that needs to clear the field.

2. I have menuStyle:'radio' and the 1st item is selected but all fields are posted in fields along with the query data if I don not manually select an item. Do I need to to use checkIndexes to force it to actually select 1 item on 1st display? If I select an item it does narrow it down correctly.

on a side note. I occasionally get the following when I select a radio item:

"[Exception... "'Permission denied to get property HTMLDivElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]"

Thanks, Marty

jsakalos
26 Jun 2009, 2:40 PM
1. The plugin has property field that holds the TwinTriggerField so you can call field.setValue('')
2. Yeah, try to use checkedIndexes and post back the result - I've never really used radio style.
3. I guess it's chrome + Firebug error and not the real JS error.

moegal
26 Jun 2009, 2:55 PM
great, I will give it a try and let you know. Thanks for the fast reply.

Marty

moegal
26 Jun 2009, 3:30 PM
Saki,

Yes, if I set a value with checkedIndexes['myfield'] and I have menuStyle: 'radio' it works.

I have a question on clearing the field. Is there a way to identify the plugin by name or id? I can clear the value this way provided this plugin is the 1st all of the time. I may be using several plugins thought.

gridF5D0.plugins[0].field.setValue('');

Thanks, Marty

Never mind: I just created the plugin as a var and then assigned it that way and then I can call by name. Thanks!

derbbre
29 Jun 2009, 12:36 AM
Hi - thanks for the great plugin. However, in my implementation, I have no clear button in Firefox 3.0.11 and a goofy one (both 'x' and looking glass show at the same time) in Safari 4 and IE. I dug through all forums about the TwinTriggerField and have checked through the CSS but couldn't find anything odd. Any ideas why is behaving this way?

The configuration in my EditorGrid:


plugins:[new Ext.ux.grid.Search({
iconCls: 'icon-zoom',
checkIndexes: ['name_first','name_last','username','email'],
minChars: 34,
position: 'top'
})],

Thanks again.

jsakalos
29 Jun 2009, 3:11 AM
Does the problem also happen at the demo page?

http://gridsearch.extjs.eu

derbbre
29 Jun 2009, 1:13 PM
Does the problem also happen at the demo page?

http://gridsearch.extjs.eu

Thanks for the reply. I was afraid you'd ask that. It does not. While the demo is just a little "off" (the text field seems too small), the clear button does work. I've looked at the css via Firebug and my implementation look identical to the demo.

Guess I hoped that you maybe had run into this or had a quick answer for me to try. I'll keep after it, thanks for your time.

jsakalos
29 Jun 2009, 1:17 PM
Make sure that you are using latest devel version of the plugin.

derbbre
1 Jul 2009, 10:44 AM
Make sure that you are using latest devel version of the plugin.
I am, thanks -- I had some crazy css issues that I straightened out, thanks again for your help.

Also, the ext-all.css from the ExtJS distribution was causing the Safari text field height issues. I added

.ext-safari .x-small-editor .x-form-field {
height: 18px !important;
line-height: 18px !important;
}
to my css and now it's OK as well.

On another point, I suggest the following modification: in your code you initialize the qtip text on the seach field based on minChars only, but I wanted to have no tip. I modified line 261
if(undefined === this.minChars || 1 < this.minChars) { to read
if(1 < this.minChars && this.minCharsTipText != '') { and set minCharsTipText = '' in my config and now there's no tip. Without the mod I got a very small, blank qtip. Just a thought.

Thanks again for such a useful plugin!

jsakalos
1 Jul 2009, 11:33 AM
Thank you - I've incorporated your fix with a little modification. The line now reads:


if((undefined === this.minChars || 1 < this.minChars) && this.minCharsTipText) {

aleczapka
8 Jul 2009, 5:14 AM
Hi,

Thx for the great plugin.

I have one question though... is there a way to focus the searchbox from within my code other the setting autofocus?

jsakalos
8 Jul 2009, 10:26 AM
Do you mean this: http://extjs.eu/docs/?class=Ext.ux.grid.Search&member=shortcutKey ? Or programmatically? If the latter is the case take a look in the code how autoFocus works. Just grab the reference to the field and call .focus()

aleczapka
10 Jul 2009, 1:20 AM
yes, I mean programmatically. Gettting the reference is the problem.

I have a grid with the plugin: search.Grid and I have no idea how can I access it from there.

When I do


console.log(mygrid.plugins[0])


I see an Object which references to your plugin, and I can see/browse in firebug the 'field' in there.
However



console.log(mygrid.plugins[0].field)


gives me 'undefined'.

getindas
10 Jul 2009, 1:44 AM
Hello Team,

Whenever i putting my mouse pointer in a row. it shows the qtips. I want to know that, can i increase the height of qtips. We are increasing the width using
ext:qwidth="300"

but if i m using ext:qheight="300", so it is not working. Can you give ur comment. Basically what is the problem and how to rectify them. I am adding the screen shot. Please see the screen shot. which is in zip file.

jsakalos
10 Jul 2009, 6:15 AM
How does your question relate to this plugin?

redcs
13 Jul 2009, 1:46 AM
Hi!
I am new in Ext. I've trying to use this plugin. But I have an error, the "search field" is not show. :-/

this is code that i use :


xtype: 'editorgrid',
id: 'mygrid',
ds: myds,
cm: mycm,
sm: mysm,
plugins: new Ext.ux.grid.Search({
id:'myidsearch',
iconCls:'icon-zoom',
minChars:2,
}),
bbar: [],



any idea?

thx b4..

mjmonserrat
13 Jul 2009, 1:59 AM
maybe you should try to remove the comma at the end of 'minChars:2,' . It is the last attribute of your new Ext.ux.grid.Search so you don't have to put comma at the end.

redcs
13 Jul 2009, 3:02 AM
maybe you should try to remove the comma at the end of 'minChars:2,' . It is the last attribute of your new Ext.ux.grid.Search so you don't have to put comma at the end.

i try to remove comma, but the "search field" still not show.

other information: that i place the grid on the card layout on the viewport (like layout browser in extjs-2.2 example).

i'm sorry if my english is bad. :">

redcs
28 Jul 2009, 11:50 PM
i try to remove comma, but the "search field" still not show.

other information: that i place the grid on the card layout on the viewport (like layout browser in extjs-2.2 example).

i'm sorry if my english is bad. :">

is there anybody can help me please :((

jsakalos
29 Jul 2009, 6:20 AM
plugins config option must be array


plugins:[ new Ext.... ]

ssawchenko
29 Jul 2009, 1:37 PM
First off, thank you for putting so much time into a plugin like this. Second, I am fairly new to Ext, so it is quite possible that there is a much easier way to do what I want...

I am looking to move the search bar from the tbar that we must use in the plugin, to say, another Ext panel that I can move around my page to wherever I want. In other words, I don't want the search area to be "tied" to the top/bottom of the grid.

When inspecting the created DOM I could not find a specific id to use to easily find the created elements, so instead I extended Ext.ux.grid.Search and overrode the "onRender" function. I'll post the code below so it's easy to see exactly what I changed...

I'm wondering though if there is an easier way to accomplish this? This works, but obviously may require a little more upkeep in the future.


Ext.extend(Ext.delta.grid.Search, Ext.ux.grid.Search, {

renderToDiv: null, /* id of div where new Panel will go */

/**
* adds plugin controls to <b>existing</b> toolbar and calls reconfigure
* @private
*/
onRender: function() {

// In this extention we do not want to render the search to the toolbar.
// Instead we want to render

//-------------------------------------------------------------------------
/* ORIGINAL CODE - Commented out original code to get desired functionality.
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
});
*/
//-------------------------------------------------------------------------

//-------------------------------------------------------------------------
/* NEW CODE - Added for desired functionality */
// add menu
this.menu = new Ext.menu.Menu();

var searchPanel = new Ext.Panel({
renderTo: this.renderToDiv
});

var tb = new Ext.Toolbar({
items: [
'->',
{
text: this.searchText,
menu: this.menu,
iconCls: this.iconCls
}
]
});

searchPanel.add(tb);
//-------------------------------------------------------------------------

//-------------------------------------------------------------------------
/* ORIGINAL CODE - Commented out original code to get desired functionality. */
// add input field (TwinTriggerField in fact)
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-hide-display' : 'x-form-search-trigger'
, onTrigger1Click: this.onTriggerClear.createDelegate(this)
, onTrigger2Click: this.minChars ? Ext.emptyFn : this.onTriggerSearch.createDelegate(this)
, minLength: this.minLength
});

// install event handlers on input field
this.field.on('render', function() {
// register quick tip on the way to search
if (undefined === this.minChars || 1 < this.minChars) {
Ext.QuickTips.register({
target: this.field.el
, text: this.minChars ? String.format(this.minCharsTipText, this.minChars) : this.searchTipText
});
}

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();

//-------------------------------------------------------------------------
/* NEW CODE - Added for desired functionality */
searchPanel.render('frame');
//-------------------------------------------------------------------------

// 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 extend

// eof

jsakalos
29 Jul 2009, 1:43 PM
Read through the thread; I think that somebody already posted a solution for that.

jsakalos
29 Jul 2009, 1:44 PM
Try to set toolbarContainer.

ssawchenko
29 Jul 2009, 2:15 PM
Try to set toolbarContainer.

Brilliant!

Sorry I missed that gem, although it was good practice for me with extending plugin functionality!

pantarhei
5 Aug 2009, 2:57 AM
in another post somebody asked how to cope with a lot of columns.
http://extjs.com/forum/showthread.php?p=149882#post149882

any chance to display 20 fields not in a row of 20, but in to columns
with 10 each?

i have 20 search fileds, and every filed should be searchable. but the list
is pretty long with 20 entries.

regards

jsakalos
5 Aug 2009, 6:59 AM
Ext 3 has scrolling menus so it shouldn't be a problem.

ssawchenko
5 Aug 2009, 2:37 PM
Please disregard my question; I have figured it out.

I am able to change the delay between ceasing typing and the search by changing the buffer parameter being set on the trigger field element's "on" function.

Lmouse
6 Aug 2009, 9:08 PM
;)

Georgioa
12 Aug 2009, 4:56 AM
Hi ! (I dont know if this bug was already submited)

I tried to use GridSearch with a DirectStore.
if a set paramsAsHash to true, fields are double-encoded in Json :

{"action":"DataGridControler","method":"loadData","data":[{"limit":10,"fields":"[\"colonne1\"]","query":"az","start":0}],"type":"rpc","tid":3}

Replace :

if(fields.length) {

store.baseParams[this.paramNames.fields] = Ext.encode(fields);

store.baseParams[this.paramNames.query] = val;
}by :


if(fields.length) {
if(store.paramsAsHash === true ){
store.baseParams[this.paramNames.fields] = fields;
}else{
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
}
store.baseParams[this.paramNames.query] = val;
}

OliverT
18 Aug 2009, 4:28 AM
Hi @all,

i'm using this plugin with ext 2.xx without problems, but after upgrading to version 3.0 this plugin doesnt show up in ie 6 and 7, when nested into a tab layout.
I am using deferredRender: true and hidemode: 'offsets' without no problem in FF, IE8, Chrome and Safari.

I figured out that removing the trainling white space (IE8 Developertools) in class attribute the search field is visible again using IE8 compatibility mode

<input name="ext-comp-1179" class="[WS here]x-form-text x-form-field" id="ext-comp-1179" style="width: 58px;" type="text" size="16" autocomplete="off"/>

Can somebody please tell me if this really causing this bug, cause I didnt find the place to override the class attribute.

Thanks a lot!

jsakalos
19 Aug 2009, 10:16 AM
Is the space generated by the plugin?

OliverT
19 Aug 2009, 10:20 AM
Hi Saki,

yes I think so, cause I'm not overriding the class attribute.

jsakalos
19 Aug 2009, 10:26 AM
Hmm, I've read through the code but I haven't found anything that could add that white space.

OliverT
19 Aug 2009, 9:41 PM
Ok, I will look through my code again, but Im using an unmodified version of your plugin.
Can I override that class attribute?

jsakalos
19 Aug 2009, 11:22 PM
First you need to find "who" adds that white space. It can be Ext, your code, the plugin.

smokeman
20 Aug 2009, 7:41 AM
Hey Saki!
it was great to meet you at the ext conference!

I have a need to use an external call to filter a grid with your search grid plugin. This is the first time I've run up against needing to call a function of a plugin, so not sure how to go about it. I don't see a getPlugin() on a gridpanel(should be, like getStore, getView, etc..)

I modified the onTriggerSearch to accept (field, filter),

then added these:

if(!filter){
var val = this.field.getValue();
}
else{
var val = filter;
}
if(!field){
// get fields to search array
var fields = [];
}
else {
var fields = [field];
}


will I have to pass the grid id too?
I tried assigning the plugin an id, but I still got Ext.getCmp("gridsearchplugin") is undefined

thanks...!

smokeman
20 Aug 2009, 8:20 AM
well, I remembered you told me how to access the plugin already externally,
so I'm further...

Ext.getCmp("searchgrid").plugins[0].onTriggerSearch("Audit ID",node.id);

this actually fires the search, but it looks like I can't pass the field, or search var into the function...?

Sigma
20 Aug 2009, 8:50 AM
I first just have to say this: THIS PLUGIN IS AWESOME!! It has helped improve the usability of my website so much.


I just have this small issue regarding using it in a GridPanel with CheckBoxSelectionModel. I have a GridPanel with about 80 rows. When a user selects all, and then searches for a specific row, all other rows are de-selected. This makes it tedious for a user to select many rows but not all. Has anyone experienced this problem and knows a workaround? I've included some snapshots to make the issue clearer.


If you can help in any way, thank you so much!

jsakalos
21 Aug 2009, 1:13 AM
well, I remembered you told me how to access the plugin already externally,
so I'm further...

Ext.getCmp("searchgrid").plugins[0].onTriggerSearch("Audit ID",node.id);

this actually fires the search, but it looks like I can't pass the field, or search var into the function...?

onTriggerSearch takes value from the field, however, it would be pretty easy to add a support for arguments. However, user loses visual feedback what he is searching for. I'd recommend to set field's value first and then call the method.

jsakalos
21 Aug 2009, 1:15 AM
I first just have to say this: THIS PLUGIN IS AWESOME!! It has helped improve the usability of my website so much.


I just have this small issue regarding using it in a GridPanel with CheckBoxSelectionModel. I have a GridPanel with about 80 rows. When a user selects all, and then searches for a specific row, all other rows are de-selected. This makes it tedious for a user to select many rows but not all. Has anyone experienced this problem and knows a workaround? I've included some snapshots to make the issue clearer.


If you can help in any way, thank you so much!

The plugin filters store so the behavior is expected as selections are not retained between store (re)loads. You'd need a "persistent selections" code/plugin.

ValiBOSS
21 Aug 2009, 2:30 AM
Improvement for the GridSearchPlugin

Let's say you have an EditorGridPanel, and all the columns are edited by a TextField. In this case, it works perfectly. (Saki, that's the best plugin :D)

But what happens if you edit some columns with ComboBoxes? For example: a column is called category_id and is edited with a ComboBox with a displayField and valueField and a renderer, that resolves that id into a beautiful text such as "TVs, Monitors, etc".
What I did was making the GridSearch plugin searching by the name of the category, by going in to the comboboxes store and performing the search there.

I have performed a minor tweak to make Saki's GridSearch plugin also search for text in the editor's store (only if the editor is a ComboBox).

All you have to do is open the gridsearch.js file and add a new method:


storeSearch: function(item, val, r) {
// suppose it will not be found
var _retval = false;
try {
// get the column index having the current item's dataIndex
var _colIdx = this.grid.getColumnModel().findColumnIndex(item.dataIndex);
if (_colIdx != -1) { // if a column is found
// then get it's editor
var _editor = this.grid.getColumnModel().getColumnAt(_colIdx).getEditor();
if (_editor !== undefined && _editor instanceof Ext.form.ComboBox) { // if it has an editor and it is of type Ext.form.ComboBox
// get the ID value from the grid (the currently selected valueField)
var _nval = r.get(item.dataIndex);
// find the position in the ComboBox store of the current ID
var _idx = _editor.store.find(_editor.valueField,_nval);
if (_idx > 0) { // if found
// get the record from the editor's store whose ID is selected in the grid
var _record = _editor.store.getAt(_idx);
// do a match for the searched value versus the displayField in the ComboBox
var _re = new RegExp(val, 'gi');
_retval = _re.test(_record.get(_editor.displayField));
}
}
}
} catch(e) {}
return _retval;
}Then, inside the onTriggerSearch function, what is with RED is the code you should insert. What is written in normal black color should be left as it is:


this.menu.items.each(function(item) {
if(!item.checked || retval) {
return;
}

retval = this.storeSearch.call(this, item, val, r);

if (retval == false) {
var rv = r.get(item.dataIndex);
rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(val, 'gi');
retval = re.test(rv);
}

}, this);This only works for local mode searching.

See screenshots for a visual example

Sigma
21 Aug 2009, 7:28 AM
The plugin filters store so the behavior is expected as selections are not retained between store (re)loads. You'd need a "persistent selections" code/plugin.

Hi Saki,

Thanks for replying. Do you know if such a plugin exists? If not, which part of the gridsearch.js file should I try to modify?

jsakalos
21 Aug 2009, 12:04 PM
@Sigma, maybe such plugin/code exists but I haven't seen it.

I don't think that it should become a part of Grid Search as it has much broader scope. The general idea would be:

1. Create an invisible field in the store to keep selections
2. Update this field when selection changes
3. Restore the selection on store filter/sort/(re)loads from that field

However, many other approaches are feasible.

Sigma
27 Aug 2009, 6:27 AM
If anyone's interested, here's how I solved my problem (I should've posted this a while ago really). It was easier than Saki or I thought it would be I think. Just replace this:


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 ? rv.format(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);
}
With this:


if(val) {
Ext.getCmp('gridId').getSelectionModel().lock();
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 ? rv.format(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);
Ext.getCmp('gridId').getSelectionModel().unlock();
}

Stripeman
28 Aug 2009, 6:02 AM
If I am using a tool bar that has buttons on it to reload the grid with a changed param for the store how can i get the checked fields that i want to search on so that i can submit them with the form ?

Here is the button on my grid that filters based on a status.



{
id : 'filter_current',
text : 'Active/Pending',
iconCls : 'accept',
enableToggle:true,
toggleGroup: 'filter',
pressed: true, //because its seleted by default
handler: function onItemClick(item, event) {
//SET icon class for the selected and other buttons.
Ext.getCmp('filter_Adverse').setIconClass('accept_dim');
Ext.getCmp('filter_current').setIconClass('accept');
Ext.getCmp('filter_Negative').setIconClass('accept_dim');
Ext.getCmp('filter_Rejected').setIconClass('accept_dim');
Ext.getCmp('filter_closed').setIconClass('accept_dim');
Ext.getCmp('filter_open').setIconClass('accept_dim');
Ext.msg.msg('Filter: ', 'Your Active/Open/Pending cases shown');

caseStore.on('beforeload', function() {

caseStore.baseParams = {
'status_filter': 'current',
'getNav' : 'mycases',
'fields' : fields //<------ this needs to contain the selected fields when you search and be submitted with the form.
};
});
caseStore.load();
}

}

jsakalos
28 Aug 2009, 2:03 PM
It cannot work that way. You or Search plugin, whichever runs last, redefines baseParams. Also key fields is already used in Search plugin so if you need to add some additional data to be posted you must use another name.

Stripeman
28 Aug 2009, 3:50 PM
ok.. i understand... how do i get the selected fields though?

jsakalos
29 Aug 2009, 12:15 AM
I'm still wondering what do you need them for, anyway, the answer is in the plugin's code:


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

Stripeman
30 Aug 2009, 10:29 PM
To answer your question.... I will explain with teh attachments...

When the page initially loads the search works great and as intended. Please see the Firebug results below the grid in the first attachment. (defaultFilter.jpg)

But when i click on another filter (Result Status - buttons at bottom of grid) the fields are missing from the post (er.. GET) see second attachment. (addedFilter.jpg)

That code I added earlier is actually for one of those filter buttons. I need the (selected) field names to be posted with that button handler.

I just thought that using the params like in my example code was the right way to do. (?)

jsakalos
31 Aug 2009, 12:52 AM
So you need to "check" menu checkboxes programmatically before searching, right? If so, then:

1. Iterate through menu checkboxes and check/uncheck them
2. Call onTriggerSearch method of the plugin

Stripeman
31 Aug 2009, 1:06 AM
Yes.. i need to 'check' (see if they are checked) before searching and then post those selected fields with that search (via params).

I have been trying to navigate via the dom to the search field but am having difficulties. Seems the search field dont take an 'id' ? (trying to use it to get the selected checkboxes).

plugins:new Ext.ux.grid.Search({
id : 'searchPanel',
iconCls:'search',
//,readonlyIndexes:['note']
//,menuStyle:'radio'
disableIndexes:['Result'],
minChars:3,
autoFocus:true

}),

Ref using the TriggerSearch... are you telling me that that TriggerSearch has the abily to pick up which button is clicked? Because i think the challenge I am having is because when I click on my button to filter its doesnt know afterwards that that search field even exists.

jsakalos
31 Aug 2009, 12:05 PM
There must be some misunderstanding here. Search plugin knows which checkboxes of the menu are checked and sends them as fields array to the server - you do not need to do it yourself. I thought that you need to set checkboxes of the menu according to which button is pressed. If the latter is the case then the DOM scanning is not the way. The plugin has menu property that you can use to manipulate items: read them or check them.

Stripeman
1 Sep 2009, 12:43 AM
HI jsakalos,
I have been trying to post.. but every damn time i post on the forums i get a friggin message telling me my post has to be moderated or some crap.


I thought that you need to set checkboxes of the menu according to which button is pressed.

Well.. sorta.. when i push my button to filter it seems to 'loose' the search field .. or is it the other way around? Because after i click a filter button and then put text into the text box it 'looses' the fields selected. (ALL of them to include the typed in text to search)

Here is the code so that you may have a closer look.

I have simplified my js as much as I can.


Ext.namespace('p_panelsMainPage');

var p_panelsMainPage = function(){

var panelsMainPage;
var activateThisTab = 0;
var g_tp_ID;
var param = Ext.getUrlParam('status_filter');
var fields = Ext.getUrlParam('fields');
if (fields == null){
fields = '["tp_ID","FamilyName","FirstName","CaseNum","dob","Result","ResultsDate"]';
}
return{

init : function(){

var createCaseRecord;
var caseReader;
var caseProxy;
var caseStore;
var caseColModel;
var d_familyname;
var d_caseID;


//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


var getMainTab = Ext.getCmp('main_tab'); //Does the main tab exist yet? see layout.js

if(getMainTab && !panelsMainPage){ //if its already built.. dont do it again

createCaseRecord = Ext.data.Record.create([
{name: 'tp_ID'},
{name: 'FamilyName'},
{name: 'FirstName'},
{name: 'CaseNum'},
{name: 'dob'},
{name: 'Result'},
{name: 'ResultsDate'}
]);

caseReader = new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'tp_ID'
}, createCaseRecord
);

caseProxy = new Ext.data.HttpProxy({
url: 'get_cases.php?',
method: 'GET'
});

// create the data store
caseStore = new Ext.data.Store({
storeId: 'id_caseStore',
proxy: caseProxy,
reader: caseReader,
remoteSort: true,
baseParams: {
'getNav' : 'mycases',
'status_filter' : 'current',
'fields' : fields
}
});

caseStore.setDefaultSort('FamilyName','ASC');

var caseSelModel = new Ext.grid.RowSelectionModel({
singleSelect : true
}
);

caseColModel = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer()
,
{
header: "Record ID",
dataIndex: 'tp_ID',
width: 80
},{
id : 'caseMemberName',
header: "Family Name",
dataIndex: 'FamilyName'

},{
id : 'caseFirstName',
header: "First Name",
dataIndex: 'FirstName'

},{
id : 'CaseNum',
header: "Case Number",
dataIndex: 'CaseNum'

},{
id : 'dob',
header: "DOB",
dataIndex: 'dob',
width: 120

},{
id : 'Result',
header: "Result",
dataIndex: 'Result',
width: 80

},{
id : 'ResultsDate',
header: "Result Date",
dataIndex: 'ResultsDate',
width:150

}]
);

panelsMainPage = new Ext.Panel({
layout : "table",
id : 'MyColumnLayout3',
border : false,
//title : 'Main Page',
applyTo : 'main_tab',
hidden : false,
scope : this,
bodyStyle :'text-align:center',
defaults : {
bodyStyle : 'background-color:#f0f4f9',
border : true,
//split : true,
collapsible : false,
animate : true,
style : {
padding: '10px'
}
},
layoutConfig:{
columns:3
},
items:[{
xtype:'panel',
title: 'Active/Pending Cases for ' + ShowName,
id: 'id_pnl_myCases',
colspan:3,
layout:'fit',
scope:this,
frame:true,
height:280,
ctCls: 'x-btn',
height:280,
items:{
xtype:'grid',
id:'caseStoreID',
autoDestroy: true,
ds: caseStore,
cm: caseColModel,
sm: caseSelModel,
stripeRows: true,
loadMask: true,
tbar: [
new Ext.PagingToolbar({
store: caseStore,
pageSize: 50,
displayInfo: true,
displayMsg: 'Displaying cases {0} - {1} of {2}',
emptyMsg: "No cases to display",
plugins: new Ext.ux.ProgressBarPager()
})
],
plugins:new Ext.ux.grid.Search({
id : 'searchPanel',
iconCls:'search',
//,readonlyIndexes:['note']
//,menuStyle:'radio'
disableIndexes:['Result'],
minChars:3,
autoFocus:true



}),
bbar: {
xtype: 'buttongroup',
id: 'filter_bar',
border:false,
columns:11,
items:[{
id : 'filter_current',
text : 'Active/Pending',
iconCls : 'accept',
enableToggle:true,
toggleGroup: 'filter',
pressed: true,
handler: function onItemClick(item, event) {

Ext.msg.msg('Filter: ', 'Your Active/Open/Pending cases shown');

// get fields to search array //.menu.
//var fields = [];
//var showthem = this.ownerCt.ownerCt;
//Ext.msg.msg('items: ',showthem);

//Ext.getCmp(this.toolbarContainer).items.each(function(item) {
// if(item.checked) {
// fields.push(item.dataIndex);
// }
//});

caseStore.on('beforeload', function() {

caseStore.baseParams = {
'status_filter': 'current',
'getNav' : 'mycases'
};
});
caseStore.load();
}

}]

}
}
}]
}); //End Panel

}

caseStore.load();
Ext.msg.msg('Filter: ', 'Your open cases shown');

} // End Init
};
}();

jsakalos
1 Sep 2009, 1:51 AM
You set new baseParams in beforeload event handler. Search plugin relies on baseParams so it cannot work. If you need to add to baseParams, use:


Ext.apply(caseStore.baseParams, {
yourProperty1:'your value 1'
,yourProperty2:'your value 2'
});


Don't use fields or query properties.

Stripeman
1 Sep 2009, 2:03 AM
Wholly sweating monkey balls...




caseStore.on('beforeload',
function() {

Ext.apply(caseStore.baseParams, {
status_filter : 'current',
getNav : 'mycases'
});

});
caseStore.load();
That works!!!!! I have removed the params suggested..

So Ext.Apply .. um.. applies before the beforeload does ?

jsakalos
1 Sep 2009, 9:06 AM
Well, Ext.apply (lowercase a) has nothing to do with beforeload. You should read docs of both of them to clarify what they do.

ByteLess
2 Sep 2009, 10:09 AM
Exactly! There is also config variable checkIndexes. It can be either 'all' or array of indexes to check initially.

2 questions

1. how can I dynamically add "text" in the text field to search by script
2. how do I uncheck some of the fields which not required to search, by default it selects all. I want to uncheck few of them

thanks,

jsakalos
3 Sep 2009, 12:29 AM
1. The plugin has field property so you can use field.setValue("your search text")
2. checkIndexes:['index1', 'index2']

ByteLess
3 Sep 2009, 5:10 AM
I hope this is not only for 3.0

myContactPSearch = new Ext.ux.grid.Search({
searchText: "Search", checkIndexes: ['company_name'], disableIndexes: ['contact_id','lastupdon'], width: 150
});

myContactPSearch.field.setValue("your search text");

I am getting
myContactPSearch.field is undefined
[Break on this error] \r\n

whodat
3 Sep 2009, 11:26 AM
Saki,


Great plugin like most of your plugins. I got this plugin to work with a grid which pages local.

I have 2 questions.

1) Do I have to implement the [X] "clearing" feature to clear the filter or should it be done automaticaly? I'm using IE and I know your a linux distro guy.

2) Is there a way to incorporate the Date Field object into this plugin?

Thanks,

jsakalos
3 Sep 2009, 4:10 PM
1. There already is [X] trigger: http://gridsearch.extjs.eu/
2. Doesn't it filter dates? (I do not use the plugin in local mode too much...)

whodat
3 Sep 2009, 4:22 PM
1. There already is [X] trigger: http://gridsearch.extjs.eu/
2. Doesn't it filter dates? (I do not use the plugin in local mode too much...)

Sorry didn't finish my sentence. But when clicking the [X] trigger, nothing happens for me. I have to remove the actual text to remove the filter.

And yes it filters by dates

jsakalos
3 Sep 2009, 4:35 PM
1. Cannot believe, it works on demo page, doesn't it?
2. Why a Date object then?

whodat
3 Sep 2009, 4:50 PM
1. Cannot believe, it works on demo page, doesn't it?
2. Why a Date object then?

Hmm.. it works on your demo but I'm wondering why it doesn't work.

Does the trigger call anything related to the store, i.e. reload? I'm using a PagingStore which is local paging..

I'm wonder if it has something to do with that?

jsakalos
3 Sep 2009, 5:11 PM
The source is the best answer:


/**
* Clear Trigger click handler
* @private
*/
,onTriggerClear:function() {
if(this.field.getValue()) {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch();
}
} // eo function onTriggerClear
// }}}
// {{{
/**
* Search Trigger click handler (executes the search, local or remote)
* @private
*/
,onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = this.grid.store;

// 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 ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(RegExp.escape(val), 'gi');
retval = re.test(rv);
}, this);
if(retval) {
return true;
}
return retval;
}, this);
}
else {
}
}
// ask server to filter records
else {
// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

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

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

// reload store
store.reload();
}

} // eo function onTriggerSearch
// }}}

whodat
3 Sep 2009, 5:24 PM
Thanks Saki, I'll take a look tomorrow when im back in the office

giega
5 Sep 2009, 4:26 AM
Hi @all,

i'm using this plugin with ext 2.xx without problems, but after upgrading to version 3.0 this plugin doesnt show up in ie 6 and 7, when nested into a tab layout.
I am using deferredRender: true and hidemode: 'offsets' without no problem in FF, IE8, Chrome and Safari.

I figured out that removing the trainling white space (IE8 Developertools) in class attribute the search field is visible again using IE8 compatibility mode

<input name="ext-comp-1179" class="[WS here]x-form-text x-form-field" id="ext-comp-1179" style="width: 58px;" type="text" size="16" autocomplete="off"/>

Can somebody please tell me if this really causing this bug, cause I didnt find the place to override the class attribute.

Thanks a lot!

I am having the same issue. I have four grids under four different tabs. Only the grid under the first tab displays the search field. Others display only the search drop-down button, but no field. I can't seem to find the cause for this either...

scooter
23 Sep 2009, 10:38 PM
Howdy,

I have a tbar that has 3 filter mechanisms, date, combobox and this excellent plugin.
I want to clear the other two search field values if they use grid.Search. What is the
proper way to accomplish this?

thanks

jsakalos
24 Sep 2009, 2:13 AM
Create sequence function of onTriggerClear method of the plugin and put your code in it.

scooter
28 Sep 2009, 12:50 PM
Thanks, Saki.

For the benefit of others, this is what I ended up doing:



Ext.getCmp('maingrid').plugins[0].field.on('blur',function() {
Ext.getCmp('startdate').setValue('');
Ext.getCmp('startdate').reset();
Ext.getCmp('enddate').setValue('');
Ext.getCmp('enddate').reset();
filter_combo.clearValue();
})
;I also did on for specialkey on ENTER.

thanks

scooter
6 Oct 2009, 10:19 PM
More help for others.....

At first I didn't understand what you meant by the create sequence. But,
because I had found another way around my problem I dropped it. But then
today I was trying to set up the clear routines on a tabpanel that hadn't yet
been rendered, so of course the above didn't work because it was trying to
work on an object that didn't yet exist. So after some reading:

http://www.extjs.com/deploy/ext/docs/output/Function.html#createSequence
And a lot of reading of the forums, I arrived at this solution:


gridSearchint.onTriggerSearch = gridSearchint.onTriggerSearch.createSequence(function ()
{
project_filter_combo.clearValue();
Ext.getCmp('startdate_int').setValue('');
Ext.getCmp('startdate_int').reset();
Ext.getCmp('enddate_int').setValue('');
Ext.getCmp('enddate_int').reset();
})So thanks again for the pointer. Hopefully someone else will find this useful.

jsakalos
7 Oct 2009, 4:12 AM
http://www.extjs.com/deploy/dev/docs/?class=Function&member=createSequence

fangstern
19 Oct 2009, 4:27 PM
Hi Saki,

First of all, I want to said great work in gridsearch plugin. However, there maybe some bug with it. I've implemented it in a grid of an inactive tab. The TwinTriggerField does not render on load, but the search button does. If I activated that tab on load, then the TwinTriggerField renders as expected. Any idea why? :-?

charleshimmer
23 Oct 2009, 10:54 AM
Awesome plugin in Saki! Worked great for me in ExtJS 3.0.2.

charleshimmer
23 Oct 2009, 3:54 PM
In case this helps anybody else, I'm posting my version of the plugin.

I found when using this plugin that the grid lost the selected row and it reset the scroll position after I cleared the search field.

To fix this I kind of hacked the plugin (only hacked for local searches, but could easily be taken to work for remote as well). A more re-usable method might be to have the plugin fire some events for the grid to listen to and react appropriately.

Anyways, I highlighted my hacks in red.


// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext */
/**
* @class Ext.ux.grid.Search
* @extends Ext.util.Observable
*
* Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date <ul>
* <li>17. January 2008<li>
* <li>6. February 2009</li>
* </ul>
* @version 1.1.1
* @revision $Id: Ext.ux.grid.Search.js 650 2009-03-25 17:29:12Z 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.
*
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
*
* @forum 23615
* @demo http://gridsearch.extjs.eu
* @download
* <ul>
* <li><a href="http://gridsearch.extjs.eu/gridsearch.tar.bz2">gridsearch.tar.bz2</a></li>
* <li><a href="http://gridsearch.extjs.eu/gridsearch.tar.gz">gridsearch.tar.gz</a></li>
* <li><a href="http://gridsearch.extjs.eu/gridsearch.zip">gridsearch.zip</a></li>
* </ul>
*
* @donate
* <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
* <input type="hidden" name="cmd" value="_s-xclick">
* <input type="hidden" name="hosted_button_id" value="3430419">
* <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif"
* border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
* <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
* </form>
*/

Ext.ns('Ext.ux.grid');

// Check RegExp.escape dependency
if ('function' !== typeof RegExp.escape) {
throw ('RegExp.escape function is missing. Include Ext.ux.util.js file.');
}

/**
* Creates new Search plugin
* @constructor
* @param {Object} A config object
*/
Ext.ux.grid.Search = function (config) {
Ext.apply(this, config);
Ext.ux.grid.Search.superclass.constructor.call(this);
}; // eo constructor
Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
/**
* @cfg {Boolean} autoFocus Try to focus the input field on each store load if set to true (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
* 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.(defaults to "bottom")
*/
,
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'] (defaults to "all")
*/
,
checkIndexes: 'all'

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

/**
* Field containing search text (read-only)
* @property field
* @type {Ext.form.TwinTriggerField}
*/

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

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

/**
* Menu containing the column module fields menu with checkboxes (read-only)
* @property menu
* @type {Ext.menu.Menu}
*/

/**
* @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.
* (defaults to "checkbox")
*/
,
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.
* (defaults to undefined)
*/

/**
* @cfg {String} minCharsTipText Tooltip to display if minChars is > 1
*/
,
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']
* (defaults to undefined)
*/

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

/**
* @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it
*/
,
xtype: 'gridsearch'

/**
* @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: ''

/**
* @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
* (defaults to undefined)
*/

/**
* @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)
*/

,
selectedRow: false

// {{{
/**
* @private
* @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for
*/
,
init: function (grid) {
this.grid = grid;

// setup toolbar container if id was given
if ('string' === typeof this.toolbarContainer) {
this.toolbarContainer = Ext.getCmp(this.toolbarContainer);
}

// do our processing after grid render and reconfigure
grid.onRender = grid.onRender.createSequence(this.onRender, this);
grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);
} // eo function init
// }}}
// {{{
/**
* adds plugin controls to <b>existing</b> toolbar and calls reconfigure
* @private
*/
,
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
});

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

// install event handlers on input field
this.field.on('render', function () {
// register quick tip on the way to search
if (undefined === this.minChars || 1 < this.minChars) {
Ext.QuickTips.register({
target: this.field.el,
text: this.minChars ? String.format(this.minCharsTipText, this.minChars) : this.searchTipText
});
}

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.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
// }}}
// {{{
/**
* Clear Trigger click handler
* @private
*/
,
onTriggerClear: function () {
if (this.field.getValue()) {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch(true); // pass in true to flag that we're clearing
}
} // eo function onTriggerClear
// }}}
// {{{
/**
* Search Trigger click handler (executes the search, local or remote)
* @private
*/
,
onTriggerSearch: function (clear) {
if (!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = this.grid.store;
var clear = clear || false; // have clear flag default to false

if (clear === false && this.selectedRow === false) { // if they are about to do a search and we haven't saved the currently selected row yet
this.scrollState = this.grid.getView().getScrollState();
this.selectedRow = this.grid.store.indexOf(this.grid.gsm.getSelected());
}

// 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 ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(RegExp.escape(val), 'gi');
retval = re.test(rv);
},
this);
if (retval) {
return true;
}
return retval;
},
this);
}
else {}
}
// ask server to filter records
else {
// clear start (necessary if we have paging)
if (store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}

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

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

// reload store
store.reload();
}

if (clear === true) { // if they are clearing the search, restore selection to the stored row and then clear it by setting it to false
this.grid.gsm.selectRow(this.selectedRow);
this.grid.getView().restoreScroll(this.scrollState);
this.selectedRow = false;
}

} // 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
// }}}
// {{{
/**
* Disable search (TwinTriggerField)
*/
,
disable: function () {
this.setDisabled(true);
} // eo function disable
// }}}
// {{{
/**
* (re)configures the plugin, creates menu items from column model
* @private
*/
,
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(new Ext.menu.CheckItem({
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 cm = this.grid.colModel;
var group = undefined;
if ('radio' === this.menuStyle) {
group = 'g' + (new Date).getTime();
}
Ext.each(cm.config, function (config) {
var disable = false;
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,
hideOnClick: false,
group: group,
checked: 'all' === this.checkIndexes,
dataIndex: config.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

charleshimmer
23 Oct 2009, 4:17 PM
Found that the clear button is one pixel off in height in Safari.

http://www.balancedlivingsystem.com/assets/files/public_share/search_clear.jpg

It looks like this line of css (ext-all.css line 1124) that is causing the problem. If I change it to 14px instead of 16px it looks good in FF and Safari.


.ext-strict .x-small-editor .x-form-text {
height:16px !important;
}

Anybody know if this is a bug?

charleshimmer
26 Oct 2009, 9:37 AM
In case anybody else runs into this problem. I have 4 grids that need to have the search plugin in. Since the plugin comes with an id, you will run into problems unless you disable the plugin getting assigned an id.

You can do this by commenting out this line.



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

charleshimmer
26 Oct 2009, 10:21 AM
Nevermind. I just realized that wasn't part of the original code.

NoahK17
26 Oct 2009, 2:49 PM
Found that the clear button is one pixel off in height in Safari.

http://www.balancedlivingsystem.com/assets/files/public_share/search_clear.jpg

It looks like this line of css (ext-all.css line 1124) that is causing the problem. If I change it to 14px instead of 16px it looks good in FF and Safari.


.ext-strict .x-small-editor .x-form-text {
height:16px !important;
}

Anybody know if this is a bug?
More than likely, a better fix would be to change the image size.

jsakalos
27 Oct 2009, 12:44 AM
Does this happen only with Grid Search or with all TwinTriggerFields in Safari?

joe123
27 Oct 2009, 5:20 AM
Hi,

I am pretty new to EXTJS and was wondering if its
possible to use the plugin with the default gridpanel?
Should I do something like this:

Example.Grid1 = Ext.extend(Ext.grid.GridPanel, {

And further just follow the example in gridsearch.js ??


Thanks!

Joe

charleshimmer
27 Oct 2009, 6:35 AM
@Saki - I don't know. I'll test a normal twintrigger in Safari and let you know.

@joe123 - Follow the example and use it as a plugin. Look in the docs you will see that the grid has a plugin config option which accepts an array of plugins (classes really).

So you would take any old standard grid and add a plugin to it like this



var grid = new Ext.grid.GridPanel({
title:'My Grid',
store:store,
plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
position:'tbar',
mode:'local',
width:200,
shortcutEl:document,
minChars:2
})],
rest of config options, you get the idea.

});

charleshimmer
27 Oct 2009, 6:46 AM
Saki - it's only the grid search plugin's twin trigger that is off. I built a test case and it's height lined up perfectly.

joe123
27 Oct 2009, 7:57 AM
@charlesimmer

thanks! I almost have it working. Just some backend work to be done!

charleshimmer
27 Oct 2009, 7:59 AM
glad to hear it.

jsakalos
27 Oct 2009, 1:36 PM
Yes, there is a problem in Safari, see picture. Can anyone help to fix it?

charleshimmer
27 Oct 2009, 1:57 PM
The only way I was able to fix it was be overriding some css classes, but a more elegant fix would be nice.

jsakalos
27 Oct 2009, 2:39 PM
Could you post your solution? Someone else may need it too...

charleshimmer
27 Oct 2009, 2:43 PM
I did earlier. Here it is again.



/* Override for Safai and Search Button */

.ext-strict .x-small-editor .x-form-text {
height:14px !important;
}


This fixed it for me anyways. I haven't tested it in any other environments, other than FF and Safari with Ext 3.0.2

jsakalos
28 Oct 2009, 2:13 AM
Wouldn't you prefix it with ext-safari so it gets applied only in Safari?



.ext-safari.ext-strict .x-small-editor .x-form-text {
height:14px !important;
}

?

jsakalos
28 Oct 2009, 2:28 AM
Funny, it was enough to put Safari in strict mode to fix the issue (Safari 4.0.3@Window$). See http://gridsearch.extjs.eu

charleshimmer
28 Oct 2009, 7:03 AM
How did you put Safari in strict mode? That would mean I just need to do that instead of using the css override.

m4v0
28 Oct 2009, 4:50 PM
good night to all

well I'm new to Ext JS, I would like to use the plugin search "Congratulations to the author by the plugin, and my question and very simple to install the plugin? I'm using the version of ExtJS 2.3.0


Thank you all.

charleshimmer
28 Oct 2009, 7:56 PM
That question has been answered on page #63 of this thread.

m4v0
29 Oct 2009, 2:47 AM
Thanks for responding charles, looked at the topic completely and # 63 are explaining how to use the component, I think I need to make better my doubts. So come on, how to use the next component I think I already understood how, now I am not knowing where to put the files. Js and. Css is in the same folder where ext-all.js or may be another sub-folder. Understand?


Thank you!

joe123
29 Oct 2009, 6:09 AM
Hi,

I am trying to get row selection in the example on this
page :

http://gridsearch.extjs.eu/

So I probaly have to get rid of the Rowactions plugin so I should probably remove this code:

// create row actions
/*
this.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'icon-minus'
,qtip:'Delete Record'
,style:'margin:0 0 0 3px'
}]
});
this.rowActions.on('action', this.onRowAction, this);


With something like this



sm: new Ext.grid.RowSelectionModel({
singleselect: true,
listeners: {
rowselect: function(sm, rowIndex, r) {
console.log(sel);
}
}
});






but it is not working..... Any help would be highly appreciated!


Thanks, Joe

charleshimmer
29 Oct 2009, 7:44 AM
@m4v0 Where you put the files it up to how you want to structure your asset folder.

I've found it best to keep extensions and plugins in a separate folder outside the extjs folder. This makes it easier to upgrade extjs. All I have to do is replace the extjs folder without having to worry about messing up any of my plugins / extensions.

This is how I structure my js folder (which is inside my asset folder)

assets/js/
-------extjs-shared (this is where I put all my plugins and extentions)
-------ext-3.0.2 (this is the extjs folder, I use the version number in the folder name)

If you were asking about which order you have to include the js files. Just include plugins after you've included the core ext files (i.e. after you've included ext-base.js, ext-all-debug.js).

jsakalos
29 Oct 2009, 10:28 AM
@joe123, RowActions are independent of selection model. BTW, grid uses row selection model by default so you do not need to do anything.

jsakalos
29 Oct 2009, 10:30 AM
@charles, for strict mode, use a doctype (http://en.wikipedia.org/wiki/Doctype), e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

charleshimmer
29 Oct 2009, 10:43 AM
oh you were talking about doctypes. i thought there was css modes i wasn't aware of.

I tried both transitional, and strict and only the css override I provided made a difference as far as the clear button's height being correct.

jsakalos
29 Oct 2009, 10:46 AM
On Mac? I've tested on Window$. My only Mac is iPhone... ;)

charleshimmer
29 Oct 2009, 10:49 AM
Yes mac, sorry. iPhone's not a bad mac, might be hard to test extjs apps though ;).

the new iMacs are pretty sweet if you're in the market;)

jsakalos
29 Oct 2009, 10:50 AM
Then there must be a difference in Safari versions. Nevertheless, I think it's solved, isn't it?

charleshimmer
29 Oct 2009, 10:53 AM
I'm happy, mine is working and I've posted what I did to fix it for anybody else who has the same problem.
Part of me is curious as to why it would be slightly off, but not enough to want to spend loads of time on it. So yeah, I'm good.

m4v0
30 Oct 2009, 5:49 AM
personal greetings, the following have I managed to solve the issue of the search plugin, thank you all, I am now having problems with another plugin RowEdit.js, I Debug to see where this error.

Thank you all.

abraxxa
18 Nov 2009, 10:57 AM
Awesome ux, once again! ;)

In your example the search field is left of the text which tells you how much rows are available at all.
In my GridPanel with the PagingToolbar the search field is the rightmost.
Can I change this?

jsakalos
18 Nov 2009, 5:01 PM
A picture of the desired result?

abraxxa
18 Nov 2009, 10:38 PM
Insomnia Saki? Posting in the middle of the night! I-|

Just look at your example http://gridsearch.extjs.eu/
You have the search field in the middle of the bbar, then the 'A test button' and the 'Displaying...' on the right.

jsakalos
19 Nov 2009, 5:03 AM
Then I don't understand the question - thought you want something else, don't you?

abraxxa
19 Nov 2009, 5:11 AM
I want it displayed just as it does in your example, here with ExtJS 3.0.3 the search field is the topmost right one, even right of the 'Displaying...' text.

jsakalos
19 Nov 2009, 11:10 AM
Do you run my example locally w/o any change against Ext 3.0.3? If not, then try it, if it looks like expected.

abraxxa
20 Nov 2009, 4:18 AM
When I access http://gridsearch.extjs.eu it looks like described (like I want it to look).

When I open gridsearch.html from the downloaded gridsearch-1.1.tar.bz2 with Ext 3.0.3 unpacked to ./ext it's shown incorrect, like in my app.

jsakalos
20 Nov 2009, 11:04 AM
Now I finally understand. I need to look at it, the toolbar has changed in Ext 3.x so a fix seems to be needed.

abraxxa
20 Nov 2009, 11:29 AM
Thanks Saki!

jsakalos
22 Nov 2009, 11:48 AM
Configure PagingToolbar with displayInfo:false and then add to afterRender:


var info = new Ext.Toolbar.TextItem({});
var bbar = this.getBottomToolbar();
bbar.add('->');
bbar.add(info);
bbar.displayItem = info;



The above code is based on http://gridsearch.extjs.eu

abraxxa
22 Nov 2009, 12:47 PM
Will try tomorrow, thanks!
Why not make the position in the toolbar configurable?

jsakalos
22 Nov 2009, 2:31 PM
Well, this is another component: PagingToolbar. Yes, the logic could be sticked into Search plugin (hopufully), however, it would need to be much more complicated. Ext version testing, PagingToolbar presence and configuration testing, etc. Maybe in the future...

seedeg
24 Nov 2009, 2:20 AM
I am a newbie to extjs. I need to use the grid search to retrieve some data from a mysql database. How can I do this?

Many thanks in advance.

jsakalos
24 Nov 2009, 2:31 AM
Have you seen the example at http://gridsearch.extjs.eu ? You just need to code your MySQL backend.

seedeg
24 Nov 2009, 2:54 AM
Hi thanks for your reply.

I downloaded the example and got it to work. But obviously, no data was retrieved. I tried searching in the files to find a connection to the DB but with no luck.

also, the icons are not being shown except for the previous record, next, go to last record, go the first record, and refresh

Any help on this would be greatly appreciated.

Many thanks!

jsakalos
24 Nov 2009, 4:33 AM
The example works with sqlite database so you do need a different backend to access mysql. The general steps:

1. Make the example working locally w/o any change.
2. Change it to suit your needs.

seedeg
24 Nov 2009, 4:53 AM
What do you mean exactly by mysql backend?


Is the connection being made in csql.php because I observed that file and it seems that there isn't a database selected and so on...

Also, what exactly is db.sqlite?

I was thinking that the connection is being made in process-request.php. This file is the AJAX part which will refresh the results whenever a search is being done correct? In these lines there is the table and fields selected, but no Database...



$objects = array(
// {{{
// company
"company"=>array(
"table"=>"company"
,"idName"=>"compID"
,"fields"=>array(
"compID"
,"company"
,"price"
,"change"
,"pctChange"
,"lastChange"
,"industry"
,"action1"
,"qtip1"
,"action2"
,"qtip2"
,"action3"
,"qtip3"
,"note"
)
)
,"person"=>array(
"table"=>"person left join phone on person.persID=phone.persID"
,"idName"=>"persID"
,"groupBy"=>"person.persID"
,"fields"=>array(
"person.persID"
,"persFirstName"
,"persMidName"
,"persLastName"
,"persNote"
,"group_concat(concat_ws('~',phoneType,phoneNumber),'|') as phones"
)
)


I need to insert a database name, username, and password in order to connect.

If I don't make any changes locally, the window loads with some missing icons and without any information...

Any suggestions?

Many thanks.

jsakalos
24 Nov 2009, 6:04 AM
Google please to find answers. The questions are very basic and not Ext related.

seedeg
24 Nov 2009, 6:11 AM
Ok will try. Sorry if the questions where sort of dumb but this is the first time I am using extjs...

Thank you for your time :)

abraxxa
24 Nov 2009, 7:12 AM
Configure PagingToolbar with displayInfo:false and then add to afterRender:


var info = new Ext.Toolbar.TextItem({});
var bbar = this.getBottomToolbar();
bbar.add('->');
bbar.add(info);
bbar.displayItem = info;



The above code is based on http://gridsearch.extjs.eu

I can't it to work, the displayInfo is disabled by the config option but isn't added by the afterrender code.

This is the code snippet:



bbar:new Ext.PagingToolbar({
pageSize:[% rows_per_page %],
store:store_locations,
emptyMsg:'No locations',
displayInfo:false
}),
plugins:[new Ext.ux.grid.Search({
disableIndexes:['hlocation','create_timestamp']
})],
listeners:{
afterrender: function() {
var info = new Ext.Toolbar.TextItem({});
var bbar = this.getBottomToolbar();
bbar.add('->');
bbar.add(info);
bbar.displayItem = info;
}
}

abraxxa
24 Nov 2009, 7:20 AM
I just found out that afterrender is triggered after I resize the browser window but not when i load the page.
So after resizing the browser the displayInfo text shows up correctly.

Edit: And another finding!
afterrender: behaviour described above
render: works!

jsakalos
24 Nov 2009, 7:41 AM
So solved?

abraxxa
24 Nov 2009, 7:43 AM
Yes, but why does it work without the added code for ExtJS 2.x but not 3.x?

jsakalos
24 Nov 2009, 7:48 AM
2.x has completely different Toolbar concept, Toolbar in Ext 3.x extends container. These two version are incomparable from the Toolbar point of view.

abraxxa
24 Nov 2009, 7:51 AM
I see.
Can we disable displayInfo in the plugin if enabled and add the render function to the plugin so it works out of the box?

jsakalos
24 Nov 2009, 11:45 AM
Maybe yes, but I do not want to add any code right now. A couple of posts back I explained that PagingToolbar is another component...

abraxxa
24 Nov 2009, 11:53 AM
Ok. Can you add the code which restores Ext 2.x behaviour in Ext 3.x to the gridsearch page for others?

seedeg
25 Nov 2009, 2:23 AM
I managed to install SQLite on our ubuntu server.

The data is being loaded in the search module. However, when I try to use the search facility, the ajax request is being made but it's not being updated with the search criteria. Instead, the same data (all the data) is loaded over and over again.

Also, for some reason, I have all ExtJS installed but most of the images are not being displayed.

You can see the grid search here: http://gridsearch.cyberpasswebstudios.com/gridsearch.html

Any help on this matter would be greatly appreciated.

Many thanks.

jsakalos
25 Nov 2009, 2:34 AM
Ok. Can you add the code which restores Ext 2.x behaviour in Ext 3.x to the gridsearch page for others?

I neither changed page nor plugin. It runs against 2.3.0 on the page. Or, am I missing something?

jsakalos
25 Nov 2009, 2:36 AM
I managed to install SQLite on our ubuntu server.

The data is being loaded in the search module. However, when I try to use the search facility, the ajax request is being made but it's not being updated with the search criteria. Instead, the same data (all the data) is loaded over and over again.

Also, for some reason, I have all ExtJS installed but most of the images are not being displayed.

You can see the grid search here: http://gridsearch.cyberpasswebstudios.com/gridsearch.html

Any help on this matter would be greatly appreciated.

Many thanks.

On the link above, the request is sent correctly so it must be some server-side problem.

abraxxa
25 Nov 2009, 3:59 AM
I neither changed page nor plugin. It runs against 2.3.0 on the page. Or, am I missing something?

With Ext 2.3.0 the search field is automatically between the paging toolbar control and the displayInfo text, right?
With Ext 3.x it's right of the displayInfo and to restore the 2.x behavior you need the render event function.
My question was if you intend to restore the 2.x behavior (search field between) for 3.x so that not every user has to add the render event function.

jsakalos
25 Nov 2009, 10:14 AM
Maybe in next version. ;)

seedeg
26 Nov 2009, 1:47 AM
Hi Saki,

I can't manage to find what is the problem behind the search function. I am using Fiddler and the right query is being sent as you pointed out yesterday. However, in the TextView the result is not filtered but all the results are shown again (find screenshot attached).

Can you give me some suggestions of what is wrong? Earlier you pointed out that it is a server-side problem. Obviously I know what server side means, but what do you mean by it is a server-side problem?

This is the last problem I have. I managed to connect the grid search to a mysql database as well.

May I also point out, that on the original script, the TextView is encoded in fiddler while in my script it is not. I don't know if this is relevant though.

Thanks in advance

jsakalos
26 Nov 2009, 1:54 AM
Sorry, I don't know what's Fiddler and image is illegible.

Your server must process the posted data correctly, especially, your sql has to contain a valid where clause. Searching/filtering cannot work if server returns all records.

garraS
26 Nov 2009, 2:47 PM
I added a new attributte that adds new Menus/Options to send it to the server:



,reconfigure: function(){
...
// disable items
if(this.readonlyIndexes instanceof Array) {

}
// }}}
// {{{
// add items
if(this.addIndexes instanceof Array) {
Ext.each(this.addIndexes, function(di) {
menu.add(new Ext.menu.CheckItem({
text: di.text
,hideOnClick:false
,group:group
,checked:'all' === this.checkIndexes
,dataIndex: di.dataIndex
}));
}, this);
}
}


And is used it:


var gridsearch = new Ext.ux.grid.Search({
mode: 'remote'
,dateFormat: 'd-m-Y'
,position: 'top'
,align: 'right'
,autoFocus: true
,disableIndexes: ['comentarios','mostrar','destacar']
,addIndexes: [
{text: 'Copete', dataIndex: 'copete'}
,{text: 'Desarrollo', dataIndex: 'desarrollo'}
]
});

jsakalos
26 Nov 2009, 2:55 PM
Can you describe a use case of that?

mbstroz
1 Dec 2009, 11:50 AM
I am building a grid and form in a tab that renders in an Iframe. For some reason the pull down for the search button doesn't show anything while in the iframe in IE (7,8) but if I render the page by itself outside of the iframe, the pull down works. Everything works fine in FF. I tried switching it to a managed Iframe but same results. Works in FF, not in IE while in Iframe.
I am using Ext 3.0.3.
This is the way the plugin code looks. Any one have any thoughts on this?


,
plugins:[new Ext.ux.grid.Search({
disableIndexes: ['id', 'table','itemtype_id', 'manufacturer_id'],
menuStyle: 'checkbox',
iconCls: 'silk-zoom',
position: top,
autoFocus: true,
align: 'right',
showSelectAll: true,
width: 300,
minChars: 2,
autoFocus: true,
searchText: 'SEARCH',
searchTipText: 'Enter search terms and hit Enter. Use % for wild cards around text to search'
})],

jsakalos
1 Dec 2009, 12:19 PM
No idea about IE - I'm on Linux. Genereally, in 99% of cases: works-in-ff-not-in-ie === (extra comma || reserved word). Try to run your code through http://jslint.com

Then, is the iframe really necessary?

mbstroz
1 Dec 2009, 12:40 PM
Thanks. JSlint caught a few semi-colons only. Here are two Screen shots

IE
http://lh6.ggpht.com/_g0gTR8Maepo/SxV-5AV4PEI/AAAAAAAAAdU/tofLN9N5Pdg/s1152/pals_ie8.png.jpg

FireFox
http://lh3.ggpht.com/_g0gTR8Maepo/SxV-5obL8DI/AAAAAAAAAdc/rH0BuLL7RRs/s1152/pals_FF.png.jpg

As you can see, the code is working on both, just the pull down for the grid search fails in ie while in the iframe. Open the grid up standalone, the gridsearch works fine.

abraxxa
1 Dec 2009, 12:44 PM
Sorry to interrupt, but what theme are you using? I quite like it.

jsakalos
1 Dec 2009, 2:34 PM
I still have no idea. Generally, using ManagedIframe handles many things/problems. Dough knows best about iframe culprits.

mbstroz
2 Dec 2009, 4:28 AM
That is the slate theme.

I guess I'll wait for Dough to chime in.

mbstroz
2 Dec 2009, 6:07 AM
I found the bug but not a solution yet. The clickable area on the grid search button appears to be behind the button in an Iframe in IE and it appears to be 1 pixel. On the edge of the buttons where the mouse over button image is not blocking the background button image. GL finding it. I either need to expand that clickable area or make a lot of arrows pointing at it. :)

abraxxa
2 Dec 2009, 7:57 AM
Is the z-index in IE different than in FF?

jsakalos
2 Dec 2009, 8:04 AM
I'm bad person to ask... What is IE? ;)

abraxxa
2 Dec 2009, 8:05 AM
Same here, I'm on Ubuntu too, but mbstroz should be able to find that out.

mbstroz
2 Dec 2009, 9:49 AM
After changing the document mode to IE8 Standard it works in IE8. It defaults to IE7 Standard due to . By removing the doc type it renders a bit off in IE7 but at least it works as it's supposed to and completely right in IE8. Quirksmode for the win. If I didn't have to use IE I wouldn't. But I have too as it's the primary browser for all of our intranet. We have FF but not everyone will use it.

markw
14 Dec 2009, 7:52 AM
I've struggled to get the gridsearch plugin installed and working. When I download and unpack the zip file, I cannot locate the csql.php file (see attached image).

I've tried copying the csql.php file from Saki's website directly into the root folder where the process-request.php file is also located (deleting the reference to the classes/ directory). Despite all attempts, the grid is not populating with data. The firebug screenshot is also attached. Everything else is "straight out of the box".

I am new to EXTjs, and am more familiar with MYSQL than SQLite... Nevertheless it seems like I'm missing something obvious? I would be most grateful for anyone's help to get this working. It certainly looks a very nice plugin.

Mark

jsakalos
15 Dec 2009, 2:20 AM
I thought that csql.php is packed in zip. If not, go to the page, click on the csql.php link on the left and copy & paste the code.

markw
15 Dec 2009, 5:41 PM
Thanks Saki
All working fine except for clear search button. Not alone. Posted the fix.
http://www.extjs.com/forum/showthread.php?p=419168
Perhaps you could check the source file in the download zip.
Regards

Z24_2000
18 Dec 2009, 6:34 AM
Hello,

Let me first say that this plugin is amazing!

I'm fairly new to extjs and I've been searching for days on how to resolve this issue as I'm sure I am doing something wrong but I can't seem to find it so I am resorting to posting in the thread in hopes in finding some help.

The issue is that I have many gridpanels loaded on a page (probably not the best UI, nevertheless) and for some reason when the page is first loaded the search box is positioned correctly in the first bbar within the first gridpanel but then every gridpanel after that has a search box which shifts further and further to the right covering at times the displayInfo message.

Here's the code of a couple of the grids (like I said, new to extjs so go easy on me):


Ext.onReady(function() {
Ext.QuickTips.init();
var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit'
window.location='where I want it go';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['grant_title']+'<b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'where I want it go',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'research_id', type: 'int'},
{name: 'principal_investigator', type: 'string'},
{name: 'grant_title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'amount_received', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'where I want it go'
})
});
store.setDefaultSort('year_reported', 'desc');

var grid = new Ext.grid.GridPanel({
id: 'research_grid',
store: store,
columns: [
{id:'research_id',header: "Record ID", hidden: true, dataIndex: 'research_id', tooltip:'Sort'},
{header: "Amount", width: 59, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'amount_received', tooltip:'Sort'},
{header: "Principal Investigator", width: 132, sortable: true, dataIndex: 'principal_investigator', tooltip:'Sort'},
{header: "Title", width: 420, sortable: true, dataIndex: 'grant_title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'Projects / Grants / Contracts'
,tbar: new Ext.Toolbar({
buttons: [
'->',{
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
listeners: {
'click': function() {
window.location='where I want it go';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,disableIndexes: ['research_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
}), cellActions]
});

// render it
grid.render('research');

// trigger the data store load
store.load({params:{start:0, limit:10}});
});

17869
17870

Thanks in advance for the time!

jsakalos
19 Dec 2009, 3:16 PM
How do you define other grids? This all looks like there is an instance of an object (I cannot be more specific at this point) that is common to all grids. Look in this direction please.

Z24_2000
21 Dec 2009, 5:16 PM
Hi Saki,

Thanks for getting back to me. I've spent some time with this and I haven't been able to find the problem. I'm fairly new to OOP so I'm sure this is part of the problem. Nonetheless, you asked how I define other grids:


Ext.onReady(function() {
Ext.QuickTips.init();
var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit'
window.location='where I want it go';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['grant_title']+'<b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'where I want it go',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'research_id', type: 'int'},
{name: 'principal_investigator', type: 'string'},
{name: 'grant_title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'amount_received', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'where I want it go'
})
});
store.setDefaultSort('year_reported', 'desc');

var grid = new Ext.grid.GridPanel({
id: 'research_grid',
store: store,
columns: [
{id:'research_id',header: "Record ID", hidden: true, dataIndex: 'research_id', tooltip:'Sort'},
{header: "Amount", width: 59, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'amount_received', tooltip:'Sort'},
{header: "Principal Investigator", width: 132, sortable: true, dataIndex: 'principal_investigator', tooltip:'Sort'},
{header: "Title", width: 420, sortable: true, dataIndex: 'grant_title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'Projects / Grants / Contracts'
,tbar: new Ext.Toolbar({
buttons: [
'->',{
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
listeners: {
'click': function() {
window.location='where I want it go';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,disableIndexes: ['research_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
}), cellActions]
});

// render it
grid.render('research');

// trigger the data store load
store.load({params:{start:0, limit:10}});
});

Then I basically do the same thing again wherever I require a grid:


Ext.onReady(function() {
Ext.QuickTips.init();
var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_peer_reviewed'
window.location='where I want it go';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['title']+'<b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'where I want it go',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'peer_reviewed_papers_id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'author_list', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'where I want it go'
})
});
store.setDefaultSort('year_reported', 'desc');

var peerGrid = new Ext.grid.GridPanel({
id: 'peer_reviewed_papers_grid',
store: store,
columns: [
{id:'peer_reviewed_papers_id',header: "Record ID", hidden: true, dataIndex: 'peer_reviewed_papers_id', tooltip:'Sort'},
{header: "Authors", width: 59, sortable: true, dataIndex: 'author_list', tooltip:'Sort'},
{header: "Source", width: 132, sortable: true, dataIndex: 'source', tooltip:'Sort'},
{header: "Title", width: 420, sortable: true, dataIndex: 'title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'Peer-Reviewed Publications'
,tbar: new Ext.Toolbar({
buttons: [ {
text: 'Get CV Text',
iconCls:'icon-generate',
tooltip: 'Click to open a new window listing your publications for copying into your CV.',
align: 'right',
listeners: {
'click': function() {
var windowW = 1200;
var windowH = 800;

var windowX = (screen.width / 2) - (windowW / 2);
var windowY = (screen.height / 2) - (windowH / 2);

var params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';

feedbackWindow = window.open('where I want it go', 'reportWindow', 'width='+windowW+', height='+windowH+', scrollbars=yes, scrolling=yes, resizeable=yes');
feedbackWindow.blur();
window.focus();

feedbackWindow.resizeTo(windowW, windowH);
feedbackWindow.moveTo(windowX, windowY);

feedbackWindow.focus();
}
}
},
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='where I want it go';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,disableIndexes: ['peer_reviewed_papers_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
}), cellActions]
});
// render it
peerGrid.render('peer_reviewed_papers');

// trigger the data store load
store.load({params:{start:0, limit:10}});
});

Once again, I appreciate the help.

rockinrandall
23 Dec 2009, 6:32 AM
I really like this plugin.
The example at gridsearch.extjs.eu works great.

But when I try to add the plugin to my code, the text field to type the search in will not take focus until after I hit the refresh button on my PagingToolbar.

Any ideas what might be causing this?

jsakalos
23 Dec 2009, 6:39 AM
If you have autoFocus:true then the field is focused on each store load. If you load store before the field is rendered for the first time then field cannot be focused, it doesn't exist yet.

rockinrandall
23 Dec 2009, 7:35 AM
It seem to work with the change and a browser cache clearing.

Sorry, it is not working. :s

rockinrandall
23 Dec 2009, 7:39 AM
See the application at http://www.vxp.vivox.com/secret

jsakalos
23 Dec 2009, 8:49 AM
Sure it is doing what it is doing. Read please again:


If you have autoFocus:true then the field is focused on each store load.
So if you
removed the load of the storethen the field is never focused.

jsakalos
23 Dec 2009, 8:54 AM
Hi Saki,

Thanks for getting back to me. I've spent some time with this and I haven't been able to find the problem. I'm fairly new to OOP so I'm sure this is part of the problem. Nonetheless, you asked how I define other grids:



Check if several grids do not refer to one instance of an object, e.g. store, or other.

rockinrandall
23 Dec 2009, 9:08 AM
Sure it is doing what it is doing. Read please again:
So if you then the field is never focused.


Why won't the store get focused with a mouse click in the field.
That is the problem that I am seeing at http://www.vxp.vivox.com/secret

If I hit the refresh button on the pagingtoolbar it does get the focus.

But later the clear search button and clicking in the field do not work.

Please advise and thanks.

jsakalos
23 Dec 2009, 2:07 PM
I really don't know what do you want to fix. You cannot focus store, you can focus only form fields and some other html elements. Also, you're using the old version of the plugin. The current version is


@revision $Id: Ext.ux.grid.Search.js 735 2009-07-03 19:18:45Z jozo $

rockinrandall
24 Dec 2009, 6:04 AM
Sorry for the inaccurate language. I got it working by changing what external js files were included and changing the code a little.

Now I just need to find that latest version of the plugin.

Thanks,

Z24_2000
5 Jan 2010, 6:35 AM
Hello again Saki,

I hate to be a bother again as I'm sure this is probably a simple solution that I am just not seeing...however, after hours of debugging based on your last reply:



Check if several grids do not refer to one instance of an object, e.g. store, or other.
I still have the same issue (the search box ends up floating over the search results text).

Here is the code I have (tweaked to eliminate site specific data), everything works except for the positioning of the search box:



<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var researchCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['grant_title']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
research_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var research_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'research_id', type: 'int'},
{name: 'principal_investigator', type: 'string'},
{name: 'grant_title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'amount_received', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: '".WEBSITE_URL."/api/loadgrid.api.php?id=".$faculty_member_ID."&t=".$fields."'
})
});
research_store.setDefaultSort('year_reported', 'desc');

var researchSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'research'
,disableIndexes: ['research_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var researchGrid = new Ext.grid.GridPanel({
id: 'research_grid',
store: research_store,
columns: [
{id:'research_id',header: "Record ID", hidden: true, dataIndex: 'research_id', tooltip:'Sort'},
{header: "Amount", width: 59, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'amount_received', tooltip:'Sort'},
{header: "Principal Investigator", width: 132, sortable: true, dataIndex: 'principal_investigator', tooltip:'Sort'},
{header: "Title", width: 420, sortable: true, dataIndex: 'grant_title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'A. Projects'
,tbar: new Ext.Toolbar({
id: 'researchtbar',
buttons: [
'->',{
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
id: 'researchbbar',
pageSize: 10,
store: research_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [researchSearch, researchCellActions]
});

// trigger the data store load
research_store.load({params:{start:0, limit:10}});

var peerCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_peer_reviewed'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['title']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
peer_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var peer_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'peer_reviewed_papers_id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'author_list', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
peer_store.setDefaultSort('year_reported', 'desc');

var peerSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'peer'
,disableIndexes: ['peer_reviewed_papers_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var peerGrid = new Ext.grid.GridPanel({
id: 'peer_reviewed_papers_grid',
store: peer_store,
columns: [
{id:'peer_reviewed_papers_id',header: "Record ID", hidden: true, dataIndex: 'peer_reviewed_papers_id', tooltip:'Sort'},
{header: "Authors", width: 59, sortable: true, dataIndex: 'author_list', tooltip:'Sort'},
{header: "Source", width: 132, sortable: true, dataIndex: 'source', tooltip:'Sort'},
{header: "Title", width: 420, sortable: true, dataIndex: 'title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'B. Peer-Reviewed Publications'
,tbar: new Ext.Toolbar({
id: 'peertbar',
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
id: 'peerbbar',
pageSize: 10,
store: peer_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [peerSearch, peerCellActions]
});

// trigger the data store load
peer_store.load({params:{start:0, limit:10}});

var nonPeerCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_non_peer_reviewed'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['title']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
non_peer_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var non_peer_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'non_peer_reviewed_papers_id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'author_list', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
non_peer_store.setDefaultSort('year_reported', 'desc');

var nonPeerSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'nonPeer'
,disableIndexes: ['non_peer_reviewed_papers_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var nonPeerGrid = new Ext.grid.GridPanel({
id: 'non_peer_reviewed_papers_grid',
store: non_peer_store,
columns: [
{id:'non_peer_reviewed_papers_id',header: "Record ID", hidden: true, dataIndex: 'non_peer_reviewed_papers_id', tooltip:'Sort'},
{header: "Authors", width: 59, sortable: true, dataIndex: 'author_list', tooltip:'Sort'},
{header: "Source", width: 132, sortable: true, dataIndex: 'source', tooltip:'Sort'},
{header: "Title", width: 435, sortable: true, dataIndex: 'title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'C. Non-Peer Reviewed Publications'
,tbar: new Ext.Toolbar({
id: 'nontbar',
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
id: 'nonbbar',
pageSize: 10,
store: non_peer_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [nonPeerSearch, nonPeerCellActions]
});

// trigger the data store load
non_peer_store.load({params:{start:0, limit:10}});

var bookCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_book_chapter_mono'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['title']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
book_chapter_mono_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var book_chapter_mono_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'book_chapter_mono_id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'author_list', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
book_chapter_mono_store.setDefaultSort('year_reported', 'desc');

var bookSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'book'
,disableIndexes: ['book_chapter_mono_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var bookGrid = new Ext.grid.GridPanel({
id: 'book_chapter_mono_grid',
store: book_chapter_mono_store,
columns: [
{id:'book_chapter_mono_id',header: "Record ID", hidden: true, dataIndex: 'book_chapter_mono_id', tooltip:'Sort'},
{header: "Authors", width: 59, sortable: true, dataIndex: 'author_list', tooltip:'Sort'},
{header: "Source", width: 132, sortable: true, dataIndex: 'source', tooltip:'Sort'},
{header: "Title", width: 435, sortable: true, dataIndex: 'title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'D. Books / Chapters / Monographs / Editorials'
,tbar: new Ext.Toolbar({
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: book_chapter_mono_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [bookSearch, bookCellActions]
});

// trigger the data store load
book_chapter_mono_store.load({params:{start:0, limit:10}});

var posterCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_poster_reports'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['title']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
poster_reports_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var poster_reports_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'poster_reports_id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'title', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'author_list', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
poster_reports_store.setDefaultSort('year_reported', 'desc');

var posterSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'poster'
,disableIndexes: ['book_chapter_mono_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var posterGrid = new Ext.grid.GridPanel({
id: 'poster_reports_grid',
store: poster_reports_store,
columns: [
{id:'poster_reports_id',header: "Record ID", hidden: true, dataIndex: 'poster_reports_id', tooltip:'Sort'},
{header: "Authors", width: 59, sortable: true, dataIndex: 'author_list', tooltip:'Sort'},
{header: "Source", width: 132, sortable: true, dataIndex: 'source', tooltip:'Sort'},
{header: "Title", width: 435, sortable: true, dataIndex: 'title', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'E. Poster Presentations / Technical Reports'
,tbar: new Ext.Toolbar({
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: poster_reports_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [posterSearch, posterCellActions]
});

// trigger the data store load
poster_reports_store.load({params:{start:0, limit:10}});

var conferenceCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_conference_papers'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['lectures_papers_list']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
conference_papers_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var conference_papers_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'conference_papers_id', type: 'int'},
{name: 'institution', type: 'string'},
{name: 'lectures_papers_list', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'location', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
conference_papers_store.setDefaultSort('year_reported', 'desc');

var conferenceSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'conference'
,disableIndexes: ['conference_papers_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var conferenceGrid = new Ext.grid.GridPanel({
id: 'conference_papers_grid',
store: conference_papers_store,
columns: [
{id:'conference_papers_id',header: "Record ID", hidden: true, dataIndex: 'conference_papers_id', tooltip:'Sort'},
{header: "Location", width: 59, sortable: true, dataIndex: 'location', tooltip:'Sort'},
{header: "Institution", width: 132, sortable: true, dataIndex: 'institution', tooltip:'Sort'},
{header: "Invited Lectures / Conference Papers", width: 435, sortable: true, dataIndex: 'lectures_papers_list', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'F. Invited Lectures / Conference Papers'
,tbar: new Ext.Toolbar({
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: conference_papers_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [conferenceSearch, conferenceCellActions]
});

// trigger the data store load
conference_papers_store.load({params:{start:0, limit:10}});

var scholarlyCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_scholarly'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['description']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
scholarly_activity_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var scholarly_activity_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'scholarly_activity_id', type: 'int'},
{name: 'scholarly_activity_type', type: 'string'},
{name: 'description', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
scholarly_activity_store.setDefaultSort('year_reported', 'desc');

var scholarlySearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'scholarly'
,disableIndexes: ['scholarly_activity_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var scholarlyGrid = new Ext.grid.GridPanel({
id: 'scholarly_activity_grid',
store: scholarly_activity_store,
columns: [
{id:'scholarly_activity_id',header: "Record ID", hidden: true, dataIndex: 'scholarly_activity_id', tooltip:'Sort'},
{header: "Activity Type", width: 191, sortable: true, dataIndex: 'scholarly_activity_type', tooltip:'Sort'},
{header: "Description", width: 435, sortable: true, dataIndex: 'description', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'G. Other Scholarly Activity'
,tbar: new Ext.Toolbar({
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: scholarly_activity_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [scholarlySearch, scholarlyCellActions]
});

// trigger the data store load
scholarly_activity_store.load({params:{start:0, limit:10}});

var patentCellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
switch (action) {
case 'icon-edit':
section = 'edit_patent'
window.location='url stuff';
break;
case 'icon-delete':
Ext.MessageBox.confirm('Please Confirm', 'Do you really want to delete: <b>'+record.data['description']+'</b>?' , function doDel2(btn, id) {
if(btn == 'yes') {
Ext.Ajax.request({
url: 'url stuff',
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
Ext.MessageBox.alert("Success",'The record was deleted.');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("Delete Failed","Delete failed, please contact the administrator.");
},
success:function(response,options){
Ext.MessageBox.hide();
patent_activity_store.reload();
}
})// end Ajax request
}
});
break;
}
}
,beforeaction:function() {
false;
}
}
,align:'left'
});

var patent_activity_store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'recordId',
remoteSort: true,
fields: [
{name: 'patent_activity_id', type: 'int'},
{name: 'patent_activity_type', type: 'string'},
{name: 'description', type: 'string'},
{name: 'year_reported', type: 'string'},
{name: 'edit_action', type: 'string'},
{name: 'del_action', type: 'string'}
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'url stuff'
})
});
patent_activity_store.setDefaultSort('year_reported', 'desc');

var patentSearch = new Ext.ux.grid.Search({
iconCls: 'icon-magnifier'
,inputId: 'patent'
,disableIndexes: ['patent_activity_id']
,minChars: '2'
,autoFocus: 'false'
,position: 'bottom'
,mode: 'local'
,align: 'right'
});

var patentGrid = new Ext.grid.GridPanel({
id: 'patent_activity_grid',
store: patent_activity_store,
columns: [
{id:'patent_activity_id',header: "Record ID", hidden: true, dataIndex: 'patent_activity_id', tooltip:'Sort'},
{header: "Type", width: 191, sortable: true, dataIndex: 'patent_activity_type', tooltip:'Sort'},
{header: "Description", width: 435, sortable: true, dataIndex: 'description', tooltip:'Sort'},
{header: "Year", width: 50, sortable: true, dataIndex: 'year_reported', tooltip:'Sort'},
{header: "", width: 26, sortable: false, dataIndex: 'edit_action'
,cellActions:[{
iconCls:'icon-edit'
,tooltip:'Edit'
}]
},
{header: "", width: 26, sortable: false, dataIndex: 'del_action'
,cellActions:[{
iconCls:'icon-delete'
,tooltip:'Delete'
}]
}
],
stripeRows: true,
disableSelection:true,
height:300,
columnLines: false,
enableColumnHide: false,
enableHdMenu: false,
loadMask: true,
width:732,
title:'H. Patents'
,tbar: new Ext.Toolbar({
buttons: [
'->', {
text: 'Add',
icon: 'images/add.png',
cls: 'x-btn-text-icon addButton',
tooltip: 'Click to add a new record',
align: 'right',
listeners: {
'click': function() {
window.location='url stuff';
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize: 10,
store: patent_activity_store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
,plugins: [patentSearch, patentCellActions]
});

// trigger the data store load
patent_activity_store.load({params:{start:0, limit:10}});

var accordion = new Ext.Panel({
layout:'accordion',
width: 732,
height: 500,
id: 'masterAccordion',
renderTo: 'gridAccordion',
items: [ researchGrid, peerGrid, nonPeerGrid, bookGrid, posterGrid, conferenceGrid, scholarlyGrid, patentGrid ]
});
});
</script>
I really appreciate you spending the time to help direct me towards the solution. This plugin is fantastic!

-Andrew

ssawchenko
7 Jan 2010, 4:10 PM
Hello all!

We recently upgraded to ext 3.1.0 and we noticed that the twintrigger field in our gridsearch plugin no longer renders [we stepped through the DOM and there is no sign of it]. We reverted back to the previous ext version and -BAM- we can see it fine.

I was setting the "toolbarContainer" property for the search, so that I could place the search in a separate panel, and I think this is where the bug comes in. If I remove that property, and add the tbar back onto the grid, the search plugin will render perfectly.

I need to be able to move the search to a different panel though, is there a way around this?

Thanks in advance!

jsakalos
8 Jan 2010, 3:28 AM
Do you have latest (devel) version of the plugin?

ssawchenko
8 Jan 2010, 9:14 AM
Do you have latest (devel) version of the plugin?

I was using 650 [2009-03-25 17:29:12], however even when I grabbed the development version 735 [2009-07-03 19:18:45] I still see the same issue.

Here are some code snippets that show what I am doing; it is possible that I am missing a key property or something.

The Panel that should contain the search bar


// Create the search bar; add search to a seperate
// panel so that it is not attached to the grid.
var searchPanel = new Ext.Panel({
renderTo: tab_SearchDiv,
tbar:[],
items: [{
id: id + "_showingDiv",
html: "<div align='right'>Loading...</div>",
align:'right',
cls: 'showing-div'
}]
});
The search bar


// Create the search bar.
_Searches[id] = new Ext.ux.grid.Search
(
{
toolbarContainer: searchPanel,
position: 'top',
searchText: "",
mode:'local',
minChars:1,
width: 150,
autoFocus:true,
align:'right',
iconCls: "icon-magnifier"
}
);
The grid that the search will run on


// Finally create the grid, using the objects created above.
_DataGrids[id] = new Ext.grid.AlarmPanel({
store: _DataStores[id],
columns: _Columns[id],
viewConfig: _common_myView,
iconCls: 'icon-grid',
renderTo: tab_AlarmListDiv,
sm: _Selections[id],
plugins: _Searches[id],
expanded: true,
height:$(window).height()
});

jsakalos
9 Jan 2010, 8:58 AM
The on-line example (http://gridsearch.extjs.eu) now runs against Ext 3.1 SVN. Can you reproduce the problem there?

ssawchenko
12 Jan 2010, 9:53 AM
I downloaded your source [dev], and I've been trying to reproduce it, but I'm honestly really green with Ext. I have tried to create a separate panel, and then render the search bar into the panel, but even after these changes I am getting an error "tb is undefined" - meaning I can't even get to the point where I could see if my original error is occurring.

Below are the code changes I've made to the example gridsearch, maybe you can see an error I made. If it helps I can attach the entire file.

Any clue where I am going wrong?



// At the top of the page I added the creation of the new panel where the search bar will be... I then create the search object, setting the new panel as the toolbarcontainer.
var _SearchPanel = new Ext.Panel({
tbar:[],
items: [{
id: id + "_showingDiv",
html: "<div align='right'>Loading...</div>",
align:'right',
cls: 'showing-div'
}]
});

_Search = new Ext.ux.grid.Search({
toolbarContainer: _SearchPanel
,iconCls:'icon-zoom'
,readonlyIndexes:['note']
,disableIndexes:['pctChange']
,minChars:2
,autoFocus:true
});

// ...

// Then in the store, I change the plugins line to read
, plugins: [_Search, this.rowActions]


// I Register the panel as a type [not sure if this is needed, I've never done this before]
Ext.reg('examplegrid1', Example.Grid1);
Ext.reg('examplesearchpanel', _SearchPanel);

// Then I try to put the panel in the window, although I'm not certain if this will mess up with the given layout
var win = new Ext.Window({
id:'gswin'
,title:Ext.get('page-title').dom.innerHTML
,iconCls:'icon-grid'
,width:700
,height:400
,x:320
,y:82
,plain:true
,layout:'fit'
,closable:false
,border:false
,maximizable:true
,items: [{xtype:'examplegrid1', id:'examplegrid1'}, {xtype:'panel', id:'examplesearchpanel'}]
,plugins:[new Ext.ux.menu.IconMenu()]
});
win.show();

jsakalos
12 Jan 2010, 12:49 PM
Are you adding the plugin to a panel or to a grid?

ssawchenko
12 Jan 2010, 1:21 PM
The plugin is being added to the data store; it's being added in the same location as in your example page [gridsearch.js]. In your original page you were defining the search plugin inline on the store, and with my change I just created the object at the beginning of the file [stored in the var _Search] and then in the store I added the plugin like this: ,plugins: [_Search, this.rowActions]

Now it is quite possible that I haven't modified the code correctly to do what I want to do. I am accustom to setting up specific html divs and then rendering to those divs.

What I WANT to do is move the search bar to be located in a panel that is separate from the grid, which is why I was setting the toolbarContainer property for the searchgrid plugin. I had this working fine until we upgraded to Ext 3.1.

I tried uploading the entire gridsearch.js file on this forum to show you better what I mean, but I'm guessing it will only take images as it says it's "invalid".

I'll copy the file here, and I can remove it later if you want, since it will make this post very long.

Thank you very much!



// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
* Ext.ux.grid.Search Plugin Example Application
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 5. April 2008
* @version $Id: gridsearch.js 127 2009-02-13 21:26:31Z jozo $
*
* @license gridsearch.js 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
*/

/*global Ext, Example, WebPage, window */

Ext.ns('Example', 'WebPage');
Ext.BLANK_IMAGE_URL = 'ext31/resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Example.version = '1.1';


// Create the search bar; add search to a seperate
// panel so that it is not attached to the grid.
var _SearchPanel = new Ext.Panel({
tbar:[]

});

var _Search = new Ext.ux.grid.Search({
toolbarContainer: _SearchPanel
,iconCls:'icon-zoom'
,readonlyIndexes:['note']
,disableIndexes:['pctChange']
,minChars:2
,autoFocus:true
// ,menuStyle:'radio'
});

// {{{
Example.Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
// defaults - can be changed from outside
layout:'fit'
,border:false
,stateful:false
,url:'process-request.php'
,objName:'company'
,idName:'compID'

// {{{
,initComponent:function() {

// create row actions
this.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'icon-minus'
,qtip:'Delete Record'
,style:'margin:0 0 0 3px'
}]
});
this.rowActions.on('action', this.onRowAction, this);

// hard coded - cannot be changed from outside
// {{{
var config = {
// {{{
store:new Ext.data.Store({
reader:new Ext.data.JsonReader({
id:'compID'
,totalProperty:'totalCount'
,root:'rows'
,fields:[
{name:'compID', type:'int'}
,{name:'company', type:'string'}
,{name:'price', type:'float'}
,{name:'change', type:'float'}
,{name:'pctChange', type:'float'}
,{name:'lastChange', type:'date', dateFormat:'n/j/Y'}
,{name:'industry', type:'string'}
// ,{name:'action1', type:'string'}
// ,{name:'qtip1', type:'string'}
// ,{name:'action2', type:'string'}
// ,{name:'qtip2', type:'string'}
// ,{name:'action3', type:'string'}
// ,{name:'qtip3', type:'string'}
,{name:'note', type:'string'}
]
})
,proxy:new Ext.data.HttpProxy({url:this.url})
,baseParams:{cmd:'getData', objName:this.objName}
,remoteSort:true
})
// }}}
// {{{
,columns:[{
header:'Company'
,id:'company'
,dataIndex:'company'
,width:160
,sortable:true
,editor:new Ext.form.TextField({
allowBlank:false
})
},{
header:'Price'
,dataIndex:'price'
,width:40
,sortable:true
,align:'right'
,editor:new Ext.form.NumberField({
allowBlank:false
,decimalPrecision:2
,selectOnFocus:true
})
},{
header:'Change'
,dataIndex:'change'
,width:40
,sortable:true
,align:'right'
,editor:new Ext.form.NumberField({
allowBlank:false
,decimalPrecision:2
,selectOnFocus:true
})
},{
header:'Change [%]'
,dataIndex:'pctChange'
,width:50
,sortable:true
,align:'right'
,editor:new Ext.form.NumberField({
allowBlank:false
,decimalPrecision:2
,selectOnFocus:true
})
},{
header:'Last Updated'
,dataIndex:'lastChange'
,width:70
,sortable:true
,align:'right'
,editor:new Ext.form.DateField({
})
// ,renderer:Ext.util.Format.dateRenderer('n/j/Y')
,renderer:Ext.util.Format.dateRenderer('m/d/Y h:i A T')
},{
header:'Industry'
,dataIndex:'industry'
,width:75
,sortable:true
,editor:new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
id:0
,fields:['industry']
,data:[
['Automotive']
,['Computer']
,['Finance']
,['Food']
,['Manufacturing']
,['Medical']
,['Retail']
,['Services']
]
})
,displayField:'industry'
,valueField:'industry'
,triggerAction:'all'
,mode:'local'
,editable:false
,lazyRender:true
,forceSelection:true
})
},{
header:'Note'
,dataIndex:'note'
,width:75
,sortable:true
,editor:new Ext.form.TextArea({
grow:true
})
}, this.rowActions]
// }}}
,plugins: [_Search, this.rowActions]
,viewConfig:{forceFit:true}
,buttons:[{
text:'Save'
,iconCls:'icon-disk'
,scope:this
,handler:this.commitChanges
},{
text:'Reset'
,iconCls:'icon-undo'
,scope:this
,handler:function() {
this.store.rejectChanges();
}
}]
,tbar:[{
text:'Add Record'
,iconCls:'icon-plus'
,listeners:{
scope:this
,click:{fn:this.addRecord,buffer:200}
}
}]
}; // eo config object
// }}}

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// create bottom paging toolbar
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});

// call parent
Example.Grid1.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
// }}}
// {{{
,onRender:function() {
// call parent
Example.Grid1.superclass.onRender.apply(this, arguments);

this.bbar2 = new Ext.Toolbar({
renderTo:this.bbar
,items:['Example of second toolbar', '-', {
text:'Button'
,iconCls:'icon-key'
}, '-', {
xtype:'checkbox'
,boxLabel:'A Checkbox'
,checked:true
}]
});

// load store
this.store.load({params:{start:0,limit:10}});

} // eo function onRender
// }}}
// {{{
,afterRender:function() {
Example.Grid1.superclass.afterRender.apply(this, arguments);
this.getBottomToolbar().add({text:'A test button',iconCls:'icon-info'});
} // eo function afterRender
// }}}
// {{{
,addRecord:function() {
// console.info("adding record");
} // eo function addRecord
// }}}
// {{{
,onRowAction:function(grid, record, action, row, col) {
switch(action) {
case 'icon-minus':
this.deleteRecord(record);
break;

default:
break;
}
} // eo onRowAction
// }}}
// {{{
,commitChanges:function() {
var records = this.store.getModifiedRecords();
if(!records.length) {
return;
}
var data = [];
Ext.each(records, function(r, i) {
data.push(r.data);
}, this);
var o = {
url:this.url
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
cmd:'saveData'
,objName:this.objName
,data:Ext.encode(data)
}
};
Ext.Ajax.request(o);
} // eo function commitChanges
// }}}
// {{{
,requestCallback:function(options, success, response) {
if(true !== success) {
this.showError(response.responseText);
return;
}
try {
var o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText, 'Cannot decode JSON object');
return;
}
if(true !== o.success) {
this.showError(o.error || 'Unknown error');
return;
}

switch(options.params.cmd) {
case 'saveData':
var records = this.store.getModifiedRecords();
Ext.each(records, function(r, i) {
if(o.insertIds && o.insertIds[i]) {
r.set(this.idName, o.insertIds[i]);
delete(r.data.newRecord);
}
});
this.store.commitChanges();
break;

case 'deleteData':
break;
}
} // eo function requestCallback
// }}}
// {{{
,showError:function(msg, title) {
Ext.Msg.show({
title:title || 'Error'
,msg:Ext.util.Format.ellipsis(msg, 2000)
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
,minWidth:1200 > String(msg).length ? 360 : 600
});
} // eo function showError
// }}}
// {{{
,deleteRecord:function(record) {
Ext.Msg.show({
title:'Delete record?'
,msg:'Do you really want to delete <b>' + record.get('company') + '</b><br/>There is no undo.'
,icon:Ext.Msg.QUESTION
,buttons:Ext.Msg.YESNO
,scope:this
,fn:function(response) {
if('yes' !== response) {
return;
}
// console.info('Deleting record');
}
});
} // eo function deleteRecord
// }}}

}); // eo extend


// register xtype
Ext.reg('examplegrid1', Example.Grid1);
Ext.reg('examplesearchpanel', _SearchPanel);
// }}}

// application main entry point
Ext.onReady(function() {
Ext.QuickTips.init();
// var tip = Ext.QuickTips.getQuickTip();
// Ext.apply(tip, {
// autoHide:false
// });

var adsenseHost =
'gridsearch.localhost' === window.location.host
|| 'gridsearch.extjs.eu' === window.location.host
;
var page = new WebPage({
version:Example.version
,westContent:'west-content'
,centerContent:'center-content'
,adRowContent:adsenseHost ? 'adrow-content' : undefined
});

var ads = Ext.getBody().select('div.adsense');
if(adsenseHost) {
ads.removeClass('x-hidden');
}
else {
ads.remove();
}

// create and show window
var win = new Ext.Window({
id:'gswin'
,title:Ext.get('page-title').dom.innerHTML
,iconCls:'icon-grid'
,width:700
,height:400
// ,stateful:false
,x:320
,y:82
,plain:true
,layout:'fit'
,closable:false
,border:false
,maximizable:true
,items: [{xtype:'examplegrid1', id:'examplegrid1'}, {xtype:'panel', id:'examplesearchpanel'}]
,plugins:[new Ext.ux.menu.IconMenu()]
});
win.show();

}); // eo function onReady

// eof

jsakalos
12 Jan 2010, 1:40 PM
I see, I haven't tested a different toolbar container with Ext 3.1, anyway, I'd guess that the target toolbar is not rendered yet when needed by the Search plugin.

ssawchenko
14 Jan 2010, 8:56 AM
Hmm... any ideas of a work around? We need this to work, so if it doesn't I'll have to try and think of a different way of getting a search function in place.

jsakalos
14 Jan 2010, 11:40 AM
Post please a showcase that I will be able to run/debug locally, not the plugin itself but the use of it, I'll take a look.

ssawchenko
14 Jan 2010, 2:43 PM
Ok, here's a quick and dirty example that shows the problem.

This implementation will render the search bar into the grid tbar.
To produce the problem:
1) Uncomment //toolbarContainer: searchPanel.id, // *** [1] ***
2) Comment out tbar: [], // *** [2] ***

Now the search bar *should* render in the search panel above the grid. It was working before the switch to ext3.1.

Thanks again!



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext31/resources/css/ext-all.css">
<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">

<script type="text/javascript" src="ext31/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext31/ext-all-debug.js"></script>
<script type="text/javascript" src="js/Ext.ux.util.js"></script>

<script type="text/javascript" src="js/Ext.ux.grid.Search.js"></script>


<script type="text/javascript">

Ext.onReady(function(){

Ext.QuickTips.init(); // Needed for search

var myData = [
['test1',2,44.03],
['test2',1,1.47],
['test3',3,0.34],
['test4',6,1.12],
];

var store = new Ext.data.SimpleStore({
fields: [
{name: 'name'},
{name: 'qty', type: 'int'},
{name: 'price', type: 'float'}
]
});


// Create the search bar; add search to a seperate
// panel so that it is not attached to the grid.
var searchPanel = new Ext.Panel({
renderTo: "search_div",
tbar:[]

});

// Create the search bar.
var search = new Ext.ux.grid.Search
(
{
//toolbarContainer: searchPanel.id, // *** [1] ***
position: 'top',
searchText: "",
mode:'local',
minChars:1,
width: 150,
autoFocus:true,
align:'right',
iconCls: "icon-magnifier"
}
);

// Finally create the grid, using the objects created above.
var DataGrids = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Item", width: 50, dataIndex: 'name', fixed: true },
{header: "Qt", width: 25, dataIndex: 'qty', fixed: true, align: 'right'},
{header: "Price", width: 50, dataIndex: 'price', fixed: true, align: 'right' }
],
tbar: [], // *** [2] ***
iconCls: 'icon-grid',
renderTo: "grid_div",
plugins: search,
height:200,
autoScroll: true,
expanded: true
});

store.loadData(myData);

});



</script>
</head>

<body>

<div id="search_div"></div>
<div id="grid_div"></div>

</body>
</html>
<!-- eof -->

jsakalos
15 Jan 2010, 12:57 AM
I'm now on a business trip, I'll take a look in the evening or tomorrow.

ryanyoungsma
16 Jan 2010, 12:34 PM
"tb is undefined"


I think this error is showing up due to not having any object config defined, even an empty one. For example:


var _SearchPanel = new Ext.Panel({
tbar:[{}],
items: [{
id: id + "_showingDiv",
html: "<div align='right'>Loading...</div>",
align:'right',
cls: 'showing-div'
}]
});See the empty "{}" brackets in the tbar line.

Also, why are you adding this plugin in a separate panel, why not just add the tbar to the grid? Would make it easier from what I can see.

jsakalos
16 Jan 2010, 4:00 PM
@ssawchenko, re-download and try again please. You should get rev. 798 or later.

harsha_velicheti
26 Jan 2010, 12:40 AM
Hi Saki,
Thanks for the great plugin. But i am facing one vary minor issue with this in IE (in mozilla it works fine). It occurs even in the demo at http://gridsearch.extjs.eu/ .PFB the steps to reproduce it.
1. Expand the Search menu and select only Price.
2.Now with out closing the menu and with our clicking on any other part of the screen,
click directly on the search text field and enter the value, it does not search the grid.

Can you please look into this. Is this a bug or am i missing something here.

Thanks in advance
Harsha

jsakalos
26 Jan 2010, 1:47 AM
Yes, it behaves as you describe. I was trying to quickly find what's up to no avail. (I'm not quite sure how to debug in IE.)

Can an IE expert look into it?

surendra_leo
1 Feb 2010, 7:42 AM
Hi Saki,

First of all , thanks for the amazing plugin. We are using this across all the grids we use.

I am facing an issue with the search plugin while searching for special characters. Even in the example on the http://gridsearch.extjs.eu/ , I am not able to search for the characters "**" in the grid.

Could you please help me out in this regard.

Thanks,
Surendra

jsakalos
1 Feb 2010, 11:05 AM
No problem on client side, it sends ** to the server. It is up to server how does it handle these characters.

PS: Example probably does not have the proper handling of stars.

ssawchenko
1 Feb 2010, 2:39 PM
Also, why are you adding this plugin in a separate panel, why not just add the tbar to the grid? Would make it easier from what I can see.

I'm setting it up in a separate panel because I need to display it outside of the grid [based on a storyboard I have been given from a designer which I need to try and recreate as close as possible].

I will try downloading again Saki, I've been away as well, so I haven't been able to follow up on this in a week or so. Thanks again for all your help!

mysticav
11 Feb 2010, 7:57 PM
I'm trying to download Ext.ux.grid.Search 1.1 zip file. I'm getting an ugly error from Server:


Duplicate entry '3843936' for key 1

Query : INSERT INTO phpmv_link_vp (idvisit, idpage, idpage_ref, total_time_page_ref) VALUES ('886997', '214', '214', '444')

Saki, please check that:
http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//gridsearch.extjs.eu/gridsearch-1.1.zip&id=1&pagename=FILE:%20download/gridsearch/gridsearch-1.1.zip

jsakalos
12 Feb 2010, 12:05 AM
Try again, should work now.

mysticav
12 Feb 2010, 12:08 AM
Thanks. By the way, how can I add the plugin directly to a Toolbar, so I can manipulate the position. Normally it appears on the right side corner. I need to change that.

ssawchenko
15 Feb 2010, 10:22 AM
@ssawchenko, re-download and try again please. You should get rev. 798 or later.

Sorry for the long delay in response - I re-downloaded 798 and the search bar is functioning again! Thank you for all your help!

rednix
15 Feb 2010, 11:33 AM
Thanks. By the way, how can I add the plugin directly to a Toolbar, so I can manipulate the position. Normally it appears on the right side corner. I need to change that.


/**
* @cfg {String} position Where to display the search controls. Valid values are top and 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.(defaults to "bottom")
*/
,position:'bottom'

... maybe this is what you are looking for

jsakalos
15 Feb 2010, 11:57 AM
position is for top or bottom toolbar.

mysticav
15 Feb 2010, 1:08 PM
ok. It's ok to put it in the toolbar. But how can I add it before the progress bar ?

Is it possible to change its default right side position ?

abraxxa
15 Feb 2010, 1:12 PM
Look a few pages back, saki showed me a way of doing this as workaround for ext 3.1 compatibility.

metra
19 Feb 2010, 12:44 PM
Hey guys, I'm new to Ext JS. I'm having some difficulty getting your amazing search plugin to work.

Does anyone have a VERY VERY SIMPLE example of this search plugin in action? Something like a search for the Editor Grid Example that is on the main page?

Thanks!

jsakalos
19 Feb 2010, 12:46 PM
I'd suggest to take the code from http://gridsearch.extjs.eu/ and to make it running locally without any change. You will learn a lot in the process.

abraxxa
19 Feb 2010, 12:48 PM
Take a look at saki's ux page and view the js source to see it in action.
Basically you just have to load the js file and specify the plugin and its settings in your grid.

metra
19 Feb 2010, 1:26 PM
Thanks for the help guys.

metra
25 Feb 2010, 8:17 AM
Hey jsakalos,

The clear button to the right of the search text box (the "X") doesn't do anything when I click it. How do I configure it to work properly?

Thanks.

jsakalos
25 Feb 2010, 8:49 AM
Here it works: http://gridsearch.extjs.eu/ See the code and/or re-download the latest version.

metra
25 Feb 2010, 10:21 AM
jsakalos,

I have a combobox in a grid. When the combobox is edit, it fires an event like so:



function afterEdit(e){
Ext.Ajax.request({
url: 'updateLog.htm',
params: {
loglevel: e.value,
logname: e.record.data.logName
},
success: function(response, opts){
var obj = Ext.decode(response.responseText);
console.info(obj.status);
// execute an XHR to send/commit data to the server, in callback do (if successful):
e.record.commit();
},
failure: function(response, opts){
console.log('server-side failure with status code ' + response.status);
e.record.markDirty();
grid.getView().refresh();
}
})
};Sometimes, when i click the combobox to view the drop down list I get this error:
fn.task is undefined

which is in the function createBuffered.

After disabling the search plugin, the error seems to have gone away. Do you have any clues as to what's going on?

Thanks.

BTW, I have EXT JS version 3.1.1

jsakalos
25 Feb 2010, 3:19 PM
Set Firebug to Break on All Errors to find out where is the source of the problem.

metra
25 Feb 2010, 4:53 PM
Oops, I was on version 3.1.0. Updated to 3.1.1 and the error is no longer there. Thanks!

BlueCamel
26 Feb 2010, 9:13 AM
Any chance this could be made stateful? It would be good to remember the menu choices and search value between application or page loads.

atutus
28 Feb 2010, 5:37 AM
Hi jsakalos,

is it possible to have a combobox as searchfield, that the selected value is searched. Maybe this is already available, but I couldn't get it.

Thanks for your help.

jsakalos
28 Feb 2010, 7:10 AM
No, having the combo with options in this extension is not compatible with the design principles. Search is performed in many fields (default all) - it is sort of full text search.