PDA

View Full Version : Extjs Dataview



vhier.agang
26 Mar 2015, 12:13 AM
Hello guyz, I would to ask for help.
My concern is how to add delete function on my custom delete icon.

I have my sample code here:
Ext.onReady(function() {
Ext.define('LogEntry', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string' }
]
});

Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
renderTo: Ext.getBody(),

layout: 'fit',

items: [{
xtype: 'dataview',

store: Ext.create('Ext.data.Store', {
model: 'LogEntry',
data: [
{ text: 'item 1' },
{ text: 'item 2' },
{ text: 'item 3' },
{ text: 'item 4' },
{ text: 'item 5' }
]
}),

tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="logentry">',
'<span>{text}</span>',
'<div class="removeicon"></div>',
'</div>',
'</tpl>'
),

itemSelector: 'div.logentry',
trackOver: true,
overItemCls: 'logentry-hover',

listeners: {
'itemclick': function(view, record, item, idx, event, opts) {

if(event.target.className === 'removeicon'){
alert('you clicked the x icon');
}

// How can I add delete function ?
console.warn('This is example code!');
}
}
}]
});
});



Thank you so much!

joel.watson
27 Mar 2015, 2:10 PM
Hi--

You're nearly there :)

Your dataview is bound to a store, so all you should have to do is get the store, pass the record (argument #2 of your "itemclick" handler) to the remove() method, and it's done.

I've included an example Fiddle below.

Hope that helps!
Thanks
Joel

kei