Question

I’m trying out the new dataview component and I’m working with this Sencha example:

http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

In KittensListItem, I removed the image and now I want to add three
buttons that say: “Email”, “Facebook”, and “Twitter”, and not the
value in the Store. When the user clicks on each button, I’d like to
show each button’s respective Store value. How can this be accomplished?

Here’s what the screen looks like at the moment:

Example.view.KittensListItem:

Ext.define('Example.view.KittensListItem', {
    extend: 'Ext.dataview.component.DataItem',
    xtype : 'contactslistitem',

    requires: [ 'Ext.Button', 'Ext.slider.Slider' ],

    config: {

        dataMap: {

            getName: { setHtml: 'name' },
            getSlider: { setValue: 'cuteness' },
            getEmail: { setHtml: 'email' },
            getTwitter: { setHtml: 'twitter' },
            getFacebook: { setHtml: 'facebook' }
        },

        name: { flex: 1 },

        slider: { flex: 1 },

        email: {
            text: 'Email',
            style: 'font-size: 12px;',
            flex: 1
        },
         facebook: {
            text: 'Facebook1',
            style: 'font-size: 12px;',
            flex: 1
        },
        twitter: {
            text: 'Twitter',
            style: 'font-size: 12px;',
            flex: 1
        },

        layout: {
            type: 'hbox',
            align: 'center'
        }
    },

    applyName: function(config) { return Ext.factory(config, Ext.Component, this.getName()); },

    updateName: function(newName, oldName) {
        if (newName) { this.add(newName); }

        if (oldName) { this.remove(oldName); }
    },


    applySlider: function(config) { return Ext.factory(config, Ext.slider.Slider, this.getSlider()); },

    updateSlider: function(newSlider, oldSlider) {
        if (newSlider) { this.add(newSlider); }

        if (oldSlider) { this.remove(oldSlider); }
    },

    applyEmail: function(config) { return Ext.factory(config, Ext.Button, this.getEmail()); },

    updateEmail: function(newEmailButton, oldEmailButton) {
        if (newEmailButton) { this.add(newEmailButton); }

        if (oldEmailButton) { this.remove(oldEmailButton); }
    },

    applyTwitter: function(config) {return Ext.factory(config, Ext.Button, this.getTwitter()); },

    updateTwitter: function(newTwitterButton, oldTwitterButton) {
        if (newTwitterButton) { this.add(newTwitterButton); }

        if (oldTwitterButton) { this.remove(oldTwitterButton); }
    },

    applyFacebook: function(config) { return Ext.factory(config, Ext.Button, this.getFacebook()); },

    updateFacebook: function(newFacebookButton, oldFacebookButton) {
        if (newFacebookButton) { this.add(newFacebookButton); }

        if (oldFacebookButton) { this.remove(oldFacebookButton); }
    }
});

Model:

Ext.define('Example.model.Kitten', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            "name",
            "email",
            "twitter",
            "facebook",
            { name: "cuteness", type: 'int' }
        ]
    }
});

Store:

Ext.define('Example.store.Kittens', {
    extend: 'Ext.data.Store',
    requires: ['Example.model.Kitten'],

    config: {
        model: 'Example.model.Kitten',

        data: [
            { name: 'one',  email: 'email@addr', twitter: '@twitter', facebook: 'Facebook...', cuteness: 70 },
            { name: 'two',  email: 'email@addr', twitter: '@twitter', facebook: 'Facebook...', cuteness: 90 },
            { name: 'three',  email: 'email@addr',twitter: '@twitter', facebook: 'Facebook...',cuteness: 40 }
        ]
    }
});

Answer 1

After scouring the Internet I found a solution to the ‘tap’ event for each button. The trick is to add a tap listener in the update* functions. I’m still not sure how to set the static labels on each button.

Btw, a better answer gets someone else the upvote and check.

    updateEmail: function(newEmailButton, oldEmailButton) {
        if (newEmailButton) {
        newEmailButton.on('tap', this.onEmailButtonTap, this);
            this.add(newEmailButton);
        }

        if (oldEmailButton) {
            this.remove(oldEmailButton);
        }
    },

    onEmailButtonTap: function(button, event) {

    var record = this.getRecord();
        Ext.Msg.alert(record.get('email') +  ", " + record.get('facebook') );
  }