sencha touch dataview 中添加 button 等复杂布局并添加监听事件

config 中的属性默认都会自动生成   getter   setter  applier  updater 四个方法。

applier 在调用  setter 时被调用， updater 在属性值被改变时调用

Ext.application({
    launch: function () {

        // DataItem 相当与 list 中的一行 (row)
        // 对应 store 中的一条数据
        // 相当于 适配器
        Ext.define('MyListItem', {
            extend: 'Ext.dataview.component.DataItem',
            requires: ['Ext.Button'],
            xtype: 'mylistitem',

            config: {
                // 水平布局
                layout: 'hbox',

                // 每行有一个 panel 和 两个 button
                employeeName: true,
                callButton: true,
                smsButton: true,

                defaults: {
                    // padding:10
                    margin: 5
                },
                // 当控件实例化时可调用一个方法初始化
                // 在这里将 view 与 data 关联起来
                dataMap: {
                    getEmployeeName: {
                        setHtml: 'name'
                    },
                    getCallButton: {
                        // setText: 'name'
                    },
                    getSmsButton: {
                        // setText: 'name'
                    }
                }
            },

            // apply 时实例化该控件
            applyEmployeeName: function (config) {
                return Ext.factory({flex: 1}, Ext.Panel, this.getEmployeeName());
            },
            applyCallButton: function (config) {
                return Ext.factory({text: '打电话'}, Ext.Button, this.getCallButton());
            },
            applySmsButton: function (config) {
                return Ext.factory({text: '发短信'}, Ext.Button, this.getSmsButton());
            },

            updateEmployeeName: function (newEmployeeName, oldEmployeeName) {
                if (oldEmployeeName) {
                    this.remove(oldEmployeeName);
                }

                if (newEmployeeName) {
                    this.add(newEmployeeName);
                }
            },

            updateCallButton: function (newcallButton, oldcallButton) {
                if (oldcallButton) {
                    this.remove(oldcallButton);
                }

                if (newcallButton) {
                    // update 时绑定一个  tap  事件
                    newcallButton.on('tap', this.oncallButtonTap, this);

                    this.add(newcallButton);
                }
            },

            updateSmsButton: function (newsmsButton, oldsmsButton) {
                if (oldsmsButton) {
                    this.remove(oldsmsButton);
                }

                if (newsmsButton) {
                    newsmsButton.on('tap', this.onsmsButtonTap, this);

                    this.add(newsmsButton);
                }
            },

            oncallButtonTap: function (button, e) {
                var record = this.getRecord();

                Ext.Msg.alert(
                    'Hello',
                    record.get('name')
                );
            },

            onsmsButtonTap: function (button, e) {
                var record = this.getRecord();

                Ext.Msg.alert(
                    'Hello',
                    record.get('name')
                );
            }
        });

        Ext.create('Ext.DataView', {
            fullscreen: true,

            store: {
                fields: ['name'],
                data: [
                    {name: 'Leslie'},
                    {name: 'Allan'},
                    {name: 'Caitlin'},
                    {name: 'Peter'}
                ]
            },
            // 必须设置
            useComponents: true,
            // 指定每一行的布局
            defaultType: 'mylistitem'
        });

    }
});