<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-LiveSearchGridPanel'>/**
|
</span> * A GridPanel class with live search support.
|
* @author Nicolas Ferrero
|
*/
|
Ext.define('Ext.ux.LiveSearchGridPanel', {
|
extend: 'Ext.grid.Panel',
|
requires: [
|
'Ext.toolbar.TextItem',
|
'Ext.form.field.Checkbox',
|
'Ext.form.field.Text',
|
'Ext.ux.statusbar.StatusBar'
|
],
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-searchValue'> /**
|
</span> * @private
|
* search value initialization
|
*/
|
searchValue: null,
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-indexes'> /**
|
</span> * @private
|
* The row indexes where matching strings are found. (used by previous and next buttons)
|
*/
|
indexes: [],
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-currentIndex'> /**
|
</span> * @private
|
* The row index of the first search, it could change if next or previous buttons are used.
|
*/
|
currentIndex: null,
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-searchRegExp'> /**
|
</span> * @private
|
* The generated regular expression used for searching.
|
*/
|
searchRegExp: null,
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-caseSensitive'> /**
|
</span> * @private
|
* Case sensitive mode.
|
*/
|
caseSensitive: false,
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-regExpMode'> /**
|
</span> * @private
|
* Regular expression mode.
|
*/
|
regExpMode: false,
|
|
<span id='Ext-ux-LiveSearchGridPanel-cfg-matchCls'> /**
|
</span> * @cfg {String} matchCls
|
* The matched string css classe.
|
*/
|
matchCls: 'x-livesearch-match',
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-defaultStatusText'> defaultStatusText: 'Nothing Found',
|
</span>
|
<span id='Ext-ux-LiveSearchGridPanel-method-initComponent'> // Component initialization override: adds the top and bottom toolbars and setup headers renderer.
|
</span> initComponent: function() {
|
var me = this;
|
me.tbar = ['Search',{
|
xtype: 'textfield',
|
name: 'searchField',
|
hideLabel: true,
|
width: 200,
|
listeners: {
|
change: {
|
fn: me.onTextFieldChange,
|
scope: this,
|
buffer: 100
|
}
|
}
|
}, {
|
xtype: 'button',
|
text: '&lt;',
|
tooltip: 'Find Previous Row',
|
handler: me.onPreviousClick,
|
scope: me
|
},{
|
xtype: 'button',
|
text: '&gt;',
|
tooltip: 'Find Next Row',
|
handler: me.onNextClick,
|
scope: me
|
}, '-', {
|
xtype: 'checkbox',
|
hideLabel: true,
|
margin: '0 0 0 4px',
|
handler: me.regExpToggle,
|
scope: me
|
}, 'Regular expression', {
|
xtype: 'checkbox',
|
hideLabel: true,
|
margin: '0 0 0 4px',
|
handler: me.caseSensitiveToggle,
|
scope: me
|
}, 'Case sensitive'];
|
|
me.bbar = Ext.create('Ext.ux.StatusBar', {
|
defaultText: me.defaultStatusText,
|
name: 'searchStatusBar'
|
});
|
|
me.callParent(arguments);
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-afterRender'> // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input
|
</span> afterRender: function() {
|
var me = this;
|
me.callParent(arguments);
|
me.textField = me.down('textfield[name=searchField]');
|
me.statusBar = me.down('statusbar[name=searchStatusBar]');
|
},
|
<span id='Ext-ux-LiveSearchGridPanel-property-tagsRe'> // detects html tag
|
</span> tagsRe: /<[^>]*>/gm,
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-tagsProtect'> // DEL ASCII code
|
</span> tagsProtect: '\x0f',
|
|
<span id='Ext-ux-LiveSearchGridPanel-property-regExpProtect'> // detects regexp reserved word
|
</span> regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-getSearchValue'> /**
|
</span> * In normal mode it returns the value with protected regexp characters.
|
* In regular expression mode it returns the raw value except if the regexp is invalid.
|
* @return {String} The value to process or null if the textfield value is blank or invalid.
|
* @private
|
*/
|
getSearchValue: function() {
|
var me = this,
|
value = me.textField.getValue();
|
|
if (value === '') {
|
return null;
|
}
|
if (!me.regExpMode) {
|
value = value.replace(me.regExpProtect, function(m) {
|
return '\\' + m;
|
});
|
} else {
|
try {
|
new RegExp(value);
|
} catch (error) {
|
me.statusBar.setStatus({
|
text: error.message,
|
iconCls: 'x-status-error'
|
});
|
return null;
|
}
|
// this is stupid
|
if (value === '^' || value === '$') {
|
return null;
|
}
|
}
|
|
return value;
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-onTextFieldChange'> /**
|
</span> * Finds all strings that matches the searched value in each grid cells.
|
* @private
|
*/
|
onTextFieldChange: function() {
|
var me = this,
|
count = 0;
|
|
me.view.refresh();
|
// reset the statusbar
|
me.statusBar.setStatus({
|
text: me.defaultStatusText,
|
iconCls: ''
|
});
|
|
me.searchValue = me.getSearchValue();
|
me.indexes = [];
|
me.currentIndex = null;
|
|
if (me.searchValue !== null) {
|
me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));
|
|
|
me.store.each(function(record, idx) {
|
var td = Ext.fly(me.view.getNode(idx)).down('td'),
|
cell, matches, cellHTML;
|
while(td) {
|
cell = td.down('.x-grid-cell-inner');
|
matches = cell.dom.innerHTML.match(me.tagsRe);
|
cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);
|
|
// populate indexes array, set currentIndex, and replace wrap matched string in a span
|
cellHTML = cellHTML.replace(me.searchRegExp, function(m) {
|
count += 1;
|
if (Ext.Array.indexOf(me.indexes, idx) === -1) {
|
me.indexes.push(idx);
|
}
|
if (me.currentIndex === null) {
|
me.currentIndex = idx;
|
}
|
return '<span class="' + me.matchCls + '">' + m + '</span>';
|
});
|
// restore protected tags
|
Ext.each(matches, function(match) {
|
cellHTML = cellHTML.replace(me.tagsProtect, match);
|
});
|
// update cell html
|
cell.dom.innerHTML = cellHTML;
|
td = td.next();
|
}
|
}, me);
|
|
// results found
|
if (me.currentIndex !== null) {
|
me.getSelectionModel().select(me.currentIndex);
|
me.statusBar.setStatus({
|
text: count + ' matche(s) found.',
|
iconCls: 'x-status-valid'
|
});
|
}
|
}
|
|
// no results found
|
if (me.currentIndex === null) {
|
me.getSelectionModel().deselectAll();
|
}
|
|
// force textfield focus
|
me.textField.focus();
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-onPreviousClick'> /**
|
</span> * Selects the previous row containing a match.
|
* @private
|
*/
|
onPreviousClick: function() {
|
var me = this,
|
idx;
|
|
if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
|
me.currentIndex = me.indexes[idx - 1] || me.indexes[me.indexes.length - 1];
|
me.getSelectionModel().select(me.currentIndex);
|
}
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-onNextClick'> /**
|
</span> * Selects the next row containing a match.
|
* @private
|
*/
|
onNextClick: function() {
|
var me = this,
|
idx;
|
|
if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
|
me.currentIndex = me.indexes[idx + 1] || me.indexes[0];
|
me.getSelectionModel().select(me.currentIndex);
|
}
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-caseSensitiveToggle'> /**
|
</span> * Switch to case sensitive mode.
|
* @private
|
*/
|
caseSensitiveToggle: function(checkbox, checked) {
|
this.caseSensitive = checked;
|
this.onTextFieldChange();
|
},
|
|
<span id='Ext-ux-LiveSearchGridPanel-method-regExpToggle'> /**
|
</span> * Switch to regular expression mode
|
* @private
|
*/
|
regExpToggle: function(checkbox, checked) {
|
this.regExpMode = checked;
|
this.onTextFieldChange();
|
}
|
});</pre>
|
</body>
|
</html>
|
