Sencha touch 2 list with buttons - sencha-touch-2

Question

Need to create a list in sencha touch 2 with items like
label1
label2
button1 button2 button3
label1
label2
button1 button2 button3
on clicking the button a poppup should come pointing it.
I know I need to use Dataview for creating the list. But I have no idea of creating such a layout using dataview. any help would greatly appreciated.

Answer 1

Here is the code required to create your layout.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
launch: function () {
Ext.define('MyListItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Button'],
xtype: 'mylistitem',
config: {
labelPanel:{
itemId:'labelpanel',
layout:'hbox',
defaults:{
//flex:1,
xtype:'label'
}
},
fnameLabel: true,
lnameLabel: {
style:'margin-left:5px'
},
horizontalPanel: {
layout: 'hbox',
defaults:{
xtype:'button',
flex:1
},
items: [{
text: 'First Name',
btnId:1
}, {
text: 'Last Name',
btnId:2
}, {
text: 'Age',
btnId:3
}]
},
dataMap: {
getFnameLabel: {
setHtml: 'fname'
},
getLnameLabel: {
setHtml: 'lname'
}
},
layout: 'vbox'
},
applyFnameLabel: function (config) {
return Ext.factory(config, Ext.Label, this.getFnameLabel());
},
updateFnameLabel: function (newFnameLabel, oldFnameLabel) {
if (oldFnameLabel) {
this.down('panel[itemId="labelpanel"]').remove(oldFnameLabel);
}
if (newFnameLabel) {
this.down('panel[itemId="labelpanel"]').add(newFnameLabel);
}
},
applyLnameLabel: function (config) {
return Ext.factory(config, Ext.Label, this.getLnameLabel());
},
updateLnameLabel: function (newLnameLabel, oldLnameLabel) {
if (oldLnameLabel) {
this.down('panel[itemId="labelpanel"]').remove(oldLnameLabel);
}
if (newLnameLabel) {
this.down('panel[itemId="labelpanel"]').add(newLnameLabel);
}
},
applyLabelPanel: function (config) {
return Ext.factory(config, Ext.Panel, this.getLabelPanel());
},
updateLabelPanel: function (newLabelPanel, oldLabelPanel) {
if (oldLabelPanel) {
this.remove(oldLabelPanel);
}
if (newLabelPanel) {
this.add(newLabelPanel);
}
},
applyHorizontalPanel: function (config) {
return Ext.factory(config, Ext.Panel, this.getHorizontalPanel());
},
updateHorizontalPanel: function (newHorizontalPanel, oldHorizontalPanel) {
if (oldHorizontalPanel) {
this.remove(oldHorizontalPanel);
}
if (newHorizontalPanel) {
//console.info(newHorizontalPanel.down('button[btnId=1]'));
newHorizontalPanel.down('button[btnId=1]').on('tap', this.onButtonTap, this);
newHorizontalPanel.down('button[btnId=2]').on('tap', this.onButtonTap, this);
newHorizontalPanel.down('button[btnId=3]').on('tap', this.onButtonTap, this);
this.add(newHorizontalPanel);
}
},
onButtonTap: function (button, e) {
var record = this.getRecord();
var id = button.config.btnId;
switch(id){
case 1: var value = record.get('fname');break;
case 2: var value = record.get('lname');break;
case 3: var value = record.get('age').toString();break;
}
Ext.Msg.alert(value,"The value is: " +value);
}
});
Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['fname','lname','age'],
data: [{
fname: 'Jamie',
lname: 'Avins',
age: 100
}, {
fname: 'Rob',
lname: 'Dougan',
age: 21
}, {
fname: 'Tommy',
lname: 'Maintz',
age: 24
}, {
fname: 'Jacky',
lname: 'Nguyen',
age: 24
}, {
fname: 'Ed',
lname: 'Spencer',
age: 26
}]
},
useComponents: true,
defaultType: 'mylistitem'
});
}
});
This fiddle should give you an idea. Read this link from the sencha blog. It explains the code.