Overriding the specialkey function for view toolbar

[wcdulanyjr]

Prior to integrating Ext.ND into our application, we created several "DHTML" views for dealing with categorized views on the web. We don't have time to use the grid and so we added a Ext toolbar for creating forms and other actions. Folks wanted the Search this View option, so I added a new textfield and button to capture the search string and launch a results page



// add a text field to the toolbar
tb.addSpacer();
tb.addSeparator();
tb.addSpacer();
var searchBox = new Ext.form.TextField({
fieldLabel:'Search this View ',
xtype:'TextField',
id: 'txtSrchVw'
});
tb.addField(searchBox);
tb.add({
cls: 'x-btn-text-icon bmenu',
text: 'Search This View',
icon: '../icons/page_white_find.png',
handler: function() {<Computed Value> ' + Ext.getCmp("txtSrchVw").getRawValue() +'<Computed Value>}
});


For those interested, here is the value of the two ComputedText elements in the handler function:



db := @WebDbName;
view:=@ReplaceSubstring(@Subset(@ViewTitle;1);" " :"\\";"+" : "/");
"window.open('/" + db + "/" + view + "?SearchView&Query="


and



"&Start=1&Count=20&SearchOrder=1&SearchWV=TRUE&SearchFuzzy=FALSE&SearchMax=50', '_blank')"


Anyhow, this worked great until somebody decides to hit the enter/return key instead of the button we provided. When they do that it opens a new window with an address that looks like this:

http://hostdomain/app.nsf/AIByStatus?txtSrchVw=testing&FormTitle=Activities...%5Cby+Status&catcount=2&ViewName=AIByStatus&TimeOut=1000&SearchURL=%2Fapp.nsf%2FActivities...%5Cby%2BStatus%2F%24SearchForm%3FSearchView

So I lurked through the API and the forums and figured out that I need to add a listener and ended up with the following:



// add a text field to the toolbar
tb.addSpacer();
tb.addSeparator();
tb.addSpacer();
var searchBox = new Ext.form.TextField({
allowBlank:false,
emptyText:'Search this View...',
xtype:'TextField',
id: 'txtSrchVw',
listeners: {
specialkey: {
fn: function(field, e) {
if(e.getKey() == e.ENTER){
tbSearchView();
}
}
}
}
});
tb.addField(searchBox);
tb.add({
cls: 'x-btn-text-icon bmenu',
text: 'Search This View',
icon: '../icons/page_white_find.png',
handler: function() {tbSearchView()}
});

function tbSearchView() {
var v = Ext.getCmp("txtSrchVw").getRawValue();
if(v.length < 1){
Ext.Msg.alert('Empty Search', 'Search requires alphanumeric value.');
return;
}
<Computed Value> ' + Ext.getCmp("txtSrchVw").getRawValue() +'<Computed Value>
}


Now when someone clicks the enter/return key a new window opens with the correct search results. However, another browser window opens with the same error message and wacky URL Address. Now I think what is going on is that the Ext.ND is loading another specialkey event that still acting on the clicking the enter/return key.

Is there a specific change we can make to override this functionality without breaking a future release when we start using the grid with multiple categories?

[Zakaroonikov]

Now when someone clicks the enter/return key a new window opens with the correct search results. However, another browser window opens with the same error message and wacky URL Address. Now I think what is going on is that the Ext.ND is loading another specialkey event that still acting on the clicking the enter/return key.

Is there a specific change we can make to override this functionality without breaking a future release when we start using the grid with multiple categories?

In your event handler could you not do a:



e.stopEvent();


before your:



tbSearchView();


This should prevent extND's handler from kicking off

[wcdulanyjr]

That did it! Thank you so very much. It seems almost too simple now. Probably why I was beating my head over it.

Thanks again!

[Zakaroonikov]

That did it! Thank you so very much. It seems almost too simple now. Probably why I was beating my head over it.

Thanks again!

No problem!