PDA

View Full Version : Firing a custom event from a view and handling it in Controller



Supriya Kale
16 Nov 2012, 3:45 AM
Hi,
I am new to Ext - js texhnology. I want to fire a custom event when I select a menu item and handle the event in the controller. Accordingly I added handler in the controller('GraphicsLibrary'), but on calling view's fireEvent method, the event is not getting fired. Is there some other way? Please find my code below: Look the code in 'red'.

View :


Ext.define('ORT.view.library.GraphicsEdit', {
extend: 'Ext.form.Panel',

alias: 'widget.graphicsedit',

stores:['GraphicsLibraries', 'SearchedGraphicsCategories','SearchedGraphics'],

defaults: {
border: false,
flex: 1,
layout: 'anchor'
},

title : 'Edit Graphics',

id: 'panelEditGraphics',
cls: 'customEditPanel',

height: 300,

autoShow: true,

collapsible: true,

floatable: false,

titleCollapse: false,

collapsed: true,

autoScroll: true,

menu:Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false,
items: [{
text: 'regular item 1'
},{
text: 'regular item 2'
},{
text: 'regular item 3'
}]
}),

bodyStyle: 'padding:10px 10px 0;',

fieldDefaults: {
msgTarget: 'side',
autoFitErrors: false
},

items: [{
xtype: 'dataview',
store: 'SearchedGraphics',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name:stripTags}">',
'<div class="thumb"><table><tr><td><img class="img" src="{url}" title="{name:htmlEncode}"></td></tr></table></div>',
'<span class="x-editable">{shortName:htmlEncode}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: ORT.Utility.GridEmptyText,

prepareData: function(data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
},
listeners: {
selectionchange: function(dv, nodes ){
if(false) {
var l = nodes.length,
s = l !== 1 ? 's' : '';
this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
},
itemcontextmenu: function(dataview, record, item, index, event, eOpts){
this.up('panel').fireEvent('savegraphics');
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: true,
record: record,
items: [{
text: 'Local Computer'
},'-',{
text: 'Copy To',
menu: [{
xtype:'menu'
}],
listeners:{
afterrender:function(menu,item,e,options){
var store = Ext.getStore('GraphicsLibraries');
var n = store.data.items.length;
for(var i =0;i<n;i++){
var name = store.data.items[i].get('name');
var id = store.data.items[i].get('id');
menu.menu.insert(0,{text:name,lib:id,menu:[],handler:this.onItemClick});
var lib = menu.menu.items.items[0].lib;
var catStore = Ext.getStore('SearchedGraphicsCategories');
var m = catStore.data.items.length;
for(var k =0;k<m;k++){
var rec = catStore.data.items[k];
if(rec.get('library') === lib){
menu.menu.items.items[0].menu.insert(0,{text:rec.get('name'),handler:this.onItemClick});
}
}
}
}
},
onItemClick:function(item){
alert('on item click');
this.fireEvent('savegraphics');

}
}]
});
event.stopEvent();
var x = event.getX();
var y = event.getY();
menu.showAt(event.getXY());
}
}
}
],

buttons: [
'->',
{
name: 'addButton',
text: 'Add New Graphic',
action: 'add',
width: 145,
iconCls: 'icon-newGraphicsBtn',
scale:'medium',
disabled: false
}
],

constructor: function (config) {
this.superclass.constructor.call(this, config);
}
});



Controller :



Ext.define('ORT.controller.GraphicsLibrary', {

extend: 'Ext.app.Controller',

requires: [
'Ext.window.MessageBox',
'ORT.view.library.GraphicsEdit'
],

views: ['library.GraphicsManager'],

stores: ['GraphicsLibraries', 'SearchedGraphicsCategories', 'SearchedGraphics'],

models: ['Graphics'],

refs: [
{
ref: 'graphicsSearchGrid',
selector: 'graphicssearch'
},
{
ref: 'graphicsEditView',
selector: 'graphicsedit'
}
],

requires: [
'ORT.view.library.CategoryEdit',
'ORT.view.library.LibraryEdit',
'ORT.view.library.FileSelect'
],

init: function() {
console.log('ORT.controller.GraphicsLibrary::init()');
this.control({
'graphicsedit': {'savegraphics': this.saveGraphics}
});

},

saveGraphics: function(){
alert('on save graphics');
}
});

vietits
16 Nov 2012, 4:52 PM
Try to fix your code as below:


itemcontextmenu: function(dataview, record, item, index, event, eOpts){
var form = this.up('form'); // get reference to form instance
this.up('panel').fireEvent('savegraphics');
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: true,
record: record,
items: [{
text: 'Local Computer'
},'-',{
text: 'Copy To',
menu: [{
xtype:'menu'
}],
listeners:{
afterrender:function(menu,item,e,options){
var store = Ext.getStore('GraphicsLibraries');
var n = store.data.items.length;
for(var i =0;i<n;i++){
var name = store.data.items[i].get('name');
var id = store.data.items[i].get('id');
menu.menu.insert(0,{text:name,lib:id,menu:[],handler:this.onItemClick});
var lib = menu.menu.items.items[0].lib;
var catStore = Ext.getStore('SearchedGraphicsCategories');
var m = catStore.data.items.length;
for(var k =0;k<m;k++){
var rec = catStore.data.items[k];
if(rec.get('library') === lib){
menu.menu.items.items[0].menu.insert(0,{text:rec.get('name'),handler:this.onItemClick});
}
}
}
}
},
onItemClick:function(item){
alert('on item click');
//this.fireEvent('savegraphics');
form.fireEvent('savegraphics'); // fire event from form instance
}
}]
});
event.stopEvent();
var x = event.getX();
var y = event.getY();
menu.showAt(event.getXY());
}

BTW: Your code will create context menu each time itemcontextmenu() method is called. I suggest you should create this menu one time and show it each time this method is called.

Supriya Kale
18 Nov 2012, 8:54 PM
Thanks a lot vietits :) it worked...