效果显示：
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ux/'); Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.tip.QuickTipManager', 'Ext.ux.LiveSearchGridPanel' ]); Ext.onReady(function() { Ext.QuickTips.init(); // sample static data for the store var 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'] ]; /** * Custom function used for column renderer * @param {Object} val */ function change(val){ if(val > 0){ return '<span style="color:green;">' + val + '</span>'; }else if(val < 0){ return '<span style="color:red;">' + val + '</span>'; } return val; } /** * Custom function used for column renderer * @param {Object} val */ function pctChange(val){ if(val > 0){ return '<span style="color:green;">' + val + '%</span>'; }else if(val < 0){ return '<span style="color:red;">' + val + '%</span>'; } return val; } // create the data store var 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, renderer : 'usMoney', dataIndex: 'price' }, { text : 'Change', width : 75, sortable : true, dataIndex: 'change', renderer: change }, { text : '% Change', width : 75, sortable : true, dataIndex: 'pctChange', renderer: pctChange }, { xtype : 'datecolumn', text : 'Last Updated', width : 85, sortable : true, dataIndex: 'lastChange' } ], height: 350, width: 600, title: 'Live Search Grid', renderTo: 'grid-example', viewConfig: { stripeRows: true } }); });/**核心组件： * 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' ], /** * @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 = ['查询',{ xtype: 'textfield', name: 'searchField', hideLabel: true, width: 80, 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 }, '-', { xtype: 'checkbox', hideLabel: true, margin: '0 0 0 4px', handler: me.regExpToggle, scope: me }, ' 选择',{ xtype: 'combo', hideLabel: true, width:50, text: '查询', store : ['Foo', 'Bar', 'Bar'] }, '日期', { // fieldLabel: '日期', xtype : 'datefield', width: 50, name : 'date', anchor : '10%' }, '多选框',{ // fieldLabel: 'Checkboxes', xtype: 'checkboxgroup', width:100, columns: [100,100], items: [ {boxLabel: '苹果', checked: true,id:'winFooChk',inputId:'winFooChkInput'}, {boxLabel: '香蕉'} ] }, '单选框', { xtype: 'radiogroup', columns: [100,100], width:100, // fieldLabel: '单选框', items: [ {boxLabel: '男生', checked: true, name: 'radiogrp2'}, {boxLabel: '女生', name: 'radiogrp2'} ] }, ' ',{ xtype: 'button', hideLabel: true, margin: '0 0 0 4px', text: '开始查询', scope: me } ]; 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(); } });效果显示：
