extjs自定义列表

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);