ExtJs4(三)――带搜索和操作按钮的表 _JavaScript

ExtJs4(3)――带搜索和操作按钮的表

带搜索和操作按钮的表（这里的问题是，下面由两条框框，不知怎么去掉，浪费不少空间也影响了美观。）

点击：

修改按钮：将弹出此窗口

详细按钮：与修改按钮相同，但保存按钮为不可能状态（即不能保存，只能查看）

新增按钮：与修改按钮相同，但里面没有数据

带搜索功能的表格已经在前文写过，在此便不再赘述。本文的要点是如何为表格添加对应的弹出窗口。

弹出窗口一般由两部分组成，一部分是外面的Window，另外一部分则是嵌入在Window里的与Grid的Columns想对应的内容

一般来说可以这样写：

ModifyWin = Ext.extend(Ext.util.Observable,{
     alertWin : null,		/* 弹出窗口 */
     alertPanel : null,		/* 弹出Panel */
     field : null,   		/* 放置弹出窗口内使用的变量 */

     constructor:function() {
	this.alertPanel = new MyFormPanel; //MyFormPanel是与表格Columns对应的Panel
	this.alertWin = Ext.create('Ext.window.Window', {
	    //别的一些属性
	    items: this.alertPanel
        }
     }
});

这样，便可以用一个变量modifyWin= New ModifyWin来产生一个实例作为缓存，而不需要每次弹出窗口时重新初始化一个窗口。

全部代码：

pageVar.js

var pageVar={};
//--------------------------弹出窗口的设置-----------------------------
pageVar.SRC_LOC_Y = 5;		//Panel中item项的起始点的x
pageVar.SRC_LOC_X = 5;		//Panel中item项的起始点的y
pageVar.EACH_DIST_Y = 30;	//上下两个Item之间的距离
pageVar.FIELD_WIDTH = 60;	//item项的默认长度
pageVar.vWidth=210;         //标签的整体宽度
pageVar.vFieldW=210;        //标签空白内容的宽度
pageVar.LABEL_WIDTH = 70;	//item项的标签的默认宽度
pageVar.vOneLineWidth = 2 * pageVar.vWidth;                 //一行只放置一个标签时，标签的长度
pageVar.vPanelW = pageVar.vOneLineWidth + 65;


//--------------------与grid相关的参数设置--------------------

pageVar.gridTitle = 'sysLogPanel';               //表的标题

pageVar.ajaxRequestUrl = 'grid.json'               //连接ajax的url

pageVar.modelName = 'sysLog';

pageVar.rootName = 'sysLog';

pageVar.gridStoreUrl = 'sysLog.json';   //表的Store的url

//其中数字1代表有效，0代表无效
pageVar.bButtons = [ 0, 1, 0, 0 ];              //bButtons[0]为添加按钮，bButtons[1]为修改，bButtons[2]为查询，bButtons[3]为删除;

//gird的columns
pageVar.columns = [  
      {text:'日志ID', width:100, dataIndex:'SYSLOG_ID', hidden: true},
      {text:'日志类型', width:100, dataIndex:'SYSLOG_TYPE', hidden: false},
      {text:'日志描述', width:100, dataIndex:'SYSLOG_DESC', hidden: false},
      {text:'日志类别', width:100, dataIndex:'SYSLOG_KIND', hidden: false},
      {text:'日志来源', width:100, dataIndex:'SYSLOG_SOURCE', hidden: false},
      {text:'创建时间', width:100, dataIndex:'SYSLOG_CREATETIME', hidden: false},
      {text:'日志级别', width:100, dataIndex:'SYSLOG_LEV', hidden: false},
      {text:'IP地址', width:100, dataIndex:'SYSLOG_IP', hidden: false},
      {text:'菜单编码', width:100, dataIndex:'SYSMENU_CODE', hidden: false},
      {text:'用户表信息ID', width:100, dataIndex:'SYSUSER_ID', hidden: true}
   ];

//grid中Store的模型
Ext.define(pageVar.modelName,{ 
   extend: 'Ext.data.Model', 
   fields: [ 
       'SYSLOG_ID',   //日志ID
       'SYSLOG_TYPE',   //日志类型
       'SYSLOG_DESC',   //日志描述
       'SYSLOG_KIND',   //日志类别
       'SYSLOG_SOURCE',   //日志来源
       'SYSLOG_CREATETIME',   //创建时间
       'SYSLOG_LEV',   //日志级别
       'SYSLOG_IP',   //IP地址
       'SYSMENU_CODE',   //菜单编码
       'SYSUSER_ID'   //用户表信息ID
   ]
});

//--------------------------开始函数-----------------------------
function initPage(){ 
   initLocalExt();
   new ShowGrid();
}

alertPanelGrid.js:

//用来修改和添加的菜单
Ext.define('MyFormPanel', {
 extend : 'Ext.form.Panel',
	layout: 'absolute',			//该panel的布局
	defaultType: 'textfield',	//该panel中Item项的默认类型
	border: false,				//是否显示边框
	frame: true,				//是否显示帧
	autoScroll: true,			//允许当内容超出高度时，自动产生滚动条
	initComponent: function() {
//日志类别
		pageVar.SYSLOG_KINDStore = eval("[{'value':'0', 'text':'类别1'},{'value':'1', 'text':'类别2'},{'value':'2', 'text':'类别3'}]");
		var SYSLOG_KINDStore = Ext.create('Ext.data.Store', {
		    fields: ['value', 'text'],
		    data:pageVar.SYSLOG_KINDStore
		});

		var count = -1;			//用来记录panel中的行数，便于排版

		this.items = [					//为该panel添加内容
     {
			xtype: 'textfield',
			fieldLabel: '日志ID',
			allowBlank: false,
			id: 'SYSLOG_ID',
            disabled: true,
			fieldWidth: pageVar.vFieldW,
			width: pageVar.vWidth,
			labelWidth: pageVar.LABEL_WIDTH,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '日志类型',
			allowBlank: false,
			id: 'SYSLOG_TYPE',
			fieldWidth: pageVar.vFieldW,
			labelWidth: pageVar.LABEL_WIDTH + 10, 
			width: pageVar.vWidth,
			labelAlign: 'right',
			x:pageVar.SRC_LOC_X + pageVar.vWidth,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) ,	//此行放置了两个item，所以count无需增加
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '日志描述',
			allowBlank: false,
			id: 'SYSLOG_DESC',
			fieldWidth: pageVar.vFieldW,
			labelWidth: pageVar.LABEL_WIDTH,
			width: pageVar.vOneLineWidth,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }, 
     {
			store: SYSLOG_KINDStore,
         queryMode: 'local',
			displayField: 'text',
			valueField: 'value',
			xtype: 'combobox',
			fieldLabel: '日志类别',
			allowBlank: false,
			id: 'SYSLOG_KIND',
			fieldWidth: pageVar.vFieldW,
			width: pageVar.vWidth,
			labelWidth: pageVar.LABEL_WIDTH,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '日志来源',
			allowBlank: false,
			id: 'SYSLOG_SOURCE',
			fieldWidth: pageVar.vFieldW,
			labelWidth: pageVar.LABEL_WIDTH + 10, 
			width: pageVar.vWidth,
			labelAlign: 'right',
			x:pageVar.SRC_LOC_X + pageVar.vWidth,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) ,	//此行放置了两个item，所以count无需增加
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '创建时间',
			allowBlank: false,
			id: 'SYSLOG_CREATETIME',
			fieldWidth: pageVar.vFieldW,
			width: pageVar.vWidth,
			labelWidth: pageVar.LABEL_WIDTH,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '日志级别',
			allowBlank: false,
			id: 'SYSLOG_LEV',
			fieldWidth: pageVar.vFieldW,
			labelWidth: pageVar.LABEL_WIDTH + 10, 
			width: pageVar.vWidth,
			labelAlign: 'right',
			x:pageVar.SRC_LOC_X + pageVar.vWidth,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) ,	//此行放置了两个item，所以count无需增加
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: 'IP地址',
			allowBlank: false,
			id: 'SYSLOG_IP',
			fieldWidth: pageVar.vFieldW,
			width: pageVar.vWidth,
			labelWidth: pageVar.LABEL_WIDTH,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '菜单编码',
			allowBlank: false,
			id: 'SYSMENU_CODE',
			fieldWidth: pageVar.vFieldW,
			labelWidth: pageVar.LABEL_WIDTH + 10, 
			width: pageVar.vWidth,
			labelAlign: 'right',
			x:pageVar.SRC_LOC_X + pageVar.vWidth,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) ,	//此行放置了两个item，所以count无需增加
			anchor: '-5'
     }, 
     {
			xtype: 'textfield',
			fieldLabel: '用户表信息ID',
			allowBlank: false,
			id: 'SYSUSER_ID',
                 disabled: true,
			fieldWidth: pageVar.vFieldW,
			width: pageVar.vWidth,
			labelWidth: pageVar.LABEL_WIDTH,
			x: pageVar.SRC_LOC_X,
			y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ),
			anchor: '-5'
     }

     ];
		this.callParent(arguments);
	}
});



