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'

        });



    }

});