借助于tpl模板属性,可以将grid渲染到combo中去:
创建grid:省略
创建combo:
var store = newExt.data.JsonStore({
url: 'xxx.do',
fields: ['CODE','NAME'],
totalProperty : 'totalProperty',
root:'dataList'
//autoLoad:true //自动加载数据
});
store.load({
params:{start:0,limit:5}
});
var combo = newExt.form.ComboBox({
store:store,
//displayField:'NAME',
//valueField:'CODE',
mode:'local',
triggerAction:'all',
minListWidth:document.body.clientWidth*0.6+6,
renderTo:'sexDiv',
tpl:'<tpl> <div id="qualityAgreeGrid"></div></tpl> ', //在每个下拉表后添加
listeners:{
'expand':function(){
Ext.getCmp("qualityAgreeGrid").render("qualityAgreeGrid");
}
}
});
tpl在combo下创建一个div,然后在下拉表展开的时候将grid渲染到div中去。
tpl只负责创建一个空的div。
由此可以看到ext在生成combo的html时,会优先考虑tpl。
注意:既然我们在combo下渲染tpl,不需要原来的数据了,但是为什么还必须要有store和mode属性。(不写的话,combo渲染不出来。)
Combo的源代码:
if(!this.tpl){
this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
}
this.view = newExt.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});
可以看到如果存在tpl会使用配置的tpl,否则默认会生成一个tpl,显示displayField对应的列表项。
我们知道combo下拉表是通过DataView生成的,而DataView又渲染到this.innerList,那么innerList是怎么来的呢。
this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
this.innerList = this.list.createChild({cls:cls+'-inner'});