Threaded View

  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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar