PDA

View Full Version : Live Search Grid Panel, hide or remove tbar items



joaquingt
2 Aug 2012, 1:13 PM
Hi, im looking for a way to hide the Regular Expresion and Case sensitive combo boxes from a Live search grid panel, been searching on forums and didnt find anything, please give me a hint, thx

joaquingt
3 Aug 2012, 6:52 AM
i had to duplicate LiveSearchGridPanel.js to LiveSearchGridPanelNoCombos.js and comment the part of the comboboxes there and the name of the ext.define to the new one, is there a better way to do it ? thx



/**
* @class Ext.ux.LiveSearchGridPanel
* @extends Ext.grid.Panel
* <p>A GridPanel class with live search support.</p>
* @author Nicolas Ferrero
*/
Ext.define('Ext.ux.LiveSearchGridPanelNoCombos', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.toolbar.TextItem',
'Ext.form.field.Checkbox',
'Ext.form.field.Text',
'Ext.ux.statusbar.StatusBar'
],

/**
* @private
* search value initialization
*/
searchValue: null,

/**
* @private
* The row indexes where matching strings are found. (used by previous and next buttons)
*/
indexes: [],

/**
* @private
* The row index of the first search, it could change if next or previous buttons are used.
*/
currentIndex: null,

/**
* @private
* The generated regular expression used for searching.
*/
searchRegExp: null,

/**
* @private
* Case sensitive mode.
*/
caseSensitive: false,

/**
* @private
* Regular expression mode.
*/
regExpMode: false,

/**
* @cfg {String} matchCls
* The matched string css classe.
*/
matchCls: 'x-livesearch-match',

defaultStatusText: 'Nothing Found',

// Component initialization override: adds the top and bottom toolbars and setup headers renderer.
initComponent: function() {
var me = this;
me.tbar = ['Buscar:',{
xtype: 'textfield',
name: 'searchField',
hideLabel: true,
width: 200,
listeners: {
change: {
fn: me.onTextFieldChange,
scope: this,
buffer: 100
}
}
}, {
xtype: 'button',
text: '&lt;',
tooltip: 'Encontrar Fila Anterior',
handler: me.onPreviousClick,
scope: me
},{
xtype: 'button',
text: '&gt;',
tooltip: 'Encontrar Siguiente Fila',
handler: me.onNextClick,
scope: me
}/*, '-', {
xtype: 'checkbox',
hideLabel: true,
margin: '0 0 0 4px',
handler: me.regExpToggle,
scope: me
}, 'Expresion regular', {
xtype: 'checkbox',
hideLabel: true,
margin: '0 0 0 4px',
handler: me.caseSensitiveToggle,
scope: me
}, 'Sensitivo a Mayusculas/Minusculas'*/ ];

me.bbar = Ext.create('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]');
},
// detects html tag
tagsRe: /<[^>]*>/gm,

// DEL ASCII code
tagsProtect: '\x0f',

// detects regexp reserved word
regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,

/**
* 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;
},

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

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

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

/**
* Switch to case sensitive mode.
* @private
*/
caseSensitiveToggle: function(checkbox, checked) {
this.caseSensitive = checked;
this.onTextFieldChange();
},

/**
* Switch to regular expression mode
* @private
*/
regExpToggle: function(checkbox, checked) {
this.regExpMode = checked;
this.onTextFieldChange();
}
});

vicmarguz
28 Mar 2013, 3:17 PM
The best way to do that is to override the initcomponent.

Ext.override(Ext.ux.LiveSearchGridPanel, {
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: '<',
tooltip: 'Find Previous Row',
handler: me.onPreviousClick,
scope: me
},{
xtype: 'button',
text: '>',
tooltip: 'Find Next Row',
handler: me.onNextClick,
scope: me
}];

me.bbar = Ext.create('Ext.ux.StatusBar', {
defaultText: me.defaultStatusText,
name: 'searchStatusBar'
});

me.callParent(arguments);
}
});