PDA

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



Pages : 1 [2] 3 4 5

jsakalos
14 Jul 2008, 9:07 AM
There is currently no hide or show method. You'd need to hide individual elements individually.

sami_user
17 Jul 2008, 6:44 AM
Wow, paging is also usefull to increase client loading performance (try to built/use a grid of 5k line and 80 columns... 1s to load data from server, 2 min to build/display the huge amount of div/table/div/div/table....)

Like Efex i use local paging.

I use paging only to hide the poor performance of ext grid, and local paging because my data provider don't support ajax request.

@Efex : You are not in "local" mode, PagingMemoryProxy act as a server. So you need to use the "remote" mode, and to find a way to filter in PMP. It's the same problem that using gridfilter with PMP.


@jelt - So do you mean that we cant use gridfiters with PagingMemoryProxy? I have a problem, please see that in post http://extjs.com/forum/showthread.php?t=41381

Regards,
Sam

mike1993
21 Jul 2008, 9:10 AM
There is currently no hide or show method. You'd need to hide individual elements individually.




@@ -182,22 +182,27 @@
this.menu = new Ext.menu.Menu();

// handle position
+ this.starter = null;
if('right' === this.align) {
- tb.addFill();
+ this.starter = new Ext.Toolbar.Fill();
+ tb.add( this.starter );
}
else {
if(0 < tb.items.getCount()) {
- tb.addSeparator();
+ this.starter = new Ext.Toolbar.Separator();
+ tb.add( this.starter );
}
}

- // add menu button
- tb.add({
+ this.button = new Ext.Toolbar.Button({
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
- });
+ });

+ // add menu button
+ tb.add( this.button );
+

@@ -454,6 +459,27 @@
// }}}

} // eo function reconfigure
+
+ , show : function() {
+ if( this.starter != null ) { this.starter.show(); }
+ this.button.show();
+ this.field.show();
+ }
+
+ , hide : function() {
+ if( this.starter != null ) { this.starter.hide(); }
+ this.button.hide();
+ this.field.hide();
+ }
+
+ ,setVisible: function( state ) {
+ if( state ) {
+ this.show();
+ }
+ else {
+ this.hide();
+ }
+ }
// }}}



should have I used a different approach?

jsakalos
21 Jul 2008, 12:14 PM
I have no clue what it does. What problem are you trying to solve? Show and hide?

mike1993
21 Jul 2008, 12:22 PM
Yes. depending on the situation show/hide Grid Search plugin.

DeeZ
23 Jul 2008, 6:24 AM
Hi,

How to had this plugin in a existing toolbar grid with 2 rows ?

Thx.

ArtBuilders
23 Jul 2008, 3:58 PM
I've recently created a grid component. The grid is set to "local" (though technically it's initially loading remotely from db). The following information would be useful to know:

What the user typed into search field
Whether there was an exact match (1 row returned)
Method to access the returned row's data

Normally I would examine the store's "TotalCount" property on change. However, because the plugin is working locally, the TotalCount never changes from first load. So here's what I usually do...


this.store.on('datachanged', function(Store) {
var totalRows = Store.reader.jsonData.totalCount;
if(totalRows==1){
//get record data
}
});
Since that doesn't seem to work in this case, any help with my wish "list" would be greatly appreciated.

ArtBuilders
23 Jul 2008, 4:16 PM
What the user typed into search field
Whether there was an exact match (1 row returned)
Method to access the returned row's data

OK... I did the right thing and switched it to remote. Still would like to know easiest way to listen to seach field in order to know what was entered. Any ideas?

jsakalos
24 Jul 2008, 12:28 AM
There is private field property of the plugin that holds reference to search field. It is TwinTriggerField so you can use getValue() method to get the typed text.

jelt
24 Jul 2008, 5:22 AM
@jelt - So do you mean that we cant use gridfiters with PagingMemoryProxy? I have a problem, please see that in post No, you can use gridfilter with PMP (i did it, with the help of hendricd), and i think you can use gridsearch with PMP (i plan to try this... but when... i don't know ^^).
BUT, you will need to add some js code in your script section.

for the grid, PMP act as a server. So, ban the idea of using local mode (or you will only work on the displayed data).

PMP have a way to filter data. gridfilter/gridsearch have another way to give the filters params. You need to adapt one of them.

I will publish soon a demo with gridfilter/BPMP (buffered paging memory proxy, better than PMP, imo)

ArtBuilders
24 Jul 2008, 2:28 PM
There is private field property of the plugin that holds reference to search field. It is TwinTriggerField so you can use getValue() method to get the typed text.

Sorry... still a little lost. How do I reference the private field (without modifying the plugin source code)? Normally I would observe an onchange or blur event using the ID but I seem to have no way to assign this. So I tried variations of Ext.ux.grid...getValue() with no luck.

Thanks in advance!

jsakalos
24 Jul 2008, 2:39 PM
1. navigate to http://gridsearch.extjs.eu
2. type something in the search field
3. in firebug console type: Ext.getCmp('examplegrid1').plugins[0].field.getValue()

grgur
29 Jul 2008, 3:22 AM
I am using this plugin with a script that loads array into PagingMemoryProxy and then displays the data in pages (PagingToolbar). I needed to search entire data store, not just current page. I made a few quick changes to the script:

- Added config option
pageSize: false
- In onTriggerSearch function (line 300+) just after if(val) { I added
store.load({params:{start:0}});
- I wanted grid to show the first page when search parameters are removed. On else part of the same if statement (arround line 330) I inserted
if (this.pageSize>0) store.load({params:{start:0, limit:this.pageSize}});

Now the local search of onTriggerSearch function looks like:

,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.load({params:{start:0}});
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 {
if (this.pageSize>0) store.load({params:{start:0, limit:this.pageSize}});
}
}


If you load each page remotely and want to use 'local' search then you might want to modify this script a bit so it doesnt read a whole lot of data on server at once (e.g. add another config option and a few if statements)

durlabh
29 Jul 2008, 8:14 AM
For one of my requirements, I wanted custom columns in search. For example, grid shows a column such as reference number which is really a combination of fields such as Order#, PO# etc. So, while searching, I wanted to give the user to search on either all reference types or specific reference type. So here are the changes I made:

In prototype:



/**
* @cfg {Boolean} addColumns automatically add columns from grid columnModel (defaults to true)
*/
,addColumns:true

/**
* @cfg {Array} indexes Array of custom items to show in menu, e.g. [{text: 'Order#, dataIndex: 'OrderNumber'}]
*/
,indexes:[]


In reconfigure:


// {{{
// add new items
if(this.indexes instanceof Array) {
Ext.each(this.indexes, function(item) {
menu.add(new Ext.menu.CheckItem({
text:item.text
,hideOnClick:false
,checked:'all' === this.checkIndexes
,dataIndex:item.dataIndex
}));
}, this);
}
if(this.addColumns) {
var cm = this.grid.colModel;
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
,checked:'all' === this.checkIndexes
,dataIndex:config.dataIndex
}));
}
}
}, this);
}
// }}}

jsakalos
29 Jul 2008, 1:39 PM
@durlabh, @grgur, do you expect any action of mine?

durlabh
29 Jul 2008, 2:32 PM
@durlabh, @grgur, do you expect any action of mine?

Hi Saki,

I made 3 changes overall and this might be helpful to others too. So, you may want to review. My changes are:

addColumns: whether to autoConfigure. Useful if you don't want to use the columns automatically from grid.
indexes: For custom columns. I described my usecase earlier.
onTriggerSearch: added a parameter whether grid should load. This was useful for me as I allow the users to save/ load their search criteria with other filters on the form. So, when loading the filter I setup my each search field including your plugin and then load after thatThanks,

Durlabh

jelt
30 Jul 2008, 1:00 AM
@grgur : Thanks for sharing your trick :)

Basically it work : data are filtered on the entire dataset, not only on the current displayed page.

You are perhaps interested by problems encountered when using this :
- data are shown before doing filter, the time to show thousand of rows is huge.
- Filtered data is not paged (if you have 300 results matching with your filter, it show all this 300 rows) but paging toolbar is shown, with bad infos.
- pagesize is not taken from the paging toolbar, return bad pagesize if changed dynamically in the paging toolbar.

charak
31 Jul 2008, 4:11 AM
Very nice work.
I want to use this plugin in my grid,
but my grid displays only one coloumn and thus the width of grid
is only 150px after adding this plugin the width of the panel increases
which gives very bad look I tried adding width:50 to the plugin but it's to small.

can I just remove the button search from the plugin...that willl reduce the width required for the plugin.

I am using EXT 2.1

please help.

jsakalos
31 Jul 2008, 9:34 AM
Menu cannot be disabled out of the box - you would need to override some methods.

Strati
1 Aug 2008, 3:14 AM
Hello!

I use this great plugins, and everything expect one thing work correctly.
The one thing is:
when it's in local mode, and I click on a button, with this handler:

reloadGrid: function( button, event )
{

this.getStore().reload();
},

after the reload all the records displayed, without affected by the text entered in the filter input. In remote mode it works correctly.

What't the problem?

Thanks for your help!

charak
1 Aug 2008, 3:24 AM
Menu cannot be disabled out of the box - you would need to override some methods.
Can I do something so that the magnifier icon comes before(left) the
text field and menu comes after(right) the text field and also this plugin has
some unused width at both right and left hand side can they be removed??
so that the text field has almost all the width given to the plugin minus the width required by
icons and menu button.

durlabh
1 Aug 2008, 4:56 AM
Strati, you will need to call the method plugin.onTriggerSearch() after you reload the grid. Current behavior is the expected behavior as it works with loaded data only in 'local' mode. If you want to configure it to re-apply in local mode after each load also, you may want to do something like grid.getStore().on('dataloaded', plugin.onTriggerSearch, plugin)

I hope this hint helps.

jsakalos
1 Aug 2008, 1:56 PM
Sure you can achieve the effects you want either by overriding/extending the plugin or by tweaking css. Sorry, I don't have time to do it for you.


Can I do something so that the magnifier icon comes before(left) the
text field and menu comes after(right) the text field and also this plugin has
some unused width at both right and left hand side can they be removed??
so that the text field has almost all the width given to the plugin minus the width required by
icons and menu button.

jsakalos
1 Aug 2008, 1:57 PM
@Strati, there are two modes: remote and local and neither of them needs any additional "handler".

rosecorp
5 Aug 2008, 3:39 AM
What did remove? I have the same problem.

jsakalos
5 Aug 2008, 10:08 AM
What did remove? I have the same problem.
I have no idea what are you trying to say.

dax
8 Aug 2008, 12:12 AM
Hi!!

Great plugin, is very useful, thanks for sharing jsakalos.

Only one question, I see the plugin is case sensitive, but don't work with accents for me. What can I do??

Thanks...

jsakalos
8 Aug 2008, 8:55 AM
Demo is very, very simple - sqlite backend. Accents are mainly question of server logic - JavaScript always sends utf-8.

johrisd
13 Aug 2008, 8:39 PM
Hi,
I am trying to find the search string typed by a user into the search plugin. I am using the GWTExtjs API.



public static class GWTProxyImpl extends GWTProxy {
public void load(int start, int limit, String sort, String dir, final JavaScriptObject o, UrlParam[] baseParams) {
String query = null (This needs to be search plugin form submitted value);
ServiceFactory.getAsynchInstance().search(query, new Integer(start), sort, new AsyncCallback<PagingData>() {
public void onFailure(Throwable caught) {
loadResponse(o, false, 0, (JavaScriptObject) null);
}

public void onSuccess(PagingData result) {
loadResponse(o, true, result.totalRecords, result.data);

}
});
}
}


Basically, i need the search string the user fed in so that i can send it to the backend(Lucene).

jsakalos
13 Aug 2008, 11:42 PM
See paramNames documentation in the source code.

sebrand
19 Aug 2008, 3:42 PM
Hi Saki, great work you did with the grid search extension.
1. I was wondering if there is any possibility to show the "grid search controls" before the other elements, i.e. I have a tbar as you can see in the image I have attached, what I want to do is to show the elements in the tbar in this order: first "grid controls", then Button1 and finally Button2.
2. I have my grid in a form panel wich is hidden, when I make that panel visible with a setVisible('true'), I just can see the search combo but not the field to write, the button to erase and the button to search.

