Question

I have a strange problem with all my selectfields. When I enter a view for the first time containing a selectfield with a change event listener defined in the controller, it works fine. I can do a select and the event will fire. But when I enter an other view and pop that view so I return in the view with the selectfield, the change event does not fire anymore. Also the selected value is gone. I’ve tried to add the listeners to the config in the view, but that is not working at all?

This is more ore less an example of what I’m doing.

Controller:

Ext.define('MyApp.controller.Search', {
    extend: 'Ext.app.Controller',
    config: {
        refs:{
            distanceSelect:'#distanceSelect',
        },
        control:{
            distanceSelect:{
                change:'filterSearchList',
            },
        }
    },

    filterSearchList:function(){
        alert('42!!');
    }
});

View:

Ext.define('Abedrijven.view.search.Search_main', {
    extend:'Abedrijven.view.Screen',
    alias:'widget.search_main',
    requires:[
        'Ext.field.Select',
    ],

    config:{
        items:[{
           xtype: 'selectfield',
           id: 'distanceSelect',
           name:'distance',
           options: [{
               text: '- All -',
               value: '0'
           }, {
               text: '5 Km.',
               value: '5'
           }, {
               text: '10 Km.',
               value: '10'
           }
        }]
    }
});

EDIT

I have this in my app.js. I call these when I want to change the views.

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    var view = Ext.create('Abedrijven.view.Main');
    Ext.Viewport.add(view);

    Abedrijven.app.view = view;

    Abedrijven.app.pushView = function(xtype,data){
        Abedrijven.app.view.push({xtype:xtype,data:data});
    }

    Abedrijven.app.popView = function(){
        Abedrijven.app.view.pop();
    },

    Abedrijven.app.goHome = function(){
        Abedrijven.app.view.reset();
    }

    Abedrijven.app.view.add({xtype:'home_main'});
},

My main view:

Ext.define("Abedrijven.view.Main", {

extend:'Ext.NavigationView',
requires:[
    'Ext.Toolbar',
    'Ext.tab.Panel',
    'Ext.TitleBar',
],
alias:'widget.main',
id:'mainview',

config:{
    cls:['mainview'],
    fullscreen: true,
    ui:'dark',
    items:[

The first time it all works, change to other view, and than change back to this view and the change event will not fire. I’m using ST 2.0.1.1 GPL. Tested on iOS and browser.

Any help would be great!
Thanks in advance!

Answer 1

I had the same problem because I was using views defined and instantiated at runtime. First time was fine, second one the controller was loosing the listeners.

I solved the problem simply using dom subqueries.

config: {
refs: {
RecordTypeSelectField : ‘NewRecordPanel #recordTypeSelectField’

Essentially you simply add the parent container to the query key. That’s all!