PDA

View Full Version : view with multible clickable icons



jask87
23 Apr 2012, 8:49 AM
I have an application that manages calls. I want to create a phonebook with entries that reflect the current status of a call.
If a call of a person in the phonebook is happaning this will already reflect in my store but i need to be able to create icons that can perform actions on that call (almost like an actioncoloum) here is a draft of what it should look like.

First image shows 2 entries before the a call happens and the second is when a call is going on. I need to be able to register events and then i can perform actions on those icons according to my store.

34391

I already managed to make a view have a certain icon be clickable but i need to have multiple Icons. I hope someone has an idea how to acomplish that.

scottmartin
27 Apr 2012, 9:39 AM
Was this address in another thread? I have seen this image before, but I am unable to locate the thread.

Regards,
Scott.

slemmon
27 Apr 2012, 2:19 PM
What about using the grid's itemclick event? The eventObject is one of the params available with itemclick. You could then use the getTarget() method to see if 'x' image was clicked and if so take a specific action.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.EventObject-method-getTarget



Ext.widget('gridpanel', {
title: 'Sample Grid'
, height: 200
, width: 200
, renderTo: Ext.getBody()
, columns: [{
text: 'Calls'
, dataIndex: 'calls'
}]
, store: {
fields: ['calls']
, data: [{
calls: '<img class="record" src="http://p.yusukekamiyamane.com/icons/search/fugue/icons/control-pause-record.png"/>&nbsp;<img class="stop" src="http://p.yusukekamiyamane.com/icons/search/fugue/icons/control-stop-square.png" />'
}]
}
, listeners: {
itemclick: function (view, record, el, i, e) {
if (e.getTarget('.record')) {
alert('start the recording')
}
if (e.getTarget('.stop')) {
alert('stop the recording')
}
}
}
});

slemmon
27 Apr 2012, 2:48 PM
See if this helps at all. I set a tpl and a data config on the displayfield and then used the update method and passed an object that the tpl expected - in this case val: 'SOMETHING'.



var df = Ext.widget('displayfield', {
renderTo: Ext.getBody()
, tpl: '<b>{val}</b>'
, data: { val: 'original' }
});


Ext.widget('button', {
renderTo: Ext.getBody()
, text: 'update'
, handler: function () {
df.update({val: 'updated'})
}
});