PDA

View Full Version : add buttons in a view.view



jask
12 Apr 2012, 11:04 AM
Hey i am trying to build an application that gets data from a datastore and i display that data in a view.view .
Depending on the data of the store i need to create clickable icons in the view.

For example: I have a user represented in my store. I (as his supervisor) can see that he just made a call out. Now there need to be icons next to the call that let me perform actions like monitoring the call. When he hangs up the icons disapear.

I dont have problems sending data and updating it. I also manged to use the "itemTpl" to make the icon appear or disapear depending on the data, but i dont understand yet how to access the icons click event in my MVC structure.

I was able to access the icons click event over listeners when the view was rendered but everytime the datastore receives new information the button click event doesnt work anymore.

How can i accomplish that. Here is the code i have so far:

Ext.define('MyApp.view.Users', {
extend: 'Ext.window.Window',
alias: 'widget.users',
title: 'Users',
id:'win-users',
closable: false,
collapsible: true,
constrainHeader: true,
expandOnShow: false,
layout: 'fit',

initComponent: function() {
this.items = [Ext.create('Ext.view.View', {
store: 'Users',
id: 'grid-users',
itemTpl: '<table class="pb_entry" cellpadding="0" cellspacing="0">
<tr>
<td class="pb_first" rowspan="3"></td>
<td class="pb_entry_mouseover">
<table>
<tr>
<td class="pb_status" rowspan="2"><img id="pb_{id}_status" class="status_icon" src="graphic/icons/status_{sblog}{extenlog}.png" data-qtitle="{first} {last}" data-qtip="{msg_status}" /></td>
<td class="pb_name">{first} {last}</td>
<td class="pb_options" rowspan="2"><img class="pb_voicemail" src="graphic/icons/phonebook_voicemail.gif" title="Voicemail" /></td>
</tr>
<tr>
<td class="pb_exten">({exten})</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="pb_{exten}_l1" class="pb_line pb_line_empty">{line1}</td>
</tr>
<tr>
<td id="pb_{exten}_l2" class="pb_line pb_line_empty">{line2}</td>
</tr>
</table>'
})];
this.callParent();
}
});

scottmartin
12 Apr 2012, 1:57 PM
Please see the following example and make any changes needed to simulate your problem.




var mydata = [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
];

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});

Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: mydata
});

var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);

Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody(),

listeners: {
itemclick: function(view,record,item,index) {
alert(index);
},

selectionchange: function(view,selections) {
// alert(selections);
},
buffer: 10 // set buffer for event handler
}

});

var button = new Ext.button.Button({
renderTo: Ext.getBody(),
text: "button1",
handler: function(){
var store = Ext.data.StoreManager.lookup('imagesStore');
store.removeAll();
store.loadRecords(mydata);
console.log('records loaded');
}
});


Regards,
Scott.

jask
12 Apr 2012, 10:34 PM
Thank you for the response. The suggested way lets me choose a specific part of my template to act as the item but i dont want to just put one button there. I my example i said that when a call is being made next to the call i want to have buttons (icons) that let me do diffrent things like monitor or record. So i need to be able to put more than one button with handlers in the view.

or if that is not the view then maybe something else.

Here is an image that shows how it should look. Like i said i have already managed all the logic of how data is updated and how the diffrent functions in the graphic are implemented. I just need to be able to call those functions from my view.

this graphic shows same window before and during a call of a user.

33972

jask
16 Apr 2012, 8:08 AM
Im thankful for the ideas already given but it doesnt really solve my problem. Is there anybody that can help me or point me in the right direction?