http://i114.photobucket.com/albums/n246/sebrand/Example.jpg

I appreciate your help with this issue.

jsakalos
20 Aug 2008, 1:38 AM
Try to add Button1 and Button2 to the top toolbar from grid render event. Search plugin should have been already initialized/rendered at that time.

nicola_java
22 Aug 2008, 1:29 AM
Great job! thanks a million:D

Lobos
3 Sep 2008, 4:01 PM
Hi there,

I have been using this search plugin and it works great, but for some reaosn on one grid something really weird is happening, the input textfield container div style width attribute is getting set to 0 so nothing shows, here is the html rendered:


<td id="ext-gen1296"><div class="x-form-field-wrap" id="ext-gen1297" style="overflow: hidden; width: 0px;">
<input type="text" name="ext-comp-1139" id="ext-comp-1139" autocomplete="off" size="16" class="x-form-text x-form-field" style="width: 100px;"/>
<span class="x-form-twin-triggers" id="ext-gen1298"><img class="x-form-trigger x-form-clear-trigger" src="js/ext-2.2/resources/images/default/s.gif" id="ext-gen1299"/><img class="x-form-trigger x-form-search-trigger" src="js/ext-2.2/resources/images/default/s.gif" id="ext-gen1300"/></span></div></td>

when normally it should be like this:


<td id="ext-gen5255"><div class="x-form-field-wrap" id="ext-gen5256" style="overflow: hidden; width: 100px;">
<input type="text" name="ext-comp-1647" id="ext-comp-1647" autocomplete="off" size="16" class="x-form-text x-form-field" style="width: 66px;"/>
<span class="x-form-twin-triggers" id="ext-gen5257"><img class="x-form-trigger x-form-clear-trigger" src="js/ext-2.2/resources/images/default/s.gif" id="ext-gen5258"/><img class="x-form-trigger x-form-search-trigger" src="js/ext-2.2/resources/images/default/s.gif" id="ext-gen5259"/></span></div></td>

it's got me totally beat as to why this could happen... i am really at my wits end as i have given it a width (even though it is auto set at 100 in the class)

Thanks for any advice

jsakalos
3 Sep 2008, 11:07 PM
The grid is most likely rendered into a hidden (display:none) container. Make sure that you lazy instantiate/render your grid.

AMS949
4 Sep 2008, 5:52 AM
Hi there,

Thanks for a great plugin!! I have one issue that I hope you can help me with. I am trying to print the search results of the grid. I added a button to the tbar, but I need guidance on how to access the search string that the user has provided so I can send that off to a new html page for processing. Any suggestions?

Thanks!!

jsakalos
4 Sep 2008, 11:34 AM
Take a look at onTriggerSearch method to see how it is done.

razor
5 Sep 2008, 5:04 AM
for all people who are getting an hidden trigger textfield, please use the following code when showing/focussing your grid:



var bar = grid.getTopToolbar();
bar.items.items[1].syncSize();
bar.syncSize();
grid.syncSize();
grid.render();

This is probably a dirty hack, please inform me if a better way (e.g. lazy instantination (which is impossible in my case)).

jsakalos
5 Sep 2008, 2:33 PM
I'd try to avoid the above as much as possible...

grgur
8 Sep 2008, 12:24 AM
@grgur : Thanks for sharing your trick :)

Basically it work : data are filtered on the entire dataset, not only on the current displayed page.

You are perhaps interested by problems encountered when using this :
- data are shown before doing filter, the time to show thousand of rows is huge.
- Filtered data is not paged (if you have 300 results matching with your filter, it show all this 300 rows) but paging toolbar is shown, with bad infos.
- pagesize is not taken from the paging toolbar, return bad pagesize if changed dynamically in the paging toolbar.
Sorry for delay on this issue.

True, my sample store did not have too many items and I didn't notice what could happen with larger sets. I'll try to work on it more and post my findings.

Regarding showing all results after filter applied (even if result set is 300+), I concur it can be distracting, but that is exactly what I wanted to achieve. Do you need it paged?

Again, thanks to Saki for this wonderful plugin.

jelt
8 Sep 2008, 12:59 AM
Regarding showing all results after filter applied (even if result set is 300+), I concur it can be distracting, but that is exactly what I wanted to achieve. Do you need it paged?

not necessary (i think it's better, but i understand that it's not the goal of the plugin)

I just notice you that paging toolbar is displayed, with wrong info. I think you must choose between use or hide paging ;)

ajain
23 Sep 2008, 7:12 AM
Hi All, I am relatively new to EXT JS. I came across this plugin and it fits very well with the requirement I have. It is so useful!! I have one question though - How can I change the minLength required for text entered in the search box? I tried

minLength:5

but that does not change anything and the search box still expects 2 characters as min length and the error message is also for 2 characters.

Thanks in advance!

mjlecomte
23 Sep 2008, 8:10 AM
You should probably review the source code for the plugin for explanations/description for available config options. Looks like minChars might be what you are searching for.

mjlecomte
23 Sep 2008, 8:12 AM
Saki, looks like first post may be outdated now? You might want to note such or remove the plugin code? Someone might be scanning that post to see the source code?

ajain
23 Sep 2008, 9:07 AM
I did look at the source code and only then was able to arrive at trying to use 'minLength'. Also minChars doesn't seem to be a config option.

From the source code -


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

jsakalos
23 Sep 2008, 9:47 AM
Thanks MJ, done.

ajain
24 Sep 2008, 6:45 AM
Got this to work with minLength finally. Thanks!

JeffBurr
8 Oct 2008, 12:49 PM
I am trying to implement the grid search plugin.

I am getting the error "grid.reconfigure is undefined". Does this ring any bells?

jsakalos
8 Oct 2008, 12:55 PM
Jeff,
there was no change in Ext. I suspect that you've forgotten sth in your config. Take a look at http://gridsearch.extjs.eu again please.

Remy
8 Oct 2008, 1:01 PM
Sorry, I haven't read 30 pages of posts but here's my tuppenceworth.

What I have done (via HTML tables) in the past is have a footer row which contains one a cell pertaining to the column it aligns with, this allows a user to search for specific values in multiple columns ie First Name = 'John', dob > 11/11/1977 and Lastname begins with 'r' etc., Not sure if thats been requested but thats what I'd like to see, to me it provides ultimate flexibility when searching.

jsakalos
8 Oct 2008, 1:21 PM
http://extjs.com/forum/showthread.php?t=6662

I'd be very glad if you implemented it - I have no time (yet).

ph0enix
9 Oct 2008, 12:53 AM
Hi jsakalos (http://extjs.com/forum/member.php?u=2178), hi folks!
first of all, very many thanks are going to jsakalos (http://extjs.com/forum/member.php?u=2178) for this fantastic plugin!! ;)

I have a "little" question. Is there a way to activate more of less easily the typeahead functionality inside your grid search plugin?

I would really be happy if so.

This coffe goes to you, jsakalos (http://extjs.com/forum/member.php?u=2178) -> ~o)

Greets
Ph0enix

jsakalos
9 Oct 2008, 10:57 AM
It sure should be possible but it needs some coding. I have no immediate plans to do it.

schone
11 Oct 2008, 1:43 AM
this is an excellent plugin! thanks saki!

however when I search for a record and then do a store.load or store.reload the filter is removed and all records are visible and the text is still in the textbox.

is there a config option or a fix to keep the grid filtered after it is loaded/reloaded?

jsakalos
11 Oct 2008, 1:46 AM
Local filtering? I don't use it too much, there may be a bug... I use it primarily for remote store so if you put a filter into baseParams then the grid stays filtered.

schone
11 Oct 2008, 1:49 AM
Saki,

So I think a workaround would be to just clear out the filter which I noticed can be done by calling the onTriggerClear function from within the plugin.

However, I'm confused on how to call this function from inside my preconfigured class which sits in a seperate .js file, any ideas on how I can perform this?

jsakalos
11 Oct 2008, 10:41 PM
You just keep the reference to GridSearch. Something like:



var this.search = new Ext.ux.grid.GridSearch({....});
// ...
search.onTriggerClear();

schone
11 Oct 2008, 11:08 PM
hey saki,

i have tried clearing the grid search plugin by using the above method you suggested however i keep getting this error:


Error: this.field is undefined
Source File: http://localhost:3000/ext/js/plugins/app.plugin.GridSearch.js
Line: 290Any ideas?



Ext.ns('app', 'app.emp');

//Warning icons next to invalid form items
Ext.form.Field.prototype.msgTarget = 'side';

app.emp.empGrid = Ext.extend(Ext.grid.GridPanel, {

region: 'west',
id: 'as-grid-id',
title: 'emps',
hideHeaders: true,
enableHdMenu: false,
stripeRows: true,
loadMask: true,
cls: 'vline-on',

initComponent: function(){
Ext.apply(this, {
//Store for the empgrid
store: new Ext.data.JsonStore({
idProperty: 'id',
fields: [{
name: 'id'
}, {
name: 'name',
type: 'string'
}, {
name: 'description',
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
url: '/emps.ext',
method: 'GET'
})
}),
//Toolbar for the empgrid
tbar: [],
//Column definition of the empgrid
columns: [{
header: 'Name',
id: 'name',
sortable: false,
dataIndex: 'name',
layout: 'fit'
}],
plugins: new Ext.ux.grid.Search({
iconCls: 'grid-zoom',
minChars:3,
autoFocus:true
}),
//RowSelection model for the empgrid
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec){
//sm config here
}
}
}),
//viewConfig of empgrid
viewConfig: {
forceFit:true, //Fit contents of grid
scrollOffset: 0 //Remove the area for a scrollbar
}
});

this.store.on('load',function(){
// trying to clear the grid search plugin here
var searchClr = new Ext.ux.grid.Search({});
searchClr.onTriggerClear();
})

app.emp.empGrid.superclass.initComponent.apply(this, arguments);

},

//When the grid is rendered perform...
onRender : function(){
app.emp.empGrid.superclass.onRender.apply(this, arguments);
//load the empgrid store
this.store.load();
}
});

//Register the empgrid as a xtype
Ext.reg('x-as-grid', app.emp.empGrid);

jsakalos
12 Oct 2008, 11:53 PM
Not like that. Like this:

inside initComponent:


this.gridSearch = new Ext.ux.grid.GridSearch({/* your config here */});

Ext.apply(this, {
// ....
,plugins:[this.gridSearch, /* any other plugins */]
// ...
});

// somewhere where you need it
this.gridSearch.onTriggerClear();

patrosmania
18 Oct 2008, 2:50 PM
Hi
I have been using this plugin for a Ext JS app.
I have problem. The Search button renders but the search field (TwinTriggerField Class) doesn't appear.
How can i solve this?
Thanks in advance.

jsakalos
18 Oct 2008, 2:55 PM
Is this problem apparent also on demo page at http://gridsearch.extjs.eu ? If not see what is the difference between your app and the demo.

patrosmania
18 Oct 2008, 3:00 PM
Is this problem apparent also on demo page at http://gridsearch.extjs.eu ? If not see what is the difference between your app and the demo.

First of all, thanks for the quick answer!

I can see the field in the demo page.
My code for the grid is (i don't know what i'm doing different):




var gridContactos = new Ext.grid.GridPanel({

id: 'gridContacto',
name: 'gridContacto',
ds: contactosStore,
cm: modeloGridContactos,
loadMask: true,
autoHeight:true,
width: 600,
//height: 455,
plugins:[new Ext.ux.grid.Search({

iconCls:'icon-zoom',
//readonlyIndexes:['nombre'],
disableIndexes:['id_contacto'],
minChars:3,
autoFocus:true

})],
viewConfig:{forceFit:true},
border: true,
bbar: pagingBar
});

jsakalos
18 Oct 2008, 3:07 PM
How do you render the grid?

Try first to add renderTo:Ext.getBody() to see if it solves the problem. If yes, you're most likely rendering to a hidden container.

patrosmania
19 Oct 2008, 1:37 PM
How do you render the grid?

