extjs 提供了很多官方组件，例如 grid，table，tab，却找不到普通的 list 组件，可以通过继承 Ext.view.View 来实现

一个的列表定义

Ext.define('waterApp.view.business.device.DeviceOtherSpecList', {
  extend: 'Ext.view.View',
  xtype: 'other-spec-list',
  padding: '0 8',
  tpl: new Ext.XTemplate(
    '<div class="other-spec-wrap">',
    '<div class="other-spec-title"><span style="vertical-align: middle;">设备其他参数规格</span> <img style="vertical-align: middle; cursor: pointer;" id="otherSpecAddBtn" src="/resources/images/business/add-btn.png" alt=""></div>',
    '<div class="other-spec-list">',
    '<tpl for=".">',
    '<div class="other-spec-item">',
    '<img class="other-spec-del" src="/resources/images/business/del-btn.png" alt="">',
    '<div class="other-spec-txt">',
    '<div class="other-spec-label">{attr}</div>',
    '<div>{val} <span class="other-spec-unit">{unit}</span></div>',
    '</div>',
    '</div>',
    '</tpl>',
    '</div>',
    '</div>'
  ),
  store: {
    data: [
      {
        attr: '核定功率',
        val: '1000',
        unit: 'kw',
      },
    ],
  },
  itemSelector: 'div.other-spec-item',
  listeners: {
    boxready(ins, opts) {
      ins
        .getActionEl()
        .down('#otherSpecAddBtn')
        .on({
          click() {
            Ext.getCmp('deviceOtherSpecModalWin').show();
          },
        });
    },
    itemclick(view, record, item, index, e, eOpts) {
      if (e.target.className === 'other-spec-del') {
        this.getStore().remove(record);
      }
    },
  },
});

其中要注意的配置有itemSelector，用来实现点击列表项的事件处理

itemSelector 必须是循环的列表项的选择器，例如上面的列表项对应的 class 是 other-spec-item，所以配置为div.other-spec-item，否则会报错extjs Cannot read property 'internalId' of undefined

获取渲染的列表容器元素

通过getActionEl()获取列表容器元素后可以绑定一些列表外的元素，例如表头等等的事件处理

boxready (ins, opts) {
  ins.getActionEl().down('#otherSpecAddBtn').on({
    click () {
      Ext.getCmp('deviceOtherSpecModalWin').show();
    }
  });
}

尾部位置添加新元素

Ext.getCmp('otherSpecList').getStore().add(formData);

指定位置添加新元素

Ext.getCmp('otherSpecList').getStore().insert(0, formData);

移除指定元素

获取指定的 record，然后移除

Ext.getCmp('otherSpecList').getStore().remove(record);