//--------------------------------------------弹出修改/增加窗口--------------------------------------------
var modifyWin = null;   //弹出窗口
//创建弹出表单
ModifyWin = Ext.extend(Ext.util.Observable,{
     alertWin : null,
     alertPanel : null,
     field : null,   //放置弹出窗口需要的变量

	constructor:function() {
		this.alertPanel = new MyFormPanel;

		this.alertWin = Ext.create('Ext.window.Window', {
			modal:true,					
		    title:pageVar.alertPanelTitle,		   
		    layout: 'fit',
			width: pageVar.vPanelW,
			height: 300,
		    items: this.alertPanel ,
		    constrain:true,
		    shrinkWrap:3,
		    autoScroll: true,
		    closeAction:'hide',
		    buttons: [  //在窗口中增加按钮
				{
					text: '保存',		
					minWidth:70,
					id: 'savaButton',
					scope:this,
					handler: this.save
				}, {
					text: '重置',
					minWidth: 70,
					scope:this,
					handler: this.reset 
				}, {
					text: '取消',
					minWidth: 70,
					scope:this,
					handler: this.cancel
				}]
		});			
	},

	cancel:function(){
		this.alertWin.hide();
	},

	show: function() {
		this.alertWin.show();
	},

	reset: function() {
		this.alertPanel.getForm().reset();
	},
 
	save:function() {
		if ( this.field == null ) {
			this.initialField();
		}
			
		Ext.Ajax.request( {
			url:pageVar.ajaxRequestUrl,
			success:function(response,option){
			var rs = Ext.decode(response.responseText);
				if(rs.success)
				{
					Ext.MessageBox.alert('提示',rs.msg);
					pageVar.store.load();//重新加载数据
					this.alertWin.hide();
				}
				else
				{
					Ext.MessageBox.alert('提示',rs.msg);
				}
			},
			failure:function(response){
				Ext.MessageBox.alert('提示','网络错误或连不到服务!');
			},
			scope:this,
			params : {
				oper : pageVar.Oper,		//1: 查询， 2:添加， 3:修改， 4:删除
               SYSLOG_ID:this.field.var_SYSLOG_ID.getValue(),   //日志ID
               SYSLOG_TYPE:this.field.var_SYSLOG_TYPE.getValue(),   //日志类型
               SYSLOG_DESC:this.field.var_SYSLOG_DESC.getValue(),   //日志描述
               SYSLOG_KIND:this.field.var_SYSLOG_KIND.getValue(),   //日志类别
               SYSLOG_SOURCE:this.field.var_SYSLOG_SOURCE.getValue(),   //日志来源
               SYSLOG_CREATETIME:this.field.var_SYSLOG_CREATETIME.getValue(),   //创建时间
               SYSLOG_LEV:this.field.var_SYSLOG_LEV.getValue(),   //日志级别
               SYSLOG_IP:this.field.var_SYSLOG_IP.getValue(),   //IP地址
               SYSMENU_CODE:this.field.var_SYSMENU_CODE.getValue(),   //菜单编码
               SYSUSER_ID:this.field.var_SYSUSER_ID.getValue()   //用户表信息ID
           }

		});	
	},
	initialField: function() {
		this.field = {};
       this.field.var_SYSLOG_ID = Ext.getCmp('SYSLOG_ID'),   //日志ID
       this.field.var_SYSLOG_TYPE = Ext.getCmp('SYSLOG_TYPE'),   //日志类型
       this.field.var_SYSLOG_DESC = Ext.getCmp('SYSLOG_DESC'),   //日志描述
       this.field.var_SYSLOG_KIND = Ext.getCmp('SYSLOG_KIND'),   //日志类别
       this.field.var_SYSLOG_SOURCE = Ext.getCmp('SYSLOG_SOURCE'),   //日志来源
       this.field.var_SYSLOG_CREATETIME = Ext.getCmp('SYSLOG_CREATETIME'),   //创建时间
       this.field.var_SYSLOG_LEV = Ext.getCmp('SYSLOG_LEV'),   //日志级别
       this.field.var_SYSLOG_IP = Ext.getCmp('SYSLOG_IP'),   //IP地址
       this.field.var_SYSMENU_CODE = Ext.getCmp('SYSMENU_CODE'),   //菜单编码
       this.field.var_SYSUSER_ID = Ext.getCmp('SYSUSER_ID')   //用户表信息ID
	},

	load: function( item ) {
		if ( this.field == null ) {
			this.initialField();
		}

		this.field.var_SYSLOG_ID.setValue( item.get( 'SYSLOG_ID' ) );   //日志ID
		this.field.var_SYSLOG_TYPE.setValue( item.get( 'SYSLOG_TYPE' ) );   //日志类型
		this.field.var_SYSLOG_DESC.setValue( item.get( 'SYSLOG_DESC' ) );   //日志描述
		this.field.var_SYSLOG_KIND.setValue( item.get( 'SYSLOG_KIND' ) );   //日志类别
		this.field.var_SYSLOG_SOURCE.setValue( item.get( 'SYSLOG_SOURCE' ) );   //日志来源
		this.field.var_SYSLOG_CREATETIME.setValue( item.get( 'SYSLOG_CREATETIME' ) );   //创建时间
		this.field.var_SYSLOG_LEV.setValue( item.get( 'SYSLOG_LEV' ) );   //日志级别
		this.field.var_SYSLOG_IP.setValue( item.get( 'SYSLOG_IP' ) );   //IP地址
		this.field.var_SYSMENU_CODE.setValue( item.get( 'SYSMENU_CODE' ) );   //菜单编码
		this.field.var_SYSUSER_ID.setValue( item.get( 'SYSUSER_ID' ) );   //用户表信息ID
	}

});
//删除所选中表格中的数据
function deleteData(){
    var myGrid = Ext.getCmp( 'myGrid' );
    var  record= myGrid.getSelectionModel().getSelection();	//取得选中的项

    var idAll = "";
    for(var i = 0; i < record.length; i++){
       idAll += "'"+record[i].get( pageVar.treeNodeIdColumn )+"'";
        if(i<record.length-1){
            idAll = idAll + ",";
        } 
    } 
           
    Ext.Ajax.request( {
        url:pageVar.ajaxRequestUrl,
        success:function(response,option){
        var rs = Ext.decode(response.responseText);
            if(rs.success)
            {
                Ext.MessageBox.alert('提示',rs.msg);
                pageVar.store.load();//重新加载数据
				
            }
            else
            {
                Ext.MessageBox.alert('提示',rs.msg);
            }
        },
        failure:function(response){
            Ext.MessageBox.alert('提示','网络错误或连不到服务!');
        },
        scope:this,
        params : {
            oper : 4,		//1: 查询， 2:添加， 3:修改， 4:删除
            SYSCST_ID:idAll
        }
    });	
}

