DataView component list item in Sencha 2.3 using architect

Question

I am trying to build a list in sencha touch 2.3 (using sencha architect) by using Ext.dataview.component.ListItem. I was able to get the values from a store by using updateRecord method , however I am not able to pass it back to main component.

This is what I am trying to achieve:-

I want to create a list of buttons whose text will be displayed dynamically from store and if user clicks it it should show the alert with age. I have a store with name and age in it. I am able to get the name but I am not able to get the alert setup.I need help with that- Here is my dataView class

Ext.define('MyListItem.view.MyListItem', {
extend: 'Ext.dataview.component.ListItem',
alias: 'widget.mylistitem',

requires: [
    'Ext.Button',
    'Ext.MessageBox'
],

config: {
    padding: 10,
    layout: 'hbox',
    items: [
        {
            xtype: 'button',
            handler: function(button, e) {
                var record = this.getRecord();
                console.log("buttonTapped");
                console.log(record);
                Ext.Msg.alert(
                record.get('name'), // the title of the alert
                "The age of this person is: " + record.get('age') // the message of the alert
                );
            },
            text: 'MyButton'
        },
        {
            xtype: 'component',
            flex: 1,
            html: 'Sample component inside dataitem'
        }
    ]
},

updateRecord: function(record) {
    // Provide an implementation to update this container's child items
    var me = this;
    me.down('button').setText(record.get('name'));
}

});

Here is my store:-

Ext.define('MyListItem.store.MyDirectStore', {
extend: 'Ext.data.Store',

requires: [
    'MyListItem.model.MyModel'
],

config: {
    data: [
        {
            name: 'Adam',
            age: '28'
        },
        {
            name: 'Eve',
            age: '27'
        }
    ],
    model: 'MyListItem.model.MyModel',
    storeId: 'MyDirectStore'
}
});

Answer 1

I guess your problem is that you can't retrieve the record from the handler function like you're doing with this.getRecord()

You could update your button with the age too, then retrieve it to show the alert, something like:

{
    xtype: 'button',
    handler: function(button, e) {
        console.log("buttonTapped");
        Ext.Msg.alert(
            button.getText(), // the title of the alert
            "The age of this person is: " + button.getAge(); // the message of the alert
        );
    },
    text: 'MyButton',
    age: null
},

And:

updateRecord: function(record) {
    // Provide an implementation to update this container's child items
    var button = this.down('button');
    button.setText(record.get('name'));
    button.setAge(record.get('age'));
}

Even better it would be to store the info, or a reference to the record in a more appropriate place, like the ListItem itself maybe? But this should make it work.