Try first to add renderTo:Ext.getBody() to see if it solves the problem. If yes, you're most likely rendering to a hidden container.

I rendered it to Ext.getBody and it does show the search field. So, how can i render it not to a hidden container?

Thanks in advance.

jsakalos
19 Oct 2008, 4:23 PM
It was just a guess... Can you please prepare a showcase that would demonstrate the issue and that I can run/troubleshoot locally?

patrosmania
19 Oct 2008, 7:06 PM
It was just a guess... Can you please prepare a showcase that would demonstrate the issue and that I can run/troubleshoot locally?

Sorry, but what do you mean by preparing a showcase?

mjlecomte
19 Oct 2008, 9:19 PM
Sorry, but what do you mean by preparing a showcase?

He means post a file that works on it's own with the exception of the ext library. He should be able to cut and paste whatever it is you post and be able to save that to his computer and run it as is. If you make it easy for him than you have better chance for him to try to figure out what your problem is.

Here's an example:
http://extjs.com/forum/showthread.php?p=142387#post142387

AMS949
20 Oct 2008, 8:39 AM
Hi, thanks for the great plugin!!!

I need to post the parameters of the search to a server. How do I capture the column filtering options that the user has selected from the Search drop-down menu? For instance, from the example provided at http://gridsearch.extjs.eu/ if the user selected Company and Price only, how can I post those values to another page along with the search string?

Many Thanks!!

jsakalos
20 Oct 2008, 10:36 AM
Check the json which is sent to the server. Selected fields (fields to search in) are posted in json encoded fields array.

AMS949
20 Oct 2008, 11:42 AM
Check the json which is sent to the server. Selected fields (fields to search in) are posted in json encoded fields array.

Saki, thanks for the quick answer. However, I am not sure how to inspect the json sent back to the server. Any hints is appreciated.

Thanks again!

jsakalos
20 Oct 2008, 11:49 AM
Firebug is your friend here.

Rotomaul
24 Oct 2008, 1:52 AM
Hi
I have been using this plugin for a Ext JS app.
I have problem. The Search button renders but the search field (TwinTriggerField Class) doesn't appear.
How can i solve this?
Thanks in advance.

I have just came across this problem but was unable to duplicate it in sample code that I had hoped to post here:(.

It seems the HTML of the warp (that contained text field and the 2 buttons) created by TwinTriggerField.initTrigger() contained "style:overflow:hidden;width:0px" which hides the text field and the 2 buttons.

Then I traced the problem to Ext.form.TriggerField.autoSize() where this line sets the wrap to zero width:


this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth();
Apparently in Ext.Element.getWidth():


getWidth : function(contentWidth){
var w = this.dom.offsetWidth || 0;
w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
return w < 0 ? 0 : w;
},
this.dom.offsetWidth is zero which caused the problem.

At this point I have no idea how to go futher so I came up with this hack to be used after the toolbar had been created:


oo=Ext.getCmp("grid_id").getTopToolbar();
tt=oo.items.find(function(tbo){
if(tbo.triggers){return true;}
return false;
})
if(tt){
tt.syncSize();
}
syncSize() did the job and the text field and 2 buttons is now displayed correctly.

If anyone has any clue why this happened in the first place, please share!

Many thanks.

BTW, great plugin!

jsakalos
24 Oct 2008, 2:10 AM
Trying to render into a hidden container? E.g. an inactive tab? If so, search forums please, the matter has been discussed many many times. Creates problems not only for trigger field. Use lazy instantiating/rendering to resolve.

Rotomaul
24 Oct 2008, 3:50 PM
Silly me... I had "deferredRender:false" in the TabPanel where the grid resides. Changed it to true and it worked. Live and learn...

Thanks jsakalos.

thameema
6 Nov 2008, 8:09 PM
Here is the small addition to right align the search bar. Some people may require the search should be in Top Toolbar and right aligned and thats missing from the original plugin.

Change the following lines in GridSearch.js



Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
// defaults
searchText:'Search'
,searchTipText:'Type a text to search and press Enter'
,position:'bottom'
,iconCls:'icon-magnifier'
,checkIndexes:'all'
,disableIndexes:[]
,dateFormat:undefined
,mode:'remote'
,aign:'left'
,xtype:'gridsearch'
,paramNames: {
fields:'fields'
,query:'query'
}


this.menu = new Ext.menu.Menu();
//right align addition
if(this.align == 'right')
tb.add({xtype: 'tbfill'});
tb.addSeparator();


You can pass align:'right' from where you call the search plugin as config parameter.

Thanks,
Thameem

viciuascuns
18 Nov 2008, 2:28 AM
please help with this.
The remote search doesn't seem to work.
I have a table called articles with aprox. 20.000 records.

Code:

<

function index() {
$this->layout = 'admin';
}
calls this:


<

<?php
if(isset($total) and isset($users)) {
echo '{"total":'.$total.', "users":'.$javascript->Object($users).'}';
} else {


?>
<form id="submitgrid"></form>

<div id="usergrid" style="width:100%;height:100%;overflow: hidden;"></div>

<?php
}
?>
<script type="text/javascript" src="/js/users.js"></script>


and this is the script file :
<

var userDS;
var userCM;
var userGrid;

Ext.BLANK_IMAGE_URL = '/js/ext/resources/images/default/s.gif';
userDS = new Ext.data.JsonStore({
url: '/article/getuserslist',
root: 'users',
id: 'id',
totalProperty: 'total',
fields: ['id','nrcrt','cnp','nume','strada','nr','bloc','scara','ap','pensie','sector','inspector','data','reprezentant','cazsocial','faracupon']
})
userDS.load({params:{start:0, limit:50}});

userCM = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
header: 'ID',
hidden: true,
width: 20,
sortable: true,
dataIndex: 'id'
},
{
header: 'crt',
hidden: true,
width: 50,
sortable: true,
dataIndex: 'nrcrt',
},
{
header: 'CNP',
hidden: false,
width: 80,
sortable: true,
dataIndex: 'cnp',
},
{
header: 'Nume',
hidden: false,
width: 80,
sortable: true,
dataIndex: 'nume',
},
{
header: 'Strada',
hidden: false,
width: 90,
sortable: true,
dataIndex: 'strada',
},
{
header: 'Nr',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'nr',
},
{
header: 'Bl',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'bloc',
},
{
header: 'Sc',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'scara',
},
{
header: 'Sector',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'sector',
},
{
header: 'Inspector',
hidden: false,
width: 120,
sortable: true,
dataIndex: 'inspector',
},
{
header: 'Data',
hidden: false,
width: 50,
sortable: true,
dataIndex: 'data',
editor: new Ext.grid.GridEditor(
new Ext.form.DateField(
{
allowBlank: false,
format: 'd/m/Y'
}
)
)
},
{
header: 'Reprezentant',
hidden: false,
width: 100,
sortable: true,
dataIndex: 'reprezentant',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: true
}
)
)
},
{
header: 'soc',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'cazsocial',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
)
},
{
header: '-cupon',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'faracupon',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
)
},
]
);



userGrid = new Ext.grid.EditorGridPanel(
{
renderTo: 'usergrid',
ds: userDS,
cm: userCM,
autoSizeColumns: true,
stripeRows: true,
loadMask: true,
layout:'fit',
height:500,
region: 'center',
trackMouseOver: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
viewConfig: {forceFit:true},
plugins: [new Ext.ux.grid.Search({
searchText: 'Cauta',
mode: 'remote',
iconCls: false,
dateFormat: 'd m Y',
checkIndexes: ['cnp', 'nume', 'strada','inspector','reprezentant'],
disableIndexes:['id','nrcrt','nr','bloc','scara','ap','sector','cazsocial','faracupon']
})],

bbar: new Ext.PagingToolbar({
pageSize: 25,
store: userDS,
displayInfo: true,
displayMsg: 'Afisez persoanele {0} - {1} din {2}',
emptyMsg: 'Nu sunt persoane',
}),
}

);

userGrid.on({
afteredit: function(e) {
Ext.Ajax.request({
url: '/article/edit/'+e.record.data['id'],
method: 'POST',
params: {
'data[Article][id]': e.record.data['id'],
'data[Article][nrcrt]': e.record.data['nrcrt'],
'data[Article][cnp]': e.record.data['cnp'],
'data[Article][nume]': e.record.data['nume'],
'data[Article][strada]': e.record.data['strada'],
'data[Article][nr]': e.record.data['nr'],
'data[Article][bloc]': e.record.data['bloc'],
'data[Article][scara]': e.record.data['scara'],
'data[Article][ap]': e.record.data['ap'],
'data[Article][pensie]': e.record.data['pensie'],
'data[Article][sector]': e.record.data['sector'],
'data[Article][inspector]': e.record.data['inspector'],
'data[Article][reprezentant]': e.record.data['reprezentant'],
'data[Article][cazsocial]': e.record.data['cazsocial'],
'data[Article][faracupon]': e.record.data['faracupon']
},
success:function() {
userDS.load({params:{start:0, limit:50}});
},
failure: function() {
Ext.Msg.alert('Status','Informatia nu a fost salvata.');
}

});
}
});

userGrid.render();



function get getuserslist
<

function getuserslist() {
if(!empty($_POST['limit'])){
$limit = $_POST['limit'];
}
else {
$limit = $_POST['limit'];
}

if(!empty($_POST['start'])){
$page = ($_POST['start']/$limit)+1;
}
else {
$page = 1;
}

$count = $this->Article->find('count');
$dump = $this->Article->findAll(null,'*','id ASC', $limit, $page);
$users = Set::extract($dump, '{n}.Article');
$this->set('total', $count);
$this->set('users',$users);
}



and this is the code in the edit section
<

function edit($id = null) {
$this->layout = 'Ajax';
if (!$id || empty($this->data)) {
echo '{success:false}';exit;
}
if (!empty($this->data)) {
if ($this->Article->save($this->data)) {
echo '{success:true}';exit;
} else {
echo '{success:false}';exit;
}
}

}


However the remote search function does not work. Found records are not displayed. Any ideea why ?

viciuascuns
18 Nov 2008, 4:02 AM
please help with this.
The remote search doesn't seem to work.
I have a table called articles with aprox. 20.000 records.

Code:

<

function index() {
$this->layout = 'admin';
}
calls this:


<

<?php
if(isset($total) and isset($users)) {
echo '{"total":'.$total.', "users":'.$javascript->Object($users).'}';
} else {


?>
<form id="submitgrid"></form>

<div id="usergrid" style="width:100%;height:100%;overflow: hidden;"></div>

<?php
}
?>
<script type="text/javascript" src="/js/users.js"></script>


and this is the script file :
<

var userDS;
var userCM;
var userGrid;

Ext.BLANK_IMAGE_URL = '/js/ext/resources/images/default/s.gif';
userDS = new Ext.data.JsonStore({
url: '/article/getuserslist',
root: 'users',
id: 'id',
totalProperty: 'total',
fields: ['id','nrcrt','cnp','nume','strada','nr','bloc','scara','ap','pensie','sector','inspector','data','reprezentant','cazsocial','faracupon']
})
userDS.load({params:{start:0, limit:50}});

userCM = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
header: 'ID',
hidden: true,
width: 20,
sortable: true,
dataIndex: 'id'
},
{
header: 'crt',
hidden: true,
width: 50,
sortable: true,
dataIndex: 'nrcrt',
},
{
header: 'CNP',
hidden: false,
width: 80,
sortable: true,
dataIndex: 'cnp',
},
{
header: 'Nume',
hidden: false,
width: 80,
sortable: true,
dataIndex: 'nume',
},
{
header: 'Strada',
hidden: false,
width: 90,
sortable: true,
dataIndex: 'strada',
},
{
header: 'Nr',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'nr',
},
{
header: 'Bl',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'bloc',
},
{
header: 'Sc',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'scara',
},
{
header: 'Sector',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'sector',
},
{
header: 'Inspector',
hidden: false,
width: 120,
sortable: true,
dataIndex: 'inspector',
},
{
header: 'Data',
hidden: false,
width: 50,
sortable: true,
dataIndex: 'data',
editor: new Ext.grid.GridEditor(
new Ext.form.DateField(
{
allowBlank: false,
format: 'd/m/Y'
}
)
)
},
{
header: 'Reprezentant',
hidden: false,
width: 100,
sortable: true,
dataIndex: 'reprezentant',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: true
}
)
)
},
{
header: 'soc',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'cazsocial',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
)
},
{
header: '-cupon',
hidden: false,
width: 30,
sortable: true,
dataIndex: 'faracupon',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
)
},
]
);



