实现在表格头部下文可以有对应的查询框，如附件图。代码如下：

?

	Ext.override(Ext.grid.GridView,{
	/**
	* 通过下标获取查询单个单元格元素
	**/
		getSearchCell : function(index) {
			return this.mainSh.dom.getElementsByTagName('td')[index];
		},
		/**
		* 手动拖拉表头列的宽度
		**/
		updateColumnWidth : function(column, width) {

			var columnWidth = this.getColumnWidth(column),
				totalWidth  = this.getTotalWidth(),
				headerCell  = this.getHeaderCell(column),
				searchCell  = this.getSearchCell(column),//获取查询单元格元素
				nodes       = this.getRows(),
				nodeCount   = nodes.length,
				row, i, firstChild;
			
			this.updateHeaderWidth();
			this.updateSearchWidth();//更新所有查询列的宽度
			headerCell.style.width = columnWidth;
			searchCell.style.width = columnWidth;//更新当前单元格的宽度
			for (i = 0; i < nodeCount; i++) {
				row = nodes[i];
				firstChild = row.firstChild;
				
				row.style.width = totalWidth;
				if (firstChild) {
					firstChild.style.width = totalWidth;
					firstChild.rows[0].childNodes[column].style.width = columnWidth;
				}
			}
			
			this.onColumnWidthUpdated(column, columnWidth, totalWidth);
		},
		renderUI : function() {
			var templates = this.templates;
			
			return templates.master.apply({
				body  : templates.body.apply({rows:'&#160;'}),
				header: this.renderHeaders(),
				ostyle: 'width:' + this.getOffsetWidth() + ';',
				bstyle: 'width:' + this.getTotalWidth()  + ';',
				search:this.renderSearch()//渲染
			});
		},
		/**
		* 更新查询列
		**/
		updateSearch : function() {
			this.innerSh.firstChild.innerHTML = this.renderSearch();
			this.updateSearchWidth(false);
		},
		
		/**
		 * 更新查询列的宽度
		 */
		updateSearchWidth: function(updateMain) {
			var innerShChild = this.innerSh.firstChild,
				totalWidth   = this.getTotalWidth();
			
			innerShChild.style.width = this.getOffsetWidth();
			innerShChild.firstChild.style.width = totalWidth;

			if (updateMain !== false) {
				this.mainBody.dom.style.width = totalWidth;
			}
		},
		initElements : function() {
			var Element  = Ext.Element,
				el       = Ext.get(this.grid.getGridEl().dom.firstChild),
				mainWrap = new Element(el.child('div.x-grid3-viewport')),
				mainHd   = new Element(mainWrap.child('div.x-grid3-header')),
				mainSh   = new Element(mainWrap.child('div.x-grid3-search')),//在原来的基础上加查询行
				scroller = new Element(mainWrap.child('div.x-grid3-scroller'));
			
			if (this.grid.hideHeaders) {
				mainHd.setDisplayed(false);
			}
			
			if (this.forceFit) {
				scroller.setStyle('overflow-x', 'hidden');
			}
			
			/**
			 * <i>Read-only</i>. The GridView's body Element which encapsulates all rows in the Grid.
			 * This {@link Ext.Element Element} is only available after the GridPanel has been rendered.
			 * @type Ext.Element
			 * @property mainBody
			 */
			
			Ext.apply(this, {
				el      : el,
				mainWrap: mainWrap,
				scroller: scroller,
				mainHd  : mainHd,
				mainSh  : mainSh,
				innerHd : mainHd.child('div.x-grid3-header-inner').dom,
				innerSh : mainSh.child('div.x-grid3-search-inner').dom,//在原来的基础上加上查询列
				mainBody: new Element(Element.fly(scroller).child('div.x-grid3-body')),
				focusEl : new Element(Element.fly(scroller).child('a')),
				
				resizeMarker: new Element(el.child('div.x-grid3-resize-marker')),
				resizeProxy : new Element(el.child('div.x-grid3-resize-proxy'))
			});
			
			this.focusEl.swallowEvent('click', true);
		},  
	
		masterTpl:new Ext.Template(
			'<div class="x-grid3" hidefocus="true">',
				'<div class="x-grid3-viewport">',
					'<div class="x-grid3-header">',
						'<div class="x-grid3-header-inner">',
							'<div class="x-grid3-header-offset" style="{ostyle}">{header}</div>',
						'</div>',
						'<div class="x-clear"></div>',
					'</div>',
					//查询框所需要的模板
					 '<div class="x-grid3-search">',
						'