PDA

View Full Version : DataView with several Action Buttons



alexpetri
24 Nov 2009, 1:51 AM
Hi i have a DataView with several ActionButtons:

<tpl>
<div class="my-item">
<a class="edit">edit</a><a class="delete" >delete</a><br/>
<p>{mytext} - {id}</p>
</div>
</tpl>
the click listener of a dataview can only access the whole surrounding "div" or one of the "a" tags.
How do i bind the action links to the record? Can you give me a short hint?

alexpetri
24 Nov 2009, 4:32 AM
Ext.onReady(function(){
var xd = Ext.data;

var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am']
]
});



var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="my-items" id="{company}" style="margin:5 0 5 0; border-bottom:2px solid red;">',
'<div class="price">{price} {company}</div>',
'<a class="edit" href="#" >edit</a>&nbsp;<a class="add" href="#" >add</a></div>',
'</tpl>'
);

var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView (0 items selected)',

items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
itemSelector:'div.my-items',
emptyText: 'No images to display',

prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.company, 15);
return data;
},

listeners: {

click :{
fn: function(dv,index,node,event){
event.stopEvent();
var activeRecord = dv.getStore().getAt(index);

var edit = event.getTarget("a.edit");
//console.log(activeRecord);
if(!Ext.isEmpty(edit)){


activeRecord.set('company', 'edited');
activeRecord.commit();
}
var add = event.getTarget("a.add");
if(!Ext.isEmpty(add)){
activeRecord.set('company', 'added');
activeRecord.commit();
}
}
}
}
})
});
panel.render(document.body);

});