1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    21
    Vote Rating
    0
    Supriya Kale is on a distinguished road

      0  

    Default Answered: Firing a custom event from a view and handling it in Controller

    Answered: Firing a custom event from a view and handling it in Controller


    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 :

    Code:
    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 :

    Code:
    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');
        }
    });

  2. Try to fix your code as below:
    Code:
        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.

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Try to fix your code as below:
    Code:
        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.

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    21
    Vote Rating
    0
    Supriya Kale is on a distinguished road

      0  

    Default


    Thanks a lot vietits it worked...

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."