ExtJs实现SearchGrid查询表格

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

 

	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">',
						'<div class="x-grid3-search-inner">',
							'<div class="x-grid3-search-offset" style="{ostyle}">{search}</div>',
						'</div>',
						'<div class="x-clear"></div>',
					'</div>',
					//========================
					'<div class="x-grid3-scroller">',
						'<div class="x-grid3-body" style="{bstyle}">{body}</div>',
						'<a href="#" class="x-grid3-focus" tabIndex="-1"></a>',
					'</div>',
				'</div>',
				'<div class="x-grid3-resize-marker">&#160;</div>',
				'<div class="x-grid3-resize-proxy">&#160;</div>',
			'</div>'
		),
		/**
		* 渲染查询表格
		**/
		renderSearch : function() {
				var colModel   = this.cm,
				templates  = this.templates,
				properties = {},
				colCount   = colModel.getColumnCount(),
				searchCells = [],
				i;
				templates.sCell=new Ext.Template(
					'<td style="{style}" ><div id="search-{id}"></div></td>'//列的模板，id可以在columnModel设置，如果没有则是从0开始，例如search-0,search-2,后面我们使用search-{id}来渲染我们所需要的查询控件
				);
				templates.seatchTpl=new Ext.Template(
					'<table  border="0" cellspacing="0" cellpadding="0" style="{tstyle}"><tr>{cells}</tr></table>'//整个查询框的模板
				);
				for (i = 0; i < colCount; i++) {
					
					properties = {
						id     : colModel.getColumnId(i),
						style  : this.getColumnStyle(i, true)
					};
					
					searchCells[i] = templates.sCell.apply(properties);
					
				}
				return templates.seatchTpl.apply({
					cells: searchCells.join(""),
					tstyle: String.format("width: {0};", this.getTotalWidth())
				});
		}
	});

 使用方法：

 

注意要在表格数据加载后，执行下面这段话，这个顺序一定要注意，要不可以渲染不了。

	//例子
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'state',
        mode: 'local',
        triggerAction: 'all',
		width:100,
        renderTo: 'search-2'//这个就是在渲染的DIV的ID，在templates.sCell定义了这个ID
    });