gridPubFun.js：

Ext.require([ 
    'Ext.grid.*', 
    'Ext.toolbar.Paging', 
    'Ext.data.*'
]); 

//弹出窗口，并确定弹出式新增、详细还是修改窗口
var showWindow = function( btn ) {
	if(Ext.isEmpty(modifyWin)) {
		modifyWin = new ModifyWin();
	}
	Ext.getCmp('savaButton').setDisabled( 0 );		//设置保存按钮为可用
	if ( btn == 'add' ) 	{		//如果点击的不是添加按钮（详细或者修改按钮）
	    pageVar.Oper = 2;
		modifyWin.reset();
	} else {
	    pageVar.Oper = 3;
		if ( btn == 'detail' ) {
			Ext.getCmp('savaButton').setDisabled( 1 );		//设置保存按钮为不可用
		}
		//为表格读取数据
		var myGrid = Ext.getCmp( 'myGrid' );
		var selected = myGrid.getSelectionModel().getSelection();	//取得选中的项
		modifyWin.load( selected[0] );
	}
	modifyWin.show();
};

ShowGrid = Ext.extend(Ext.util.Observable,{
     viewPort : null,
	 constructor:function() {
	    this.loadStore();
	    
	    //设置整张表的Model为选择框模型
	    var selModel = Ext.create('Ext.selection.CheckboxModel', {
		    listeners: {
			    selectionchange: function(sm, selections) {
				    //设置此按钮在表格中的项被选上时有效
				    pageVar.mainPanel.down('#removeButton').setDisabled( ! pageVar.bButtons[3] || selections.length == 0 );

				    //设置只有在表格中的项只有一个被选上时才有效
				    pageVar.mainPanel.down('#detailButton').setDisabled( ! pageVar.bButtons[1] || selections.length != 1 );
				    pageVar.mainPanel.down('#modifyButton').setDisabled( ! pageVar.bButtons[2] || selections.length != 1 );
			    }
		    }
	    });
       
        pageVar.mainPanel = Ext.create('MyGridPanel',{ 	//自定义的带搜索功能的表
            store: pageVar.store,
            id: 'myGrid',	
            selModel: selModel,			//表格模型
            columns: pageVar.columns, 
            title: pageVar.gridTitle, 
            loadMask: true, 
		    region:'center'
        }); 
        
        pageVar.mainPanel.down('#addButton').setDisabled( ! pageVar.bButtons[0] );
	    //双击表格中的项就出现弹出修改窗口
	    var dblclick = function() {
		    showWindow();
	    };
    	
	    pageVar.mainPanel.addListener( 'itemdblclick', dblclick );
	    
	    this.viewPort = new Ext.Viewport({
		    layout : 'border',
		    items : [pageVar.mainPanel]
        });
	 },
	 
	 //为store载入内容
	 loadStore : function() {
	    pageVar.store = Ext.create('Ext.data.Store', { 
            //分页大小 
            pageSize: 50, 
            model: pageVar.modelName, 
            proxy: { 
               //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 
                type: 'ajax', 
                url: pageVar.gridStoreUrl,
                 
                reader: { 
                    root: pageVar.rootName, 
                    totalProperty  : 'total'
                }
            }
        }); 
	    pageVar.store.loadPage(1);
	 },
	 //关闭窗口
	 cancel:function(){
	    this.viewPort.hide();
	 },

     //展示窗口
	 show: function() {
	    this.viewPort.show();
	 }
});

