1. #1
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default Selectors fail for ComboBox in this.control(). Why?

    Selectors fail for ComboBox in this.control(). Why?


    Hello everyone,

    I am pulling my hair out. Hoping someone can stop me.

    I have the following 2 components in a field set in a view file on a form.

    Code:
    Ext.define('App.view.prospects.Filter', {
    
    
        alias:                               'widget.prospectsfilter',
        extend:                            'Ext.form.Panel',
        itemId:                            'prospectsfilter',
       
    .....
    
        initComponent:                      function(){
       
    .....
    
    
            this.testButton = Ext.create('Ext.button.Button', {     
                handler:                    function() {this.fireEvent('testEvent')},
                iconCls:                   'icon-apply_16x16',
                itemId:                    'testButton',
                text:                      'Test'
            });
    
    
            this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
                anchor:                    '100%',
                displayField:              'name',
                fieldLabel:                'Campaign(s)',
                itemId:                    'campaignsComboBox',
                labelWidth:                 90,
                listConfig:                 {
                    minWidth:               150  
                },
                listeners:                  {
                    select:                 function() {this.fireEvent('testEvent');}
                },
                multiSelect:                false,
                queryMode:                 'local',
                store:                      this.campaignsStore,
                value:                      null,
                valueField:                'id'
            });
    Now, in the controller, I have:

    Code:
    Ext.define('App.controller.ProspectsFilter', {
        
        extend:                            'Ext.app.Controller',
        
        models:                             ['Prospect'],
        stores:                             ['Prospects'],
        views:                              ['prospects.Filter'],
    
    
    .....
    
    
        init:                               function() {
            
            this.control({
                
               'prospectsfilter #testButton':{
                    testEvent:              function(){console.log('Found #testButton!');}
                },
    
    
               'prospectsfilter #campaignsComboBox':{
                    testEvent:              function(){console.log('Found #campaignsComboBox!');}
                }
            }
        });
    Now, when I click the 'testButton', I see the message in the console that it was found.

    However, when I make a selection in the 'campaignsComboBox', nothing happens.

    WHY???

    Thanks in advance!

    Eric

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,642
    Vote Rating
    401
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have you tried simply listening for your click/select event in the controller and then call the same function in the controller?

    Scott.

  3. #3
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    Scott,

    Thanks for helping.

    Yes - but when I place a console.log there for debugging, it never is executed. That tells me it is the selector parameters that are not being matched correctly for some reason. So, I am adding the step (for now) of firing a custom event from the select event for debugging purposes.

    I suspect a scope issue, but placing 'scope:this' in the listener definition, or simply adding the listener after using the 'on' method, also adding the 'this' scope, does nothing.

    Depending on the scope I am using, I have tried using only 'prospectsfilter' in the selector too. Nothing seems to work.

    It may be that the view is in a subfolder (/view/prospects) and therefore the alias and/or itemId needs to be different? Not sure. All the examples I find are not in subfolders. But then again - the button works. Ugh.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,642
    Vote Rating
    401
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    So if you where to add the following, it does not fire?

    Code:
    init : function () {
        var me = this;
    
        me.control({
            'prospectsfilter #campaignsComboBox' : {
                select    : me.comboSelect
            }
        });    
    },
    
    comboSelect : function (combo) {
       console.log('comboSelect');
    }
    Scott.

  5. #5
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    Scott,

    Correct. In your code, the comboSelect function is not executed.

    I believe the select event is fired, but the selectors and component query are not working to find it.

    Because, if I add this code to the ComboBox, I see the message in the console.

    Code:
    listeners:                  {
        select :                function() {
            if(Ext.isWebKit) console.log('MyApp.view.prospects.Filter :: Firing testEvent from select in this.campaignsComboBox.');
            this.fireEvent('testEvent');
        },
        scope:                  this
    },
    Further, this is specific to the ComboBox, because using the same method for selectors for other components and other events works fine.

    I ran into a very similar issue months ago, and never really resolved it. However, it seemed to take care of itself when we upgraded to a newer version of ExtJS. (We are at 4.1.0 now.) I say 'seemed' because so much else was going on at the time, I can't make a conclusive statement. It is my opinion though, that it was (and perhaps still is) a bug in ExtJS. I would LOVE to be proven wrong on this so I can move forward with the code again.

    I hope you've got some more ideas on how to narrow this down!

    Thanks,

    Eric

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,123
    Vote Rating
    512
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You've cut parts of your code out that could certainly be problematic. This logs on the custom event in 4.1.1, so it's likely the problem is in your code.

    Code:
    Ext.define('MyApp.view.Test', {
    
        extend: 'Ext.form.Panel',
        alias: 'widget.test',
    
        initComponent: function() {
            this.combo = Ext.create('Ext.form.field.ComboBox', {
                itemId: 'myCombo',
                store: [1, 2, 3],
                listeners: {
                    select: function() {
                        this.fireEvent('testEvent');
                    }
                }
            });
            this.items = this.combo;
            this.callParent();
        }
    });
    
    Ext.define('MyApp.controller.Test', {
        extend: 'Ext.app.Controller',
        init: function() {
            this.control({
                'test #myCombo': {
                    select: function() {
                        console.log('Select');
                    }
                }
            });
        }
    });
    
    Ext.require('*');
    
    Ext.application({
        name: 'MyApp',
    
        controllers: ['Test'],
    
        launch: function() {
            new Ext.container.Viewport({
                layout: 'fit',
                items: {
                    xtype: 'test'
                }
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    Evan,

    Any idea why it works perfectly with other components, but not a ComboBox?

    I have even added a button above the ComboBox, and events fired by it are captured just fine in the controller.

    Code:
            this.testButton = Ext.create('Ext.button.Button', {     
                handler:                    function() {this.fireEvent('testEvent')},
                iconCls:                   'icon-apply_16x16',
                itemId:                    'testButton',
                tabindex:                   6,
                text:                      'Test'
            });
    Eric

  8. #8
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    OK. Here is a good test - which may help.

    The 'change' and 'render' events are correctly captured by the controller selectors for a textfield, but the 'select' and 'render' events are NOT captured for the datefield, or the combobox.

    I realize that not all my code is shown - but given the 'change' event for the textfield works - and they are on the same form, shouldn't they all work?

    Any idea what I am doing wrong? It must be outside the view and the controller.

    Code:
    Ext.define('MyApp.controller.ProspectsFilter', {
        
        extend:                            'Ext.app.Controller',
        
        models:                             ['Prospect'],
        stores:                             ['Prospects'],
        views:                              ['prospects.Filter'],
        
        init:                               function() {
    
    
            this.control({
                'prospectsfilter #campaignsComboBox' : {
                    render:                 this.comboRender,
                    select:                 this.comboSelect
                },
                'prospectsfilter #campaignsDateField' : {
                    render:                 this.dateRender,
                    select:                 this.dateSelect
                },
                'prospectsfilter #campaignsTextField' : {
                    render:                 this.textRender,
                    change:                 this.textChange
                }
            });
            
        },
    
    
        comboRender: function(combobox)  {console.log('comboRender');}, // Never executes.
        comboSelect: function(combobox)  {console.log('comboSelect');}, // Never executes.
        dateRender:  function(dateField) {console.log('dateRender'); }, // Never executes.
        dateSelect:  function(dateField) {console.log('dateSelect'); }, // Never executes.
        textRender:  function(textField) {console.log('textRender'); }, // Executes.
        textChange:  function(textField) {console.log('textChange'); }  // Executes.
    });
    
    
    
    
    Ext.define('MyApp.view.prospects.Filter', {
    
    
        alias:                             'widget.prospectsfilter',
        extend:                            'Ext.form.Panel',
        itemId:                            'prospectsfilter',
    
    
        ....
    
    
        initComponent:                      function(){
    
    
            ....
            
            this.dateField = Ext.create('Ext.form.field.Date',{
                fieldLabel:                'Date',
                itemId:                    'campaignsDateField'
            });
            
            this.textField = Ext.create('Ext.form.field.Text',{
                fieldLabel:                'Text',
                itemId:                    'campaignsTextField'
            });
    
    
            this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
                anchor:                    '100%',
                displayField:              'name',
                fieldLabel:                'Campaign(s)',
                itemId:                    'campaignsComboBox',
                labelWidth:                 90,
                listConfig:                 {
                    minWidth:               150  
                },
                multiSelect:                false,
                queryMode:                 'local',
                store:                      Ext.create('Ext.data.ArrayStore', {
                    fields:                 ['name'],
                    data:                   [['entry1'], ['entry2'], ['entry3']]
                }),
                tabindex:                   7,
                value:                      null,
                valueField:                'id'
            });
    
    
            this.statusToSegmentFieldSet = Ext.create('Ext.form.FieldSet', {
                anchor:                    '100%',
                autoHeight:                 true,
                collapsed:                  true,
                collapsible:                true,
                defaults:                   {
                    editable:               false,
                    forceSelection:         false
                },
                items:                      [                                    
                    this.dateField,
                    this.textField,
                    this.campaignsComboBox
                ],
                layout:                    'anchor',
                margin:                    '10 10 10 10',
                title:                     'Dispositions, Campaigns, Segments'
            });
    
    
            .......
            
            var config = {        
                autoRender:                 true,
                autoScroll:                 true,
                bodyStyle:                 'background-color: #F1F1F1;',
                border:                     true,
                buttons:                    [
                    this.applyButton,
                    this.clearButton
                ],
                collapsed:                  false,
                collapsible:                true,
                frame:                      true,
                height:                     200,
                items:                      [
                    //this.datePicker,
                    //this.dateRangeFieldSet,
                    //this.prospectDetailsFieldSet,
                    this.statusToSegmentFieldSet
                    //this.assignedToFieldSet
                ],
                layout:                    'anchor',
                minWidth:                   300,
                region:                    'east',
                split:                      true,
                stateId:                   'prospectsModuleFilter',
                title:                     'Advanced Filters',
                width:                      300            
            };
            
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
            
        }
    });
    Last edited by edykstra; 27 Aug 2012 at 10:30 AM. Reason: Formatting.

  9. #9
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    OK. So, I made things even MORE simple, and I still have issues. However, I think the issue is related to the Rails Asset Pipeline. I don't see how - but that is the only thing I can picture being an issue.

    What I did was to use our existing application, and replace the Ext.application block as shown below, and then add a controller and view. STILL THE ISSUE PERSISTS! Only the textfield events are captured. The combobox and date field events are missed.

    So, then I copied the code to JSFiddle, and while there are still issues with the code, ALL the render events are captured.

    Does this help anyone realize what is wrong?

    Application file:

    Code:
    Ext.application({
        
        appFolder:                         'MyApp',
        name:                              'MyApp',
        
        requires:                           [
           'Ext.container.Viewport'
        ],
    
    
        controllers:                        [
           'Events'
        ],
            
        launch:                             function() {
                   
            Ext.create('Ext.container.Viewport', {
                layout:                    'fit',
                items:                      {
                    xtype:                 'eventsform'
                }
            });
        
        }
    });
    Controller file:

    Code:
    Ext.define('MyApp.controller.Events', {
        
        extend:                            'Ext.app.Controller',
        views:                              ['events.Form'],
            
        init:                               function() {
            
            console.log('Controller initialized.'); // This writes to console as expected.
    
    
            this.control({
                
                'eventsform #eventsFormComboBox': {
                    render:                 this.comboRender,
                    select:                 this.comboSelect
                },
                'eventsform #eventsFormDateField': {
                    render:                 this.dateRender,
                    select:                 this.dateSelect
                },
                'eventsform #eventsFormTextField': {
                    render:                 this.textRender,
                    change:                 this.textChange
                }
                
            });
        },
    
    
        comboRender: function(combobox)  {console.log('comboRender');}, // Never executes.
        comboSelect: function(combobox)  {console.log('comboSelect');}, // Never executes.
        dateRender:  function(dateField) {console.log('dateRender'); }, // Never executes.
        dateSelect:  function(dateField) {console.log('dateSelect'); }, // Never executes.
        textRender:  function(textField) {console.log('textRender'); }, // Executes.
        textChange:  function(textField) {console.log('textChange'); }  // Executes.
    });
    View file:

    Code:
    Ext.define('MyApp.view.events.Form', {
    
    
        alias:                             'widget.eventsform',
        extend:                            'Ext.form.Panel',
        itemId:                            'eventsform',
    
    
        initComponent:                      function(){
    
    
            this.dateField = Ext.create('Ext.form.field.Date',{
                fieldLabel:                'Date',
                itemId:                    'eventsFormDateField'
            });
            
            this.textField = Ext.create('Ext.form.field.Text',{
                fieldLabel:                'Text',
                itemId:                    'eventsFormTextField'
            });
    
    
            this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
                displayField:              'name',
                fieldLabel:                'Combo',
                itemId:                    'eventsFormComboBox',
                store:                      Ext.create('Ext.data.ArrayStore', {
                    fields:                 ['name'],
                    data:                   [['ONE'], ['TWO'], ['THREE']]
                }),
                valueField:                'id'
            });
    
    
            var config = {        
                autoRender:                 true,
                items:                      [
                    this.dateField,
                    this.textField,
                    this.campaignsComboBox
                ],
                region:                    'center'
            };
            
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });

  10. #10
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default Can now reproduce my issue on JSFiddle.

    Can now reproduce my issue on JSFiddle.


    Everyone,

    OK. I have narrowed it down further, to the point that I can reproduce the issue we are having in JSFiddle.

    Hopefully, this will make it very easy for someone to help me figure out what is wrong.

    Please read the note at JSFiddle here: http://jsfiddle.net/4JubT/7/

    Thanks
    Last edited by edykstra; 28 Aug 2012 at 2:17 PM. Reason: Update JSFiddle link.

Thread Participants: 2

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