1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Vote Rating
    0
    cmgreen is on a distinguished road

      0  

    Default Answered: Addition of second listener causes the first to stop working

    Answered: Addition of second listener causes the first to stop working


    I am currently setting up my first app using the MVC architecture. I have a set of panels for navigation that when you expand or collapse them the corresponding view is shown. I am using a Viewport with the navigation panels positioned in the west region and the views already hidden in the center region. I simply call a hide or show to achieve the functionality I want. Inside of the control method for the controller I have set up two listeners that reference the title attribute of the two panels. Using the expand and collapse panel events I call the hide or show. When I add the second listener for the second panel and run the app then the first panel will no longer show or hide its view anymore. I've attempted to give ids to these panels from the view and then reference them in the controller, but the behavior is the same. With the title attribute being unique I thought it would fire off the correct set of functions.

    Can someone shed some light on why the first listener has quit firing?


    Navigation.js (Controller)

    Ext.define('ITWAC.controller.Navigation', {
    extend: 'Ext.app.Controller',
    views: ['navigation.Window', 'pr.PRGrid', 'pr.Requisition']

    refs: [{
    ref: 'req',
    selector: 'prrequisition',
    ref: 'inv',
    selector: 'prgrid'
    }],
    init: function() {
    this.control({
    'navmenu > panel[title=Purchase Requisition]': {
    expand: this.showPanel,
    collapse: this.hidePanel
    },
    'navmenu > panel[title=Inventory]': {
    expand: this.showGrid,
    collapse: this.hideGrid
    },
    });
    },
    showPanel: function() {
    this.getReq().show();
    },
    hidePanel: function() {
    this.getReq().hide();
    },
    showGrid: function() {
    this.getInv().show();
    },
    hideGrid: function() {
    this.getInv().hide();
    }

    });

    Window.js (Navigation panel)

    Ext.define('ITWAC.view.navigation.Window', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.navmenu',
    title: "Info Tech Warehouse Access Center",
    layout: 'accordion',
    items: [
    {
    xtype: 'panel',
    title: 'Purchase Requisition',
    },
    {
    xtype: 'panel',
    title: 'Inventory',
    },
    {
    xtype: 'panel',
    title: 'IT Stock',
    },
    {
    xtype: 'panel',
    title: 'VClip',
    },
    {
    xtype: 'panel',
    title: 'Admin'
    }
    ],
    initComponent: function() {
    this.callParent(arguments);
    }

    });




  2. Your problem is not at events. They work well. The problem is at refs definition. Try to fix it as below:
    Code:
    	refs: [{
    		ref: 'req',
    		selector: 'prrequisition',
    	},{ // <- You missed this and this cause problem.
    		ref: 'inv',
    		selector: 'prgrid'
    	}],

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Your problem is not at events. They work well. The problem is at refs definition. Try to fix it as below:
    Code:
    	refs: [{
    		ref: 'req',
    		selector: 'prrequisition',
    	},{ // <- You missed this and this cause problem.
    		ref: 'inv',
    		selector: 'prgrid'
    	}],

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Vote Rating
    0
    cmgreen is on a distinguished road

      0  

    Default Works like a charm

    Works like a charm


    Thanks vietits. That fixed my problem. The app works exactly the way I need it to now. I just had been looking at the code so long I couldn't see what was right in front of my face. I have the new book by Loiane Groner, but her example in the MVC chapter only shows one ref. I've gone back and looked at the syntax on the feed viewer example in the sdk and there it is. I will have to remember the curly braces when dealing with arrays.

    Thanks again.

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    1
    pabramowitsch is on a distinguished road

      0  

    Default I have a similar problem, but this example now seems to be deprecat

    I have a similar problem, but this example now seems to be deprecat


    I have a panel with several sliders and lists and a lot of interaction. Its controller has a refs section built in this way

    refs : {
    symptomList : '#symptomList',
    classifierList : '#classifierList',

    intensity: '#sldIntensity',
    occur: '#sldOccur',
    },

    All the events seem to work fine the first time around, but when I pop the panel from its navigation view and later rebuild and push it back onto the navigation view, none of the events fire. Looking at the DOM, the objects whose ids are referred to in refs, are present and visible. I tried the syntax suggested in this thread, but now none of the events fire even the first time, and I get a deprecated warning in the log.


    refs : [
    {ref: 'symptomList', selector : '#symptomList'},
    {ref: 'classifierList' , selector : '#classifierList'},
    {ref: 'store' , selector : '#symtomstore'},
    {ref: 'intensity' , selector : '#sldIntensity'},
    {ref: 'occur' , selector : '#sldOccur'},
    ],

    Do I need to remove the events somehow before popping the panel so they don't get duplicated?

    - P

Thread Participants: 2

Tags for this Thread