藉助於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'});