LiveSearchGridPanel.js:

Ext.define('MyGridPanel', {
    extend: 'Ext.grid.Panel',
    requires: [
        'Ext.toolbar.TextItem',
        'Ext.form.field.Checkbox',
        'Ext.form.field.Text'
    ],
    
    /**
     * @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: '',
    
    // 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: 200
            }, {
                xtype: 'button',
                text: '搜索',
                tooltip: '',
                handler: me.onSearch,
                scope: me
			}, ' ', {
			    itemId: 'addButton',
                text: '添加',
				tooltip:'新增一个协议',	//显示提示
				iconCls:'add',
				handler: function() {
					showWindow( 'add' );	
				}
            }, '-', {
				itemId: 'detailButton',
                text: '详细',
				tooltip:'详细显示该协议',
				iconCls:'option',
				disabled: true,
				handler: function() {
					showWindow( 'detail' );
				}
            }, '-', {
				itemId: 'modifyButton',
                text: '修改',
				tooltip:'修改所选中的协议',
				iconCls:'modify',
				disabled: true,
				handler: function() {
					showWindow( 'modify' );
				}
            }, '-', {
				itemId: 'removeButton',
                text: '删除',
				tooltip:'删除所选中的协议',
				iconCls:'remove',
				disabled: true,
				handler: function() {
				

				Ext.MessageBox.confirm('确认', '确定要删除吗?',function(btn){  
                       if (btn == 'yes')
               	        {
               		        deleteData();
                       }
                    }); 
					
				}
            }];

        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
     */
     onSearch: function() {
         var me = this,
             count = 0;
	    	
	     me.store.rejectChanges();
         me.view.refresh();
         // reset the statusbar
         me.statusBar.setStatus({
             text: me.defaultStatusText,
             iconCls: ''
         });

         me.searchValue = me.getSearchValue();
         me.currentIndex = null;

         if (me.searchValue !== null) {
             me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));
             
			var totalCount = me.store.getTotalCount();
			for ( idx = 0; idx < totalCount; idx ++ ) {
					
				 var record = me.store.getAt( idx );
                 var td = Ext.fly(me.view.getNode( idx )).down('td'),
                     cell, matches, cellHTML;

				 var find = false;

                 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) {
						find = true;
                        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();
                 }
				 if ( ! find ) {	//如果该行没有找到需要的结果
					me.store.remove( record );
					totalCount --;
					idx --;
				 } else {
					count ++;
				 }
			};

             // results found
             if (me.currentIndex !== null) {
                 me.getSelectionModel().select(me.currentIndex);
                 me.statusBar.setStatus({
                     text: '共找到' + count + '条.',
                     iconCls: 'x-status-valid'
                 });
             }
         }

         // no results found
         if (me.currentIndex === null) {
             me.getSelectionModel().deselectAll();
         }

         // force textfield focus
         me.textField.focus();
     }
});

