extjs 将grid添加到下拉框

最新推荐文章于 2019-02-18 16:36:19 发布

仄仄平平仄仄平

最新推荐文章于 2019-02-18 16:36:19 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/shenchengxinsunwei/article/details/84376919

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在ExtJS框架中利用tpl模板属性将Grid组件渲染到ComboBox组件中，实现更复杂的数据展示效果。文章详细展示了通过配置JsonStore、DataView及tpl属性，实现在ComboBox下拉菜单中嵌入Grid的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借助于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'});