PDA

View Full Version : How To Search NotesView w/ Custom Search Field



waldav00
4 Mar 2008, 6:44 PM
Hi,

I have an Ext.nd.UIView being rendered to an Ext.grid.GridPanel. I also have a custom search field and search button. Is there some way through a javascript function called from my button that I can perform a search in my view and have the results displayed into the same Ext.grid.GridPanel?

Thanks very much,
David

RWaters
4 Mar 2008, 9:10 PM
The search button is pretty straight forward, and you definitely should be able to recreate it outside of the toolbar if need be. I'll try to break it down real quick.



// private
createSearch: function(toolbar) {
var srchId = 'xnd-vw-search-'+Ext.id();
toolbar.add('-',{
xtype: 'textfield',
blankText: "Search view...",
name: "xnd-vw-search",
id: srchId,
width: 100,
listeners: {
'specialkey': this.handleViewSearchKey,
scope: this
}
},{
xtype: 'button',
text: "Search",
scope: this,
handler: this.handleViewSearch
},'-');
this.searchField = Ext.getCmp(srchId);
},

Utilizes Toolbar.add to create a field and a button inside the toolbar, these could be easily rendered elsewhere on the page. The key parts are the specialkey listener (used to catch the enter key in the search box) and the button handler.


// private:
handleViewSearchKey: function(field, e) {
e.preventDefault();
if (e.getKey() == Ext.EventObject.ENTER) {
this.handleViewSearch();
}
},

Very simply checks to see if the specialkey was the enter key, if so it calls the same search handler the button uses


// private
handleViewSearch: function() {
var qry = this.searchField.getValue();
var tb = (this.searchInPagingToolbar && this.paging)?this.paging:this.toolbar;

if (!this.isSearching) {
this.oldDataSource = this.grid.getStore(); // Save the current DS so we can restore it when search is cleared

// define the Domino viewEntry record
var viewEntry = Ext.data.Record.create(this.dominoView.recordConfig);

// create reader that reads viewEntry records
var viewEntryReader = new Ext.nd.data.DominoViewXmlReader(this.dominoView.meta, viewEntry);

var ds = new Ext.nd.data.DominoViewStore({
proxy: new Ext.data.HttpProxy({
url: Ext.nd.extndUrl+'SearchView?OpenAgent',
method: "GET"
}),
baseParams: {db: "/"+Ext.nd.Session.currentDatabase.filePath, vw: this.viewName },
reader: viewEntryReader,
remoteSort: false
});

this.grid.reconfigure(ds, this.grid.getColumnModel());
if (this.paging) {
this.paging.unbind(this.oldDataSource);
this.paging.bind(ds);
}
this.isSearching = true; // Set this so we don't create the search datastore multiple times
this.clearSearchButton = tb.addButton({text: "Clear Results", scope: this, handler: this.handleClearSearch});
}
this.grid.getStore().load({params:{query: qry, count: this.searchCount, start: 1}});
},

Here's where most of the work happens, in order to implement a domino-like 'clear results' button it has to store a reference to the old datastore object. This may or may not apply depending on if you want that functionality. It defines a new DominoXmlReader and passes it into a new DominoViewStore, you should be able to use the same SearchView agent that is provided. Once you have the Store created you can call 'reconfigure' on the grid and pass it the new data store and a new column model (we pass in the same column model that was originally used). Then you also have to swap out the datastore for the paging toolbar with unbind/bind. Lastly you need to load the newly created datastore.


// private
handleClearSearch: function() {
if (this.isSearching) {
if (this.paging) {
this.paging.unbind(this.grid.getStore());
this.paging.bind(this.oldDataSource);
}
this.grid.reconfigure(this.oldDataSource, this.grid.getColumnModel());
this.grid.getStore().load({params:{start:1}});
this.isSearching = false;
this.searchField.reset();
this.clearSearchButton.destroy();
}
},

This is just the handler for the clear search button that reverts the gridpanel and toolbar back to the original datastore, and reloads it's data.

It will certainly be something that will involve a bit of work, but you should also be able to modify this code slightly to make it function outside of the UIView class.

waldav00
4 Mar 2008, 9:52 PM
I am trying to implement this one line at a time. I am getting an error of:

'length' is null or not an object

on the following line of code:

var viewEntry = Ext.data.Record.create(this.view1.recordConfig);


(Note: view1 is the variable defined for my Ext.nd.UIView object.)

RWaters
5 Mar 2008, 6:41 AM
Since the functions I posted were part of UIView, anytime 'this' is referenced it is the UIView object. You'll probably need to do something like.


var viewEntry = Ext.data.Record.create(view1.dominoView.recordConfig);

waldav00
5 Mar 2008, 7:33 AM
Great - thanks for your help. This makes a lot more sense to me now. So, I have created a function that my button calls to perform the search. There are no more errors but I get no search results. Can you explain how the search works? Is the search performed on all document fields, only certain fields, how do I know?

Thanks again.