Display Search Toolbar when ExtJS Grid Panel is in focus (LiveSearchGridPanel) - extjs

Question

I want to display a Search Toolbar whenever the grid is in focus. After reading the API, I found listener focusleave. This does the job but it does not allow you to click on the toolbar once it is shown. You can enter into the toolbars input field, but clicking the toolbar triggers focusleave. Interestingly, if you set draggable it behaves correctly, but drags. Listening for hide is possible, also, but does not give any additional functionality. See below.
extend: 'Ext.grid.Panel',
requires: [
'Ext.toolbar.TextItem',
'Ext.form.field.Checkbox',
'Ext.form.field.Text',
'Ext.ux.statusbar.StatusBar'
],
matchCls: 'x-livesearch-match',
defaultStatusText: 'No Results Found',
initComponent: function() {
var me = this;
me.tbar = Ext.create('Ext.toolbar.Toolbar', {
name: 'searchBar',
listeners: {
click: {
element: 'el',
fn: function() {
console.log('Toolbar element was clicked!');
}
}
},
items: [
{
xtype: 'tbtext',
html: 'Search'
},
{
xtype: 'textfield',
name: 'searchField',
hideLabel: true,
width: 200,
listeners: {
change: {
fn: me.onTextFieldChange,
scope: this,
buffer: 500
},
}
}
]
})
me.bbar = new Ext.ux.StatusBar({
defaultText: me.defaultStatusText,
name: 'searchStatusBar'
});
me.callParent(arguments);
},
// afterRender override: it adds textfield and statusbar reference and start monitoring
// keydown events in textfield input
afterRender: function() {
var me = this;
me.callParent(arguments);
me.textField = me.down('textfield[name=searchField]');
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.view.on('cellkeydown', me.focusTextField, me);
me.statusBar.hide();
me.searchBar.hide();
this.showingSearchBar = false;
},
displaySearchBar: function () {
var me = this;
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.statusBar.show();
me.searchBar.show();
},
hideSearchBar: function () {
var me = this;
me.statusBar = me.down('statusbar[name=searchStatusBar]');
me.searchBar = me.down('toolbar[name=searchBar]');
me.statusBar.hide();
me.searchBar.hide();
},
});
Ext.onReady(function() {
var myData, store;
Ext.QuickTips.init();
// sample static data for the store
myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
// create the data store
store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
],
data: myData
});
// create the Grid, see Ext.
Ext.create('Ext.ux.LiveSearchGridPanel', {
store: store,
columnLines: true,
columns: [
{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'company'
},
{
text: 'Price',
width: 75,
sortable: true,
formatter: 'usMoney',
dataIndex: 'price'
},
{
text: 'Change',
width: 86,
sortable: true,
dataIndex: 'change'
},
{
text: '% Change',
width: 110,
sortable: true,
dataIndex: 'pctChange'
},
{
text: 'Last Updated',
width: 126,
sortable: true,
formatter: 'date',
dataIndex: 'lastChange'
}
],
listeners: {
cellcontextmenu : function () {
console.log('this')
},
select: function () {
console.log('focused')
this.displaySearchBar();
},
focusleave: function (object, e, eOpts) {
console.log('blur')
this.hideSearchBar();
}
},
height: 375,
width: Ext.themeName === 'neptune-touch' || Ext.themeName === 'crisp' ? 700 : 670,
title: 'Live Search Grid',
renderTo: 'grid-{id}',
viewConfig: {
stripeRows: true,
focusEl: 'grid-{id}',
},
});
});
Here, you can see, if the toolbar is shown the console.log for the click is never fired. By commenting out this.hideSearchBar(); it then fires.
Bonus points: I tried to use another method for displaying the search bar and tried CMD+F (key 70). See below.
console.log('key down', td)
if (e.getKey() == 70) {
if (this.showingSearchBar == false) {
this.displaySearchBar();
this.showingSearchBar = true;
} else {
this.hideSearchBar();
this.showingSearchBar = false;
}
}
}
This works, but the UI fails again because pressing CMD+F causes the focus to be lost. Hence, the next CMD+F doesn't trigger. A simple re-focus of the cell should fire the event however after running .focus() on all the parameters nothing worked.
If anybody could point me in the right direction that would be great.
Edit: 2 problems 1) how to not blur when a grid panel is selected and 2) how to retrieve the focused element based on click