PDA

View Full Version : Adding a Button in DataView in each row based on store data



0steve
16 Aug 2012, 3:07 PM
Hi,

Can someone point me to the right direction on how to do this example (http://docs.sencha.com/touch/2-0/#!/guide/dataview), where I want to display a button in each dataview row in Sencha Architect 2.1 Build 584?

I have created a Dataview, what is next?



{
xtype: 'dataview',
flex: 1,
margin: '10px',
ui: 'dark',
itemTpl: [
'<div>{name}</div>'
],
store: 'MyJsonStore'
}


Thanks in Advance!

sword-it
16 Aug 2012, 10:56 PM
You may use <tpl if> with your itemTpl ,according to your needs.
Here is a sample, which simply shows a 'Vote' button with the names, if age is greater than 17.



var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie', age: 22},
{name: 'Rob', age: 14},
{name: 'Tommy', age: 22},
{name: 'Jacky', age: 16},
{name: 'Ed', age: 26}
]
},

itemTpl: new Ext.XTemplate(
'<p>{name}',
'<tpl if="age &gt; 17">',
'<button>Vote</button>',
'</tpl>',
'</p>'
)
});



output:-
38026

0steve
17 Aug 2012, 8:12 AM
Thank you for your reply.
Is there a way to add a handler to the button in the code you've provided?

Something similar to the code below:

{
xtype: 'button',
handler: function(button, event) {

Ext.Msg.alert('', "Hello");
},
ui: 'confirm-round',
text: 'MyButton9'
}


Thanks in Advance!

sword-it
18 Aug 2012, 1:28 AM
Hi!,
in that case, you may try following:-




var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie', age: 12},
{name: 'Rob', age: 21}
]
},


itemTpl: new Ext.XTemplate(
'<tpl if="age &gt; 17">',
'<p>{name}</p>',
'<p id="{age}"></p>',
'</tpl>'
),
listeners:{
initialize:function(){
new Ext.Button({
renderTo:'21'
, text:'Vote'
, width:100
, handler:function(){
alert('Vote Button is clicked');
}
})
}
}
});



Output:-
38058

0steve
21 Aug 2012, 7:21 AM
Thank You very much for replying, but what If I want to make the "Vote" name dynamic.
Such as renaming the "Vote" button to the "name" from the store of each item.

The following modified code does not work. It is giving
SyntaxError: Expected an identifier but found '}' instead.




var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie', age: 12},
{name: 'Rob', age: 21}
]
},
itemTpl: new Ext.XTemplate(
'<tpl if="age &gt; 17">',
'<p>{name}</p>',
'<p id="{age}"></p>',
'</tpl>'
),
listeners: {
initialize: function ()
{
new Ext.Button(
{
renderTo: '21',
text: {name} // I want to make this dynamic from each item name in the store
, width: 100,
handler: function ()
{
alert('Vote Button is clicked');
}
})
}
}
});


Thanks in Advance!