userGrid = new Ext.grid.EditorGridPanel(
{
renderTo: 'usergrid',
ds: userDS,
cm: userCM,
autoSizeColumns: true,
stripeRows: true,
loadMask: true,
layout:'fit',
height:500,
region: 'center',
trackMouseOver: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
viewConfig: {forceFit:true},
plugins: [new Ext.ux.grid.Search({
searchText: 'Cauta',
mode: 'remote',
iconCls: false,
dateFormat: 'd m Y',
checkIndexes: ['cnp', 'nume', 'strada','inspector','reprezentant'],
disableIndexes:['id','nrcrt','nr','bloc','scara','ap','sector','cazsocial','faracupon']
})],

bbar: new Ext.PagingToolbar({
pageSize: 25,
store: userDS,
displayInfo: true,
displayMsg: 'Afisez persoanele {0} - {1} din {2}',
emptyMsg: 'Nu sunt persoane',
}),
}

);

userGrid.on({
afteredit: function(e) {
Ext.Ajax.request({
url: '/article/edit/'+e.record.data['id'],
method: 'POST',
params: {
'data[Article][id]': e.record.data['id'],
'data[Article][nrcrt]': e.record.data['nrcrt'],
'data[Article][cnp]': e.record.data['cnp'],
'data[Article][nume]': e.record.data['nume'],
'data[Article][strada]': e.record.data['strada'],
'data[Article][nr]': e.record.data['nr'],
'data[Article][bloc]': e.record.data['bloc'],
'data[Article][scara]': e.record.data['scara'],
'data[Article][ap]': e.record.data['ap'],
'data[Article][pensie]': e.record.data['pensie'],
'data[Article][sector]': e.record.data['sector'],
'data[Article][inspector]': e.record.data['inspector'],
'data[Article][reprezentant]': e.record.data['reprezentant'],
'data[Article][cazsocial]': e.record.data['cazsocial'],
'data[Article][faracupon]': e.record.data['faracupon']
},
success:function() {
userDS.load({params:{start:0, limit:50}});
},
failure: function() {
Ext.Msg.alert('Status','Informatia nu a fost salvata.');
}

});
}
});

userGrid.render();



function get getuserslist
<

function getuserslist() {
if(!empty($_POST['limit'])){
$limit = $_POST['limit'];
}
else {
$limit = $_POST['limit'];
}

if(!empty($_POST['start'])){
$page = ($_POST['start']/$limit)+1;
}
else {
$page = 1;
}

$count = $this->Article->find('count');
$dump = $this->Article->findAll(null,'*','id ASC', $limit, $page);
$users = Set::extract($dump, '{n}.Article');
$this->set('total', $count);
$this->set('users',$users);
}



and this is the code in the edit section
<

function edit($id = null) {
$this->layout = 'Ajax';
if (!$id || empty($this->data)) {
echo '{success:false}';exit;
}
if (!empty($this->data)) {
if ($this->Article->save($this->data)) {
echo '{success:true}';exit;
} else {
echo '{success:false}';exit;
}
}

}


However the remote search function does not work. Found records are not displayed. Any ideea why ?

jsakalos
18 Nov 2008, 4:11 AM
Compare your code to the working example at http://gridsearch.extjs.eu and find the difference causing the problem.

viciuascuns
18 Nov 2008, 5:16 AM
Actually although specified (remote), it seems to perform a local search.

jsakalos
18 Nov 2008, 11:18 AM
So, further investigate your code as gridsearch is capable of remote searches.

viciuascuns
19 Nov 2008, 1:41 PM
Thanks for the tip.
I got it going.

obbakilla
20 Nov 2008, 3:00 AM
Hi,

reading through this thread i first thought, that using the cardlayout was causing the problem with "not-displaying" of the searchfield. But when i prepared my Grid to become a showcase for this forumthread, i replaced the whole viewport-stuff with a simple window (and no cardlayout and/or other stuff around). Result: The inputfield still wasn't displayed!

Yes, i use lazyrendering (grid is registered and used as xtype) and the whole style is oriented on your tutorial "Creating Big Applications". The only solution i found was to set

[...]
,renderTo:Ext.getBody()
[...]within the
the Ext.apply(this, { .... section and it works. But it seems a little bit strange to me. Is this a good solution? are there better ones?

last but not least: great plugin! Thanks for sharing this kewl stuff! =D>

mjlecomte
20 Nov 2008, 5:00 AM
....The only solution i found was to set

[...]
,renderTo:Ext.getBody()
[...]within the
the Ext.apply(this, { ....
I guess this depends on how you're implementing it. If you haven't specified it as an item of something then you would need to tell it where it should be placed somehow. I don't think you're providing enough info to say one way or another, but your question seems suited to it's own thread that you might link from this one so you don't hijack it further from it's initial purpose.

jsakalos
20 Nov 2008, 5:05 AM
A showcase would be best to see where's is the root of your problem.

Pink.ME
21 Nov 2008, 8:04 AM
Thanx, plugin is great!
Could you, please, help with using it with autogrid?
The problem described here:

http://extjs.com/forum/showthread.php?t=53251&highlight=grid+search+autogrid

jsakalos
21 Nov 2008, 8:52 AM
It should work out of the box if (your?) implementation of auto grid calls reconfigure.

Pink.ME
24 Nov 2008, 1:35 AM
Saki, thanks for your attention. If I got you right, you ment this way:


var plugin1 = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:3,
autoFocus:true,
mode:'remote'
});

var grid7 = new Ext.ux.AutoGridPanel({
title: 'search',
height: 400,
width: 500,
loadMask: false,
store: store_conlist,
bbar: paging,
deferredRender: false,
plugins: plugin1
});

So it doesn't work either. Well, it works as a plugin, but displays no fields selection. Only "Select all" checkbox. Anf when I specify ColModel like this:


var cm = new Ext.grid.ColumnModel([
{
header: "ID",
dataIndex: 'id',
width: 30,
hidden: false,
sortable: true
},{
id: 'last',
header: "Date",
sortable: true,
dataIndex: 'date',
width: 150
}]);

and attach it to the autogrid. Your plugin shows the specified in a "cm" two colomnes.

Pink.ME
24 Nov 2008, 3:44 AM
It works!!! Don't know actually why it didn't before, but now it works!!!
here is a piece of code...



var page_size = 20;
var store_conlist = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/My/3/php/contacts/contacts.php?action=6'
}),
remoteSort: true,
reader: new Ext.data.JsonReader()
});

var paging = new Ext.PagingToolbar({
store: store_conlist,
pageSize: page_size,
emptyMsg: '--'
});

var plugin1 = new Ext.ux.grid.Search({
iconCls:'icon-zoom',
minChars:3,
autoFocus:true,
mode:'remote'
});

var grid7 = new Ext.ux.AutoGridPanel({
title: 'Search',
height: 400,
width: 500,
loadMask: false,
colModel: this.cm,
store: store_conlist,
bbar: paging,
deferredRender: false,
plugins: plugin1
});

store_conlist.load({params:{action:6, start:0, limit: page_size}});

JohnnyWheels
24 Nov 2008, 9:10 AM
Jozef,

I found this question on another thread, but I am unsure if you answered it. The question was about this line: <link rel="shortcut icon" href="./images/extjs.ico">. Where is this extjs.ico file? Do I need it? I am not trying to apply your plugin to my own grid yet, just trying to see if it works on my own computer.

Thanks.

mjlecomte
24 Nov 2008, 9:47 AM
http://en.wikipedia.org/wiki/Favicon

Saki, note the two word caution in that link, FYI.


The rel attribute must contain a space-delimited list of link types, so a two-word link type would not be understood correctly by conforming web browsers. (viz. rel="shortcut icon")

jsakalos
24 Nov 2008, 9:53 AM
Jozef,

I found this question on another thread, but I am unsure if you answered it. The question was about this line: <link rel="shortcut icon" href="./images/extjs.ico">. Where is this extjs.ico file? Do I need it? I am not trying to apply your plugin to my own grid yet, just trying to see if it works on my own computer.

Thanks.
You don't need this icon for functionality; it's icon displayed on the left of url in browsers.

jsakalos
24 Nov 2008, 9:56 AM
Thanks for info MJ. I'll strip "shortcut" word in the future - not going to correct old ones though... ;)

Ajish
4 Dec 2008, 10:32 PM
hii saki

i am using ur search plugin inside Auto grid

i have a requirement like

i need to send the searchable fields from the server side . shown in below image


how sholud i go about it, is that possible

pls help me out(i hope u r clear with my question)

jsakalos
4 Dec 2008, 11:45 PM
If I remember well, there is no out-of-the-box support for this. What you could do would be to create the grid with search plugin normally, query server for fields, setup the relevant options (checkIndexes, disableIndexes, ...) and then call reconfigure method of the plugin.

Untested.

Ajish
5 Dec 2008, 12:19 AM
thanks for ur replay saki

can u show me an example how icolud do it?

jsakalos
5 Dec 2008, 3:02 AM
Sorry, I don't have enough time for that right now. Take a look at source - it is not that difficult.

jmariani
8 Dec 2008, 5:09 PM
Hi, Saki.

I'm trying to process the "fields" parameter posted to PHP.
In Firebug, I see the following:


fields ["xTypeCd","fieldValueType","description"]
limit 100
query HTML
start 0
storeCd sysXType

But when I query the "fields" parameter in PHP, I get:

