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:' '}),
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"> </div>',
'<div class="x-grid3-resize-proxy"> </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
});