sysLog.json

{  
 "sysLog": [
 {
     "SYSLOG_ID":"SYSLOG_ID1",
     "SYSLOG_TYPE":"SYSLOG_TYPE1",
     "SYSLOG_DESC":"SYSLOG_DESC1",
     "SYSLOG_KIND":"SYSLOG_KIND1",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE1",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME1",
     "SYSLOG_LEV":"SYSLOG_LEV1",
     "SYSLOG_IP":"SYSLOG_IP1",
     "SYSMENU_CODE":"SYSMENU_CODE1",
     "SYSUSER_ID":"SYSUSER_ID1"
 }, {
     "SYSLOG_ID":"SYSLOG_ID2",
     "SYSLOG_TYPE":"SYSLOG_TYPE2",
     "SYSLOG_DESC":"SYSLOG_DESC2",
     "SYSLOG_KIND":"SYSLOG_KIND2",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE2",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME2",
     "SYSLOG_LEV":"SYSLOG_LEV2",
     "SYSLOG_IP":"SYSLOG_IP2",
     "SYSMENU_CODE":"SYSMENU_CODE2",
     "SYSUSER_ID":"SYSUSER_ID2"
 }, {
     "SYSLOG_ID":"SYSLOG_ID3",
     "SYSLOG_TYPE":"SYSLOG_TYPE3",
     "SYSLOG_DESC":"SYSLOG_DESC3",
     "SYSLOG_KIND":"SYSLOG_KIND3",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE3",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME3",
     "SYSLOG_LEV":"SYSLOG_LEV3",
     "SYSLOG_IP":"SYSLOG_IP3",
     "SYSMENU_CODE":"SYSMENU_CODE3",
     "SYSUSER_ID":"SYSUSER_ID3"
 }, {
     "SYSLOG_ID":"SYSLOG_ID4",
     "SYSLOG_TYPE":"SYSLOG_TYPE4",
     "SYSLOG_DESC":"SYSLOG_DESC4",
     "SYSLOG_KIND":"SYSLOG_KIND4",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE4",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME4",
     "SYSLOG_LEV":"SYSLOG_LEV4",
     "SYSLOG_IP":"SYSLOG_IP4",
     "SYSMENU_CODE":"SYSMENU_CODE4",
     "SYSUSER_ID":"SYSUSER_ID4"
 }, {
     "SYSLOG_ID":"SYSLOG_ID5",
     "SYSLOG_TYPE":"SYSLOG_TYPE5",
     "SYSLOG_DESC":"SYSLOG_DESC5",
     "SYSLOG_KIND":"SYSLOG_KIND5",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE5",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME5",
     "SYSLOG_LEV":"SYSLOG_LEV5",
     "SYSLOG_IP":"SYSLOG_IP5",
     "SYSMENU_CODE":"SYSMENU_CODE5",
     "SYSUSER_ID":"SYSUSER_ID5"
 }, {
     "SYSLOG_ID":"SYSLOG_ID6",
     "SYSLOG_TYPE":"SYSLOG_TYPE6",
     "SYSLOG_DESC":"SYSLOG_DESC6",
     "SYSLOG_KIND":"SYSLOG_KIND6",
     "SYSLOG_SOURCE":"SYSLOG_SOURCE6",
     "SYSLOG_CREATETIME":"SYSLOG_CREATETIME6",
     "SYSLOG_LEV":"SYSLOG_LEV6",
     "SYSLOG_IP":"SYSLOG_IP6",
     "SYSMENU_CODE":"SYSMENU_CODE6",
     "SYSUSER_ID":"SYSUSER_ID6"
 }]
}