[\"xTypeCd\",\"fieldValueType\",\"description\"]
if I try to json_decode this, I get empty value.

Is there something I'm missing?

Thank you in advance.

jmariani
8 Dec 2008, 5:12 PM
Hi, Saki.

I'm trying to process the "fields" parameter posted to PHP.
In Firebug, I see the following:


fields ["xTypeCd","fieldValueType","description"]
limit 100
query HTML
start 0
storeCd sysXType

But when I query the "fields" parameter in PHP, I get:

[\"xTypeCd\",\"fieldValueType\",\"description\"]
if I try to json_decode this, I get empty value.

Is there something I'm missing?

Thank you in advance.

Mmmmm. applying "stripslashes" to the "fields" parameter did the trick but, it will always work like that? I'm using UTF-8 encoding.

jsakalos
8 Dec 2008, 5:58 PM
Set magic_quotes_gpc = Off in your php.ini and restart apache.

jmariani
8 Dec 2008, 6:14 PM
Set magic_quotes_gpc = Off in your php.ini and restart apache.

Thank you very much, for your answer and for the bits of knowledge you share. I'm learning a lot from your page and your comments.

Cya.

shab
9 Dec 2008, 2:36 PM
hi got a simple problem here.

I have this datastore:


ItemDataStore = new Ext.data.Store({
id: 'ItemDataStore',
proxy: new Ext.data.HttpProxy({
url: 'item-dbquery.php',
method: 'POST'
}),
baseParams:{task: "ShowItem"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'ItemID'
},[
{name: 'ItemID', type: 'int', mapping: 'ItemID'},
{name: 'ItemCatnum', type: 'string', mapping: 'ItemCatnum'},
{name: 'ItemBrandID', type: 'int', mapping: 'ItemBrandID'},
{name: 'ItemBrand', type: 'string', mapping: 'ItemBrand'},
{name: 'ItemName', type: 'string', mapping: 'ItemName'},
{name: 'ItemPack', type: 'string', mapping: 'ItemPack'},
{name: 'ItemLastMod', type: 'string', mapping: 'ItemLastMod'},
{name: 'UserID', type: 'int', mapping: 'UserID'},
{name: 'UserNick', type: 'string', mapping: 'UserNick'}
]),
sortInfo:{field: 'ItemID', direction: "DESC"}
});
as you can see I have baseParams:{task: "ShowItem"}

when I tried to use this plugin I got these Post response from Firebug


fields ["ItemCatnum","ItemBrandID","ItemBrand","ItemName","ItemPack","ItemLastMod","UserNick"]
limit 100
query test search
start 0
task ShowItem
All went well except for the task "ShowItem".

I want to change the 'task' value to another one so i can write a separate function for my php database query.

how do I change the 'task' value?

jmariani
9 Dec 2008, 3:06 PM
ItemDataStore.baseParams.task = "AnotherValue";

?

jsakalos
9 Dec 2008, 5:49 PM
@jmariani, you're right.
@shab, do that before the request that needs changed value.

shab
10 Dec 2008, 12:57 AM
omg what a simple solution to my problem.. thanks jmariani.. I am new to this so I'm still learning the ropes.

one more thing.. I noticed my X button aint working. it aint filtering back all results nor querying the database itself.

so far this is the only code added from my grid panel.


plugins:[new Ext.ux.grid.Search({
iconCls: 'search',
disableIndexes: ['ItemID','ItemBrandID'],
position: top,
minChars: 3,
autoFocus: true,
width: 200
//,menuStyle:'radio',
})],
is there something wrong with the class itself? also does Ext.ux.grid.Search support the 'handler:' function?

is there anywat to pass the ItemDataStore.baseParams.task value within the plugin config?

italianboy
21 Dec 2008, 6:22 PM
Great Plug-in!

But I do have a little problem with it... I'm using a PagingToolbar in my Grid, and when I have some value in the search field - paging isn't working (it keeps sending 'start' parameter with the value = 0). But when I clear search field's value, paging is working again.
What I'm missing?

P.S. [Solved] The problem was in the incorrect totalProperty value after server response

jimkan
1 Jan 2009, 7:57 PM
When extjs code is in another site

And the primary site loads the extjs code in a iframe.. iframe must be used to not mess up stylesheets etc....

<Iframe xxxxxxxxxxxx>

then search textbox is not visible
Same for the RowActions plugin... pictures in cells are not visible....

christophe67
2 Jan 2009, 3:08 AM
Hello,
I donwload your grid.Search plugin and I have difficulties to use it. Please can you help me to integrate the plug in in my code thanks in advance
[HTML]<html>
<head>
<title>Paging Grid Example</title>

<script type="text/javascript" src="../js/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/icones.css" />
<link rel="stylesheet" type="text/css" href="../css/icones.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/webpage.css">
<link rel="stylesheet" type="text/css" href="../css/gridsearch.css">

<script type="text/javascript" src="../js/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all-debug.js"></script>

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

<script type="text/javascript" >

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.form.Field.prototype.msgTarget = 'side';

var ds = new Ext.data.Store({
// HttpProxy should be used here
proxy: new Ext.data.ScriptTagProxy({
url: 'paging-data-stock.php'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'n_toile'
}, [
{name: 'n_toile', mapping: 'n_toile'},
{name: 'tissus', mapping: 'tissus'},
{name: 'n_decasier', mapping: 'n_decasier'},
{name: 'client', mapping: 'client'},
{name: 'operateur', mapping: 'operateur'},
//{name: 'client', mapping: 'client'},
{name: 'longueur', mapping: 'longueur'},
{name: 'largeur', mapping: 'largeur'},
{name: 'm_carre', mapping: 'm_carre'},
{name: 'date_entree', mapping: 'date_entree', type: 'date', dateFormat: 'Y-m-d'},
{name: 'n_jour', mapping: 'n_jour'}

])

});


var pagingBar = new Ext.PagingToolbar({
pageSize: 30,
store: ds,
displayInfo: true,
displayMsg: 'Affichage des donn

mjlecomte
2 Jan 2009, 6:28 AM
...I have difficulties to use it. Please can you help me to integrate the plug in in my code thanks in advance


If you have problems, suggest you work the other way. Start with the provided working code, then modify that code to fit your needs. This way you start with something working, which you can slowly modify to your needs, and you should then know what breaks it.

jsakalos
2 Jan 2009, 9:10 AM
Agree with MJ. Make the unmodified downloaded sample working at your your server and then modify it to your needs.

smokeman
2 Jan 2009, 11:06 AM
Awesome plugin!!!!

If I've forced the menu to be a radio menu with menuStyle:'radio', I would like to take the current radio selection, and display it as the button text.

I've made my button text 'Search by:'

I see where the menu gets added,

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

could a listener be added to the button, so that onselectionchange the button text could be changed to include the current radio selection?

I've done something similar in another project, but have no idea how to approach modifying a plugin to do it.

Thanks a bunch!
smokeman

mjlecomte
2 Jan 2009, 12:03 PM
I'm not sure if you want to modify the plugin, or just work with it.

In either case, I'd think the rough implementation would be to

get a reference to the button
button.menu would be reference to the menu
add a click listener to the menu
use that event to update the button text


It might be easiest if you give the button an id:


tb.add({
id:'searchBtn',
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
});

smokeman
2 Jan 2009, 1:24 PM
so I should be able to add a listener to the button's menu, without stepping on the plugins radio listener?

also, sometimes I need a little help to get started with extjs,
would I need to Ext.getCmp, or can I Ext.get(searchBtn)?

jsakalos
2 Jan 2009, 1:26 PM
Just to illustrate points 1 and 4, navigate to http://gridsearch.extjs.eu and then type in firebug console:


Ext.getCmp('examplegrid1').getBottomToolbar().items.itemAt(12).setText('A new text');

mjlecomte
2 Jan 2009, 2:05 PM
so I should be able to add a listener to the button's menu, without stepping on the plugins radio listener?

also, sometimes I need a little help to get started with extjs,
would I need to Ext.getCmp, or can I Ext.get(searchBtn)?

If you use the code I posted above, then

var btn = Ext.getCmp('searchBtn');

It depends if you just want to go into the plugin code and update per your requirements. If you just add to the original code base then it's a little easier to code, but you have to deal with any updates made manually.

Otherwise you might just override only the id so you can get access to the button more easily.

Adding listeners are....additive. So you can add multiple "click" listeners if you wanted and they would all get called.

What you might consider doing, if you're comfortable doing it, is adding an event. So you could fire an event with the menu click, passing a reference to the button (and maybe menu and item clicked on) with that event.

If you go that route maybe there's a chance the author will add such code in his next release so then your code wouldn't break with any future updates. Adding an event is relatively harmless since each developer can choose to subscribe to it or not. Or just keep it more simple and do as previously described.

smokeman
2 Jan 2009, 2:13 PM
awesome...
just 1 more question...
if I set an id for the button(in Ext.us.grid.search.js),
can I reference it by id after the
Ext.getCmp('examplegrid1').getBottomToolbar().items.

where would I have gone in the api to find what options are available to call on after getBottomToolbar()?

like getBottomToolbar().items('searchbtn')?



I apologize for my ignorance, been using ext for a year now, and still don't know some of the basics.

<edit>I got it, through trial and error...
Ext.getCmp('searchgrid').getTopToolbar().items.item('searchbtn').setText('A new text');

but I would still like to know how to use the api more efficiently to find info like that.

smokeman
2 Jan 2009, 2:23 PM
I can't seem to determine what type of ext component the button actually is...
logic dictates it would be a splitbutton, or toolbar.splitbutton
but there appears to not be a menuitem select listener on splitbutton...

the "menu class" under menu in the API has an itemclick firing event...
is that what I use?

jsakalos
2 Jan 2009, 2:55 PM
There is one easier method of accessing the menu. Go again to the example page and type in FB console:



Ext.getCmp('examplegrid1').plugins[0].menu.on('itemclick', function() {alert('click')});

Then click an item of the menu.

smokeman
5 Jan 2009, 9:19 AM
final code if anyone is interested:

Ext.getCmp('searchgrid').getTopToolbar().items.item('searchbtn').setText('Search by:Auditee');
Ext.getCmp('searchgrid').plugins[0].menu.on('itemclick', function(item){Ext.getCmp('searchgrid').getTopToolbar().items.item('searchbtn').setText('Search by:'+item.text)});

I have to set the default text to the default field passed to the plugin, then I can change it according to their selection.

ScottLoney
5 Jan 2009, 10:00 AM
I am experiencing a problem with the ext-js GridFilters tool. I maintain a website which is multi-lingual, containing both French and English languages. Because of this, my French users periodically have special characters in their names, addresses, etc. I have added a few ext-js GridPanel charts to the site. They work great, but when I use the filter option to search on a special character like

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

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

I'm talking about this thread.

I will look into adding UTF-8, but I'm not sure whether or not I'll be able to. I'll get back to you tomorrow.

smokeman
5 Jan 2009, 5:31 PM
I'm talking about this thread.

I will look into adding UTF-8, but I'm not sure whether or not I'll be able to. I'll get back to you tomorrow.

I think you are talking about gridfilters, which is what you are using in your demo page.
This plugin adds a single text input box into the toolbar of your grid, and searches(local store, or server)depending on what you put in that text box.

ScottLoney
6 Jan 2009, 6:11 AM
You are right, I am talking about the gridfilters tool, sorry. :(

jsakalos
6 Jan 2009, 6:35 AM
Nevermind. Of course, my recommendation about UTF-8 still applies.

cmendez21
14 Jan 2009, 3:05 PM
Hi saki, long time no bothering you with some questions :D

I was testing the search cause on an app im testing i handle thousands of records about 2000 so when i search its ok but when i clear the search the filters and query params are still on the store but...

In my server side php i handle different functions according the parameters the store passes also in part cause i handle on Javascript a name for the fields and in the server side i handle another so thats what i need a special routine for each call a little bit complex for the logic but i made this for security reasons

so i made this change in the onTriggerClear and worked fine


,onTriggerClear:function() {
if(this.field.getValue()) {
//mod ---------------------------------
this.field.setValue('');
this.field.focus();
delete this.grid.store.baseParams.query
delete this.grid.store.baseParams.fields
delete this.grid.store.lastOptions.params.fields
delete this.grid.store.lastOptions.params.query
this.grid.store.reload();
//---------------------------------
// Original Code
//this.field.setValue('');
//this.field.focus();
//this.onTriggerSearch();
}
}

Everything Just went smooth again but more than request this is a tip , but i wanted your opinion also :) or do you suggest another approach, i'll aprecciate your comments..!

thanks

jsakalos
14 Jan 2009, 4:55 PM
If it works for you, it is good for you. Nevertheless, I handle thousands of records with unmodified code. It looks like overcomplicating a problem.

Bing Qiao
28 Jan 2009, 8:30 AM
ExtJS ver 2.01

I suspect this is caused by Ext.KeyMap. After selecting columns (e.g., uncheck select all, then check it again), click directly in the search input field then do a search then enter, nothing happens. Click the cross button, nothing happens.

The event handler this.onTriggerSearch in Ext.ux.grid.Search is not called.

This doesn't happen on Firefox.

I tried replacing this.field.el with Ext.get(document) in the following code from Ext.ux.grid.Search.js:
...
this.field.el.on({scope:this, buffer:300, keyup:this.onKeyUp});
...
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 }]);

Then, the problem is gone.

But this obviously is not an ideal solution.

I understand this is not a problem of gridsearch itself. But with the context of having encountered the issue when using GridSearch, I figure it's better to ask for the help here.

Any help will be appreciated, thanks very much!

jsakalos
28 Jan 2009, 8:34 AM
I have no experiences with IEs. Do you have any other idea than to listen on document? Or somebody else?

Alex84
6 Feb 2009, 6:47 AM
The button to clear the searchfield and to reload the grid doesn't works for me. Hit ESC works fine.

jsakalos
6 Feb 2009, 10:51 AM
Works fine at http://gridsearch.extjs.eu

andy_ghg
6 Feb 2009, 8:53 PM
But i can not open your demo url......:((

jsakalos
6 Feb 2009, 11:22 PM
Which demo? 'Cause link I've posted works fine. Might have been a temporary problem.

Alex84
7 Feb 2009, 2:37 AM
I tooked the source from this website, Saki. The onTriggerClear event don't call onclick on the x button. But on hit the ESC key the event is called.

jsakalos
7 Feb 2009, 2:55 AM
I don't get it. There is no onTriggerClear event - it is private event handler. Generally, if the demo on my site works but your implementation doesn't then there must be some difference - you just need to find it.

andy_ghg
7 Feb 2009, 10:40 AM
Ha~!Use Google Browser open your site....
This demo very good~!
Studied~!
Thank your demo,
Your demo gave me inspiration~!:D

medley
9 Feb 2009, 6:53 AM
Hello,

I was testing my application with Extjs 2.2.1.
But now, I have a strange behaviour with the gridsearch plug-in.
The checkboxes are not on the right but in the middle of the menu (see attachment)

With Firefox, it is ok. The problem only appears with IE 7 and Extjs 2.2.1.
With IE7 and Extjs 2.2.0, It is ok.

Medley

jsakalos
9 Feb 2009, 6:56 AM
It was bug in core Ext, not in this plugin, has been discussed on forums and it is already fixed in svn. AFAIR, it was sth with css.

medley
9 Feb 2009, 6:59 AM
Thank you. I wasn't sure about the origin of the problem.

Medley

medley
9 Feb 2009, 7:21 AM
I didn't find the posts in the forum about that.

Medley.

jsakalos
9 Feb 2009, 7:56 AM
I've read some on misaligning images, icons in menu on IE a couple of days ago. Try again.

medley
9 Feb 2009, 8:35 AM
Ok, I found.

It was here : http://extjs.com/forum/showthread.php?t=55752

If somebodyelse asks the same question.

Medley

jsakalos
9 Feb 2009, 8:41 AM
Yes, I've meant that. So it works now, doesn't it?

medley
9 Feb 2009, 8:48 AM
Yes, It works well.
As you wrote it, it was a problem of css.

Medley

smokeman
9 Feb 2009, 1:59 PM
I don't get it. There is no onTriggerClear event - it is private event handler. Generally, if the demo on my site works but your implementation doesn't then there must be some difference - you just need to find it.

@saki
He meant the onTriggerClear function inside Ext.ux.grid.Search.js

I had this problem also....
but I don't remember what I did to fix it.
I just compared my version to saki's latest(has a publish date of 2009-2-6), and there are differences.
I'd grab the latest, and try again.
check your ,onTrigger1Click:
make sure it is "this.onTriggerClear.createDelegate(this)", which is what the ESC keymap points to.

jsakalos
9 Feb 2009, 2:04 PM
I had this problem also....I need to know what problem to fix it, if any. Steps to reproduce? Is it browser dependent? The best is to post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase).

Alex84
10 Feb 2009, 8:59 AM
Just for information. I've downloaded the code from
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

Line: 207

,onTrigger1Click:this.minChars ? Ext.emptyFn : this.onTriggerClear.createDelegate(this) With this source I have problems with the X Button.

Taking this code:
http://gridsearch.extjs.eu/source.php?file=js/Ext.ux.grid.Search.js

works.

Line: 232

,onTrigger1Click:this.onTriggerClear.createDelegate(this)

Problemdescription: Searchfield don't clear after click on X Button, but clear on ESC
XButton

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

,fn:this.onTriggerClear

I uses Firefox 3.0.6

jsakalos
10 Feb 2009, 9:03 AM
Hmmm, looks like packaged file is bad... I'll take a look. Thank you for the info.

jsakalos
10 Feb 2009, 9:05 AM
BTW, It's always best to get files w/o version number, they are latest devel with most bugs fixed. Maybe I'll even remove them from the site.

Alex84
10 Feb 2009, 9:10 AM
Anyway, great plugin I like your extensions!!!

smokeman
10 Feb 2009, 1:42 PM
sorry I didn't remember...
I looked at his latest code, saw it matched mine on that line, and thought I was smokin rocks!

That is indeed what I did. I figured the minchars had nothing to do with clearing the field, so dumped the first part of that line.

smokeman
10 Feb 2009, 1:44 PM
Anyway, great plugin I like your extensions!!!

yes, I'm using quite a few of your extensions as well!

jsakalos
10 Feb 2009, 1:59 PM
@Alex84 and/or @smokeman,

what's the status now? Still a problem with the devel version (w/o number suffix from my site)?

Alex84
11 Feb 2009, 12:33 AM
My x button clears now the field after comparing the Ext.ux.grid.Search.js from the zip archive 1.1 with the source 1.1.1 from http://gridsearch.extjs.eu/source.php?file=js/Ext.ux.grid.Search.js. The Ext.ux.grid.Search.js in the archive is the problem one.
Don't know what you mean with "w/o suffix from the website" :-/

jsakalos
11 Feb 2009, 12:36 AM
Without numbers after name. E.g. gridsearch.zip is newest, gridsearch-1.1.1.zip is the old one.

Alex84
11 Feb 2009, 12:42 AM
Ahhhh. I must scroll down the page to see the Develop Archive's :) I just oversaw this, sorry.
The developer Archive works for me too.

makiavelli
13 Feb 2009, 3:55 AM
Hi!
I am new in Ext. I've trying to use this plugin. But I have such error:
"Error: tb is undefined
Source: http://mysite/js/ext.ux.grid.search.js (http://new.d-ms.com.ua/js/ext.ux.grid.search.js)
Row: 168
"
Plz, can you tell me why I recieve this error?

jsakalos
13 Feb 2009, 4:09 AM
You don't give enough information to say anything.

Alex84
13 Feb 2009, 4:18 AM
Hi!
I am new in Ext. I've trying to use this plugin. But I have such error:
"Error: tb is undefined
Source: http://mysite/js/ext.ux.grid.search.js (http://new.d-ms.com.ua/js/ext.ux.grid.search.js)
Row: 168
"
Plz, can you tell me why I recieve this error?

Maybe you have no toolbar or paging bar in your grid. You must post the code from your grid.

mjlecomte
13 Feb 2009, 5:04 AM
Hi!
I am new in Ext. I've trying to use this plugin. But I have such error:
"Error: tb is undefined
Source: http://mysite/js/ext.ux.grid.search.js (http://new.d-ms.com.ua/js/ext.ux.grid.search.js)
Row: 168
"
Plz, can you tell me why I recieve this error?

Smells like an IE error. Suggest you use firefox/firebug.

LutzAlbers
13 Feb 2009, 5:34 AM
Since updating Ext from version 2.2 to 2.2.1 I have a weird rendering error on the "Search Fields" popup menu using IE6 on WinXP (Firefox and IE7 on Vista are ok).
See the attached screenshot for detail.

I've tried both the latest stable version (1.1) and the devel. version of gridsearch, but the symptoms are the same.

Any ideas ?

jsakalos
13 Feb 2009, 5:36 AM
It is bug in Ext, either grab the latest svn or search forums, there is a fix around.

LutzAlbers
16 Feb 2009, 12:24 AM
It is bug in Ext, either grab the latest svn or search forums, there is a fix around.

Could you please give me a pointer what bug to search for ? I've not found anything relevant yet and I don't have svn access (wouldn't be possible at work anyway).

jsakalos
16 Feb 2009, 1:31 AM
I haven't bookmarked the thread bu I think that even in this thread was a post on it already. Otherwise, search Bugs forum.

LutzAlbers
16 Feb 2009, 4:46 AM
Ok, I found the thread (and the solution): http://extjs.com/forum/showthread.php?p=266251#post266251

Thanks for you support (and your plugins, they are very helpful in developing Ext applications).

randomuser01
19 Feb 2009, 8:51 AM
Is there a way to disable column selection altogether? I'd prefer the plugin to just display "Search" as a label instead of a menu.

Thanks

jsakalos
19 Feb 2009, 12:36 PM
No it is not configurable w/o modifying the code.

wki01
20 Feb 2009, 3:07 AM
Hello Saki
I use grid.search to make fulltext searches on a database.
I do not need the menu and I would like to remove it.
How could I do?

thanks

jsakalos
20 Feb 2009, 3:23 AM
I'm not quite sure that the plugin is the good solution if you use fulltext search. One textbox sending its value to the server for fulltext search would do I guess. The design basis of this plugin has been selective searching in individual fields.

BitPoet
20 Feb 2009, 3:31 AM
Is there a way to disable column selection altogether? I'd prefer the plugin to just display "Search" as a label instead of a menu.


I'm not sure if this is exactly what you're looking for, but I've toyed with jsakalos' GridSearch plugin and stripped it down to work without column selection (though only filtering locally).



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

/**
* @class Ext.ux.grid.SimpleSearch
* @extends Ext.util.Observable
* @param {Object} config configuration object
* @constructor
*/
Ext.ux.grid.SimpleSearch = function(config) {
Ext.apply(this, config);
Ext.ux.grid.SimpleSearch.superclass.constructor.call(this);
}; // eo constructor

Ext.extend(Ext.ux.grid.SimpleSearch, Ext.util.Observable, {
/**
* cfg {Boolean} autoFocus true to try to focus the input field on each store load (defaults to undefined)
*/

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

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

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

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

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

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

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

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

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

/**
* @cfg {String} activeClass CSS class to apply on text field when search is active
*/
,activeClass:undefined

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

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

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

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

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

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

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

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

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

,tbButton:undefined

// {{{
/**
* 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
// }}}
// {{{
/**
* private add plugin controls to <b>existing</b> toolbar and calls reconfigure
*/
,onRender:function() {
var panel = this.toolbarContainer || this.grid;
var tb = 'bottom' === this.position ? panel.bottomToolbar : panel.topToolbar;

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

// add menu button
this.tbButton = new Ext.Toolbar.Button({
text:this.searchText
,iconCls:this.iconCls
});
tb.add(this.tbButton);

// add input field (TwinTriggerField in fact)
this.field = new Ext.form.TriggerField({
width:this.width
,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
,triggerClass:'x-form-clear-trigger'
,onTriggerClick: this.onTriggerClear.createDelegate(this)
,minLength:this.minLength
});

// 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
// }}}
// {{{
/**
* field el keypup event handler. Triggers the search
* @private
*/
,onKeyUp:function() {
var length = this.field.getValue().toString().length;
if(0 === length || this.minChars <= length) {
this.onTriggerSearch();
}
} // eo function onKeyUp
// }}}
// {{{
/**
* private Clear Trigger click handler
*/
,onTriggerClear:function() {
if(this.field.getValue()) {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch();
}
} // eo function onTriggerClear
// }}}
// {{{
/**
* private Search Trigger click handler (executes the search, local or remote)
*/
,onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = this.grid.store;

// grid's store filter
store.clearFilter();
if(val) {
if( this.activeClass ) {
this.field.addClass(this.activeClass);
}
store.filterBy(function(r) {
var retval = false;
if( Ext.isArray(this.checkIndexes) ) {
Ext.each(this.checkIndexes, function(item) {
var res = false;
var rv = r.get(item);
if( rv )
{
rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(val, 'gi');
res = re.test(rv);
if( res ) {
retval = true;
}
if( rv.indexOf(val) > -1 ) {
retval = true;
}
}
}, this);
} else {
r.fields.each(function(fld) {
var res = false;
var rv = r.get(fld);
rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(fld).dateFormat) : rv;
var re = new RegExp(val, 'gi');
res = re.test(rv);
if( res ) {
retval = true;
}
if( rv.indexOf(val) > -1 ) {
retval = true;
}
}, this);
}
return retval;
}, this);
} else {
if( this.activeClass ) {
this.field.removeClass(this.activeClass);
}
}

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

} // eo function reconfigure
// }}}

}); // eo extend

// eof
The only addition I made was for highlighting of the search field when a search was active by adding the "activeClass" property which applies the given css class. Example:


.x-search-active {
background:#fff url(/path/to/text-bg-active-search.png) repeat-x 0 0 !important;
}
The image replaces the normal TextField background with a coloured one (I've attached it).

wki01
20 Feb 2009, 3:45 AM
I'm not sure if this is exactly what you're looking for, but I've toyed with jsakalos' GridSearch plugin and stripped it down to work without column selection (though only filtering locally).
.


Yes exactly what you're looking for.
But I hoped there was a configuration parameter for this

How can I do to implement it?

Thanks

jsakalos
20 Feb 2009, 3:48 AM
If you really don't need columns than even "stripping down" this plugin is overkill. Just create one TextField (or TriggerField) in a toolbar, write a little handling of keyup and/or Enter key, add text to params in store beforeload event and you're done.

If you need it more than once then write the plugin from scratch. Sure you can use ideas and/or code from my Search plugin but the best approach would be "I'm writing from scratch", not "I'm stripping down the original".

randomuser01
20 Feb 2009, 11:15 AM
Thanks Saki. I took a shortcut instead of defining a config param for it.



// edited: using this textItem instead of a menu
var searchItem = new Ext.menu.TextItem({
text: this.searchText,
style: 'padding-left: 5px; padding-right: 5px; color: #ffffff; font-weight: bold;'
});

tb.add({
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
,hidden:true // edited: using a label instead, but need the menu so search doesn't break
},
searchItem // edited: hide menu and display static text instead
);



Is there a way to disable column selection altogether? I'd prefer the plugin to just display "Search" as a label instead of a menu.

Thanks

jsakalos
20 Feb 2009, 11:20 AM
I still think that it calls for a different, simpler plugin.

dawesi
1 Mar 2009, 4:19 PM
Hey Saki, great tool...

When the list of columns included makes the menu greater in height than the current container, the search menu item becomes hidden (ie goes below the bottom status bar).

Any chance this could scroll or split into a second column.

mjlecomte
1 Mar 2009, 4:29 PM
That should hopefully resolve itself with Ext 3, I believe the overflow feature kicks in to prevent that problem. Otherwise, there's a ux around to kick long menus into multiple columns.

jsakalos
1 Mar 2009, 4:44 PM
@dawesi, I've never had grids with that many columns so I've never been in a need to solve it. It is problem of Ext.menu.Menu in fact, I have no idea if someone has written a ux for that, if you find anything let me know - I'll try to integrate it.

michael.pedrotti
5 Mar 2009, 5:39 AM
Hi all,

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

Enjoy.


http://gridsearch.extjs.eu


Hi, I tried to use the plugin Ext.ux.grid.Search in local mode, but the button to clean the Textfield does not work. Can you help?


<script language="javascript" type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="extjs/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="extjs/plugins/Ext.ux.grid.Search.js"></script>
var grid = new Ext.grid.GridPanel
(
{
title:'Ext.ux.grid.Search.01.htm',
renderTo:document.body,
width:700,
height:400,
style:'margin:30px auto',
store:new Ext.data.SimpleStore
(
{
fields:
[
{name:'company', type:'string'},
{name:'price', type:'float'},
{name:'change', type:'float'}
],
data:
[
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['Altria Group Inc', 83.81, 0.28],
['American Express Company', 52.55, 0.01],
['American International Group, Inc.', 64.13, 0.31],
['AT&T Inc.', 31.61, -0.48],
['Boeing Co.', 75.43, 0.53],
['Caterpillar Inc.', 67.27, 0.92],
['Citigroup, Inc.', 49.37, 0.02],
['E.I. du Pont de Nemours and Company', 40.48, 0.51]
]
}
),
columns:
[
{
header:'Company',
dataIndex:'company',
width:160
},
{
header:'Price',
dataIndex:'price',
width:40
},
{
header:'Change',
dataIndex:'change',
width:40
}
],
plugins:
[
new Ext.ux.grid.Search
(
{
mode:'local',
iconCls:'icon-zoom',
minChars:2,
autoFocus:true
}
)
],
bbar:[],
viewConfig:
{
forceFit:true
}
}
);Thanks!

jsakalos
5 Mar 2009, 9:18 AM
I cannot reproduce it, it just works for me regardless of mode.

dmcclean
9 Mar 2009, 6:35 AM
I have the same problem with the clear button. I downloaded the code a few days
ago, everything else works great. Not sure what is happening with the clear button.

jsakalos
9 Mar 2009, 7:58 AM
I could look into it but "doesn't work" and "same problem as doesn't work" are not enough to know where to look. What exactly does it mean? Search field doesn't clear? Store filter doesn't clear? Any Firebug errors? A complete showcase per http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase ?

dmcclean
10 Mar 2009, 9:31 AM
I believe my problem with the clear button was I used the version of the plugin with the 1.1 tar zip release of the example code. I did not realize that there is a newer 1.1.1 version of the plugin (looks like a Feb 2009 update). When I used that, the problem went away.

jsakalos
10 Mar 2009, 9:37 AM
Use file w/o any numerical suffix; it contains latest code with least bugs hopefuly... ;)

peteryjk
13 Mar 2009, 12:46 AM
is it possible to search a defined string when the grid is loaded?

jsakalos
13 Mar 2009, 3:24 AM
Automatically? Probably yes, I've never tried it.

peteryjk
13 Mar 2009, 8:54 AM
yes, it can do it automatically after i try and try. :)
anyways, thanks for awesome plugin

jsakalos
13 Mar 2009, 9:54 AM
I'd go in the direction of setting search field value an calling onTriggerSearch method...

jsundquist
17 Mar 2009, 8:25 AM
Saki,
Great extension you created. However I am wondering if it might be possible to make it so there are multiple search fields linked to specific fields? I am still pretty new to ExtJS and have been searching all day to see if it is possible and the only place I found someone doing what I am looking for was using 1.1 which would not work for me as I am using 2.x. Any help or advice on a solution would be much appreciated.

Thank you for your time.
Jon

jsakalos
17 Mar 2009, 8:32 AM
I don't know what exactly you mean. If this: http://extjs.com/forum/showthread.php?t=6662 then go ahead, I'll be one of the first users.

jsundquist
17 Mar 2009, 8:35 AM
I don't know what exactly you mean. If this: http://extjs.com/forum/showthread.php?t=6662 then go ahead, I'll be one of the first users.
Actually the page that I am trying to use as a mock up is at http://www.sk-typo3.de/ExtJS-Filter-Grid.345.0.html. That site however is using 1.1. I am looking to place three search able fields at the top of my grid in a tbar to search the data that I am sending via a json query.

jsakalos
17 Mar 2009, 8:37 AM
What's question then? This plugin is exactly for that. http://gridsearch.extjs.eu

jsundquist
17 Mar 2009, 8:39 AM
The question is, instead of just having a single search field like you do in your example. Is it possible to have multiple search fields linked to specific columns in my grid?

jsakalos
17 Mar 2009, 8:52 AM
Are you sure that there is "single search field" at http://gridsearch.extjs.eu?

ALL are selected by default.

jsundquist
17 Mar 2009, 8:59 AM
Looking at the example you have posted you have a single search field. Yes you do have a drop down to select which fields you want to search but I am looking to have three fields that have specific columns that they are searching, not multiple columns like your example. I have attached an example of what I am looking to be able to do.

jsakalos
17 Mar 2009, 9:02 AM
The answer is no then. This plugin is not suitable for you.

jsundquist
17 Mar 2009, 9:04 AM
Is there such a plug-in to your knowledge? Yours is the closest that I have come unfortunately the specs call for there fields instead of a single field.

jsakalos
17 Mar 2009, 9:07 AM
There is GridFilter plugin but it uses different approach, nothing else AFAIK.

jsundquist
17 Mar 2009, 9:10 AM
Thank you very much for your time and assistance Saki. I will continue to scour the internet in search of my answer then.

mjlecomte
17 Mar 2009, 9:41 AM
Thank you very much for your time and assistance Saki. I will continue to scour the internet in search of my answer then.

I doubt you'll ever find the perfect match. Your request is more of a specific usage than an extension as far as I can tell. Looks like you just create a form with a button, quite similar to that Ext1 link posted above, just change the layout a little bit.

Learn how to make it yourself, it shouldn't be that difficult.

mjmonserrat
18 Mar 2009, 4:28 AM
Hi guys, before I install the search plugins (discussed in this forum), I uses filters in my grid's columns. (refer on attached file). But after I installed the search plugins, the filter doesn't work anymore, is there any way to use this plug ins without removing the filters on my grid's columns? Thanks in advance.

jsakalos
18 Mar 2009, 4:33 AM
I have never tried, maybe these two plugins are not compatible. Anyway, what would be the reason to have both? It may confuse users very much.

Be you, I'd choose one, but not both.

mjmonserrat
18 Mar 2009, 4:43 AM
OK, thanks :), nice plug ins dude.

mjlecomte
18 Mar 2009, 7:11 AM
I have never tried, maybe these two plugins are not compatible. Anyway, what would be the reason to have both? It may confuse users very much.

Be you, I'd choose one, but not both.

I've used both without issue.

jsakalos
18 Mar 2009, 7:15 AM
Thanks MJ, good to know.

dubito
18 Mar 2009, 1:04 PM
Hello,

I am not a web developer, but have need to do some web development. That said, I have a basic ExtJS GridPanel and I'm wondering if there is a guide on getting a barebones example like mine up and running. I've tried looking at the included gridsearch.js and gridsearch.html, but they seem very complex to me. Here is my GridPanel...


var grid = new Ext.grid.GridPanel({
store: automountDataStore,
columns:[
{id: 'dn', header: "DN", dataIndex: 'dn'},
{header: "Key", dataIndex: 'key'},
{header: "Value", dataIndex: 'info'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: "Title",
iconCls: 'icon-grid'
});I added the Ext.ux.grid.Search.js after ext-all-debug.js. I get an invalid property error when I add the code for the search plugin and the grid fails to load. Can anyone help me out with a barebones implementation I can build from?

jsakalos
18 Mar 2009, 1:14 PM
You need to add bbar:[] to your grid config and plugins:[new Ext.ux.grid.Search({... some config ...})]

jsakalos
18 Mar 2009, 1:17 PM
Here is docs for "... some config ...": http://extjs.eu/docs/?class=Ext.ux.grid.Search

dubito
18 Mar 2009, 2:09 PM
Here is docs for "... some config ...": http://extjs.eu/docs/?class=Ext.ux.grid.Search

Thanks for taking the time to respond. I found a helpful entry in this thread too, which I missed (hey, its a big thread) ... #428 (https://extjs.com/forum/showthread.php?p=298468#post298468).

Thanks!

Great plugin by the way!

mjlecomte
18 Mar 2009, 2:34 PM
Thanks for taking the time to respond. I found a helpful entry in this thread too, which I missed (hey, its a big thread) ... #428 (https://extjs.com/forum/showthread.php?p=298468#post298468).

Thanks!

Great plugin by the way!

Have you been to the wiki? There are a few tutorials for grids in there. There is also a Blog entry for ExtJS books that are available.

cking
24 Mar 2009, 8:53 AM
I have a simple yet possibly silly question. Has anyone hooked this plugin up with the state handler before? I'm about to make an attempt just never dealt with the state handler within plugins. My issue is the user will click on an item from a filtered list which redirects them to another page, when they click the back button they would like the list to be filtered still. I already have the state handler functioning so it is simply a matter of setting and loading the correct state information.

feo
25 Mar 2009, 9:02 AM
Hi, there seems to be a width-problem with the TwinTriggerField if the trigger2Class is x-hidden, wich adds a empty space after the field. I suggest to replace


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



// add input field (TwinTriggerField in fact)

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

which also removes some overhead by the TwinTriggerField, because minChars is usually != 0

jsakalos
25 Mar 2009, 9:28 AM
To get rid of that unwanted space replace css class x-hidden with x-hide-display. I'm replacing it also in the source. I want to keep the code as simple as possible so I'm not including the whole if ... else ... block

Relleum
25 Mar 2009, 11:24 AM
I have a simple yet possibly silly question. Has anyone hooked this plugin up with the state handler before? I'm about to make an attempt just never dealt with the state handler within plugins. My issue is the user will click on an item from a filtered list which redirects them to another page, when they click the back button they would like the list to be filtered still. I already have the state handler functioning so it is simply a matter of setting and loading the correct state information.

I have the same question. I want to save the last search configuration so that the user sees their previous search results when returning to the grid.

franklt69
27 Mar 2009, 1:03 PM
Hi Saki I am trying the plug in and I di it:


var searchtb = new Ext.ux.grid.Search({
iconCls:'search'
,readonlyIndexes:['note']
,disableIndexes:['pctChange']
,minChars:3
,autoFocus:true
// ,menuStyle:'radio'
})

var grid = new Ext.grid.GridPanel({
store: storeShape,
cm: cm,
width:300,
autoHeight: true,
height:700,
tbar:searchtb,


},

plugins:[searchtb],
viewConfig: {
forceFit:true

}
// clicksToEdit:1,


});

and I get this error:

I am missing something?

regards
Frank


this.topToolbar.render is not a function
http://localhost:3552/80/Lib/Ext3/ext-all.js
Line 9

this.topToolbar.render is not a function
DomHelper()(Object dom=div#ext-gen279.x-panel-body id=ext-gen279, null)ext-all.js (line 9)
DomHelper()(Object dom=div#ext-gen279.x-panel-body id=ext-gen279, null)ext-all.js (line 9)
apply()()ext-base.js (line 9)
DomHelper()(Object dom=div#ext-gen279.x-panel-body id=ext-gen279, undefined)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(Object initialConfig=Object store=Object width=300, 0, Object dom=div#ext-gen279.x-panel-body id=ext-gen279)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object id=details-panel region=center, Object dom=div#ext-gen279.x-panel-body id=ext-gen279)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object id=details-panel region=center, Object dom=div#ext-gen279.x-panel-body id=ext-gen279)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object id=details-panel region=center, Object dom=div#ext-gen279.x-panel-body id=ext-gen279)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(288, -16)ext-all.js (line 9)
DomHelper()(Object x=0 y=0 width=288 height=-16)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object layout=Object events=Object, Object dom=div#ext-gen277.x-panel-body id=ext-gen277)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(290, 286)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object layout=Object events=Object, Object width=290 height=286)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object layout=Object, Object dom=div#ext-gen51.x-panel-body id=ext-gen51)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(290, 311)ext-all.js (line 9)
DomHelper()(Object width=295 height=311 x=977 y=35)ext-all.js (line 9)
DomHelper()(Object initialConfig=Object layout=Object, Object dom=body#ext-gen10.ext-gecko id=ext-gen10)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(undefined)ext-all.js (line 9)
DomHelper()()ext-all.js (line 9)
DomHelper()(Object layout=border title=Ext Layout Browser items=[4])ext-all.js (line 9)
apply()()ext-base.js (line 9)
apply()()ext-base.js (line 9)
apply()()ext-base.js (line 9)
(?)()()layout-b...owser2.js (line 1702)
DomHelper()()ext-all.js (line 9)
[Break on this error] Ext.DomHelper=function(){var n=null;var ...(Ext.History,new Ext.util.Observable());

jsakalos
27 Mar 2009, 1:08 PM
Ext.ux.grid.Search is plugin, not toolbar. Just set tbar:[] (maybe also position:'top')

http://extjs.eu/docs/?class=Ext.ux.grid.Search&member=position

franklt69
30 Mar 2009, 6:57 AM
Saki work in this way:


var searchtb = new Ext.ux.grid.Search({
iconCls:'search'
,readonlyIndexes:['note']
,disableIndexes:['pctChange']
,minChars:3
,position:'top'
,mode: 'local'
,autoFocus:true
// ,menuStyle:'radio'
})

var grid = new Ext.grid.GridPanel({
store: storeShape,
cm: cm,
width:300,
autoHeight: true,
height:700,
tbar:[],


},

plugins:[searchtb],
viewConfig: {
forceFit:true

}
// clicksToEdit:1,


});

I don't have to define it in the toolbar, now some doubt:,

1- why the clear button don't work? I mean I set some filter local and it is done, then I want to remove clicking the button X and don't remove the filter in local mode.

regards
Frank

jsakalos
30 Mar 2009, 7:20 AM
Download the latest "development" version from the site http://gridsearch.extjs.eu

franklt69
30 Mar 2009, 8:28 AM
Saki only change latest "development" version, the same code and now I get this error:



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

Ext.ux.grid.Search is not a constructor
gridShapes2.js()()gridShapes2.js (line 246)
[Break on this error] ,autoFocus:true


regards
Frank

jsakalos
30 Mar 2009, 8:42 AM
Do you include the correct file?

franklt69
30 Mar 2009, 10:09 AM
Saki to work the developer version I have to include Ext.ux.util.js in the other version I don't need to include it.

Now is working ok.

regards
Frank

franklt69
1 Apr 2009, 11:55 AM
Saki a quick question, using local mode, when the search is execute how I can setup the first record in the grid appear selected?

regards
Frank

jsakalos
1 Apr 2009, 12:38 PM
Maybe you could create a sequence function for onTriggerSearch method. Another option would be to listen to store's "datachanged" event that should fire after filtering.

ivan.kristianto
6 Apr 2009, 10:55 PM
Hi Saki,
great plugin!!
But i have a problem, i tried to look into your code ext-ux-grid-search.js especially for remote mode.
I'm fetching my data from server using RPC, and i couldn't get the data with your code. Do you have any idea how to do that? Because i can't change your code because everytime i compiled the ext-ux-grid-search.js file back to default.
Thanks in advance.

Note: i'm using gwt-ext 2.0.6 with gwt-ext-ux 0.4 and in server i'm using Grails as a services.

Regards,

Ivan
http://ivankristianto.com

jsakalos
7 Apr 2009, 1:40 AM
I'm not getting it fully. Is it a server-side question or GWT question?

ivan.kristianto
7 Apr 2009, 4:05 AM
it's GWT question.
i'm fetching my data using GWT-RPC and it's running smoothly.
but when i try to search it returned blank or no data.
and my grid will show blank data.
how could i get my data remotely with your code?

link: http://groups.google.com/group/gwt-ext/browse_thread/thread/74738b250d374f11?pli=1
i think i have similiar problem as link show above.

jsakalos
7 Apr 2009, 4:21 AM
Well, I don't use GWT so I have no clue. Try to ask in a GWT forum.

juicymedia
7 Apr 2009, 5:36 AM
Hi,

First, thanks for another great plugin!

Now my problem...

Is there any way to stop it auto-submitting the search query on every keypress when in remote mode? ie I just want the user to type their query and press return (or click the button) to perform the search.

thanks.

jsakalos
7 Apr 2009, 5:41 AM
http://extjs.eu/docs/?class=Ext.ux.grid.Search&member=minChars

juicymedia
7 Apr 2009, 7:32 AM
Thanks. Can't believe I didn't spot that!

ivan.kristianto
7 Apr 2009, 9:55 PM
Hi Saki.
Probably i can simplified my question.
How can i fetch data remotely with RPC using your grid search plugin?
Thanks.

Kind Regards
Ivan

jsakalos
7 Apr 2009, 10:58 PM
What is RPC? The mechanism is very simple. Search plugin uses http POST to deliver a couple of variables to server (use Firebug to see names and values of them) and server responds with filtered rows. The response can be seen in Firebug too.

If RPC is this: http://en.wikipedia.org/wiki/Remote_procedure_call then I'm not aware of any possibility as Grid and Search plugin run in browser so they cannot do anything else than browser can do.

SchattenMann
9 Apr 2009, 7:17 AM
i've notice that if i create a tab panel with 2 tabs, both with a grid ho use the search plugin, only the first tab shows the input field. the 2nd tab have the input field but with width=0px.

whoever if i open only one and create a button to open the second, everything works great. weird O.o

any idea why?is just me?

PS: check here (http://extjs.com/forum/showthread.php?t=65152)for SS.

jsakalos
9 Apr 2009, 10:17 AM
You must be rendering into a hidden container. I've tried to add search plugin to this example: http://examples.extjs.eu/?ex=dyntab and it shows everywhere.

Note: I've tested it only locally - it's not on the above web site.

catalina
9 Apr 2009, 11:01 AM
How do i get the "query" and "fields" values from a Ext.ux.grid.Search plugin control (during javascript runtime)?

For example how du I make an alertbox showing those current values, without having to post to the server?

jsakalos
9 Apr 2009, 5:19 PM
Repost please your question in the original thread - I've stumbled upon this message only by chance.

thatcoder
10 Apr 2009, 1:37 PM
If i have multiple top toolbars, and I intend on targetting a specific toolbar at the top of the grid, how would i go about doing that?

thanks.

jsakalos
10 Apr 2009, 2:55 PM
http://extjs.eu/docs/?class=Ext.ux.grid.Search&member=position

thatcoder
10 Apr 2009, 3:04 PM
Saki, Thanks.

However, both the search textbox get rendered at the same time the grid gets rendered. Shortly after the additional toolbars are rendered to the tbar. Is there a way to tell the searchhbox to re-render?

jsakalos
10 Apr 2009, 3:29 PM
You should never need to tell Ext to render or re-render something as long as your setup is correct. It is sometimes needed to call doLayout() (after adding items to containers).

thatcoder
10 Apr 2009, 3:37 PM
Please see my attachment for my concern. The tbar closest to the grid is the one i would want the search textbox rendered to. currently it is rendered to the topmost one.. which is actually my grid's tbar... the 2nd and 3rd tbars were rendered as the grid was rendered.

Catch my drift now?

jsakalos
10 Apr 2009, 3:52 PM
Ah, so.

This is decision logic:


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

// ...


You could maybe cheat search plugin so that it thinks that panel.topToolbar is that one what you want.

thatcoder
10 Apr 2009, 3:54 PM
Yeah, that's what i've been sort of toying with for the last hour, but no dice yet. Especially since they seem to get rendered simultaneously. If I could delay the render a bit, it might pick up the very last toolbar. Not sure.

thatcoder
11 Apr 2009, 9:06 PM
Saki,

I have multiple search Filters in the toolbars of multiple grids within a tab layout.

Only the searchMenu renders on subsequent tabs. The initial loaded active tab shows both the search menu and the search field. Have you seen this b4?

SchattenMann
12 Apr 2009, 12:38 AM
Saki,

I have multiple search Filters in the toolbars of multiple grids within a tab layout.

Only the searchMenu renders on subsequent tabs. The initial loaded active tab shows both the search menu and the search field. Have you seen this b4?

yes that's exactly what happens to me...i haven't got the time to tried yet but it seems to be related to the fact that the Tab is not rendered on the moment...maybe if add a listener to the Tab onRender or onFocus ho doLayout to the search plugin works...ill try it latter and post the result.

jsakalos
12 Apr 2009, 4:53 PM
I use Search plugin many times in the exactly same setup: multiple different grids each having its search plugin. Never had any problem with rendering or anything else whatsoever.

dawesi
12 Apr 2009, 4:58 PM
no problems here either.

thatcoder
12 Apr 2009, 5:03 PM
Please post the underlying properties of the tabpanel parent.. and then the items. perhaps i am doing something odd in my configuration that is screwing with the display.

thanks.

jsakalos
12 Apr 2009, 5:17 PM
Very simple:


var tp = new Ext.TabPanel({
deferredRender:true
,layoutOnTabChange:true
,activeTab:0
,items:[{
title:'Grid 1'
,xtype:'grid1'
,plugins:[new Ext.ux.grid.Search()]
},{
title:'Grid 2'
,xtype:'grid2'
,plugins:[new Ext.ux.grid.Search()]
}]
});
Note: Extending to register grid1 and grid2 xtype is not the must. I can also be done by passing the full config object.

SchattenMann
13 Apr 2009, 12:51 AM
set

deferredRender:false

and you will have your problem...

now i'll have to find another way...cuz i really do need


deferredRender:falseone question:

cant i use this:




var search = new Ext.ux.grid.Search()

var tp = new Ext.TabPanel({
deferredRender:true
,layoutOnTabChange:true
,activeTab:0
,items:[{
title:'Grid 1'
,xtype:'grid1'
,plugins:[search]
},{
title:'Grid 2'
,xtype:'grid2'
,plugins:[search]
}]
});



cuz every time i do this with a plugin i get an error...i thought i can re-use the same plugin but it seems not...why?

jsakalos
13 Apr 2009, 3:55 AM
If you use deferredRender:false on tab panel, also use hideMode:'offsets' on all tabs.

SchattenMann
13 Apr 2009, 4:01 AM
donned but nothing changed...