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

    }
});