Adding buttons to a dataview row? - sencha-touch-2

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

Answer 2

Hi I'm new to Sencha Touch and having problems too getting started. I came across this post looking for ways to access dataview item components/values from a controller. In my case I'm looking to use a slider and editbox value together and automatically update either value after updates.
Dataview has an itemtap listener which is handy returning the row index and the record as mentioned in this post. I still found it was a problem to pin down the component that was tapped so ended up just filtering the component by event object name.
Controller:
control: {
'contactslistitem': {
itemtouchend: 'tapItem',
}
}
tapItem: function(dataview, index, target, record, e, eOpts) {
if('facebookbutton'==e.target.name)
alert('Tapped facebook button on row '+index);
}
The dataview config for the facebook button element includes the name attribute:
facebook: {
name: 'facebookbutton'
text: 'Facebook1',
style: 'font-size: 12px;',
flex: 1
},
I still feel there must be a better way with ST2 to process dataview rows components together without having to look up the index/component each time.