Results 1 to 6 of 6

Thread: Fields events not firing with xtype from Ext.define()

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Answers
    5
    Vote Rating
    3
      0  

    Default Unanswered: Fields events not firing with xtype from Ext.define()

    If i define a FormPanel like this.

    Code:
    Ext.define('MyApp.view.test', {
    
        id: 'test',
        alias: 'widget.test',
        extend: 'Ext.form.FormPanel',
    
    
        initialize: function() {
            // Configure component
            this.add([
            {
                xtype: 'textfield',
                name: 'test',
                label: 'test',
                listeners: {
                    change: function() { console.warn('change'); },
                    focus: function() { console.warn('focus'); },
                    blur: function() { console.warn('blur'); },
                    keyup: function() { console.warn('keyup'); }
                }
            }
            ]);
    
    
            this.callParent();
        }
    
    
    });
    Everything works flawlessly (events are firing),

    However, can't make it work like this :

    Code:
    Ext.define('MyApp.view.test', {
    
        id: 'test',
        alias: 'widget.test',
        extend: 'Ext.form.FormPanel',
    
    
        initialize: function() {
            // Configure component
            this.add([
            {
                xtype: 'myphone'
            }
            ]);
    
    
            this.callParent();
        }
    
    
    });
    Code:
    Ext.define('MyApp.element.myphone', {
    
        alias: 'widget.myphone',
        extend: 'Ext.field.Text',
    
    
        config: {
            name: 'mobile',
            label: 'test',
            enableKeyEvents: true,
    
    
            listeners: {
                change: function() { console.warn('in'); },
                keypress: function() { console.warn('in'); },
                keyup: function() { console.warn('in'); },
                render: function() { console.warn('in'); }
            }
            //useClearIcon: true
        },
    
    
    });
    It does not work anymore ... Any ideas ?

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Answers
    5
    Vote Rating
    3
      0  

    Default

    Maybe it should be in the bug section.

    One possible workaround :

    Code:
    {xtype:'phone', listeners: MyApp.element.myphone.prototype.config.listeners}

  3. #3
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Answers
    2
    Vote Rating
    -1
      0  

    Default

    Well if you're using lazy loading (Ext.Loader) you need to add a require line to your FormPanel before you can use the xtype.

    Code:
    requires: 'MyApp.element.myphone'
    That being said, I'm not sure Ext.Loader is able (without configuration that is) to locate your myphone classe file unless you put it in app/element/myphone.js

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Answers
    5
    Vote Rating
    3
      0  

    Default

    I'm not using Lazyloading.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28
    Vote Rating
    11
      0  

    Default

    I think it is because specifying the listeners config inside of the config object when defining a view might not work. (this would be kind of a bug).

    However, usually you wouldn't want to define your listeners inside of the config object like that anyway, since you couldn't reference any functions on the class yet. As soon as you want to replace your placeholder handlers with actual methods existing on that class, you would have to move them anyway. I think in your case your View should look more like this.

    PHP Code:
    Ext.define('MyApp.element.myphone', {
        
    alias'widget.myphone',
        
    extend'Ext.field.Text',

        
    config: {
            
    name'mobile',
            
    label'test',
            
    enableKeyEventstrue
            
    //useClearIcon: true
        
    },

        
    initialize: {
            
    this.on({
                
    change'onChange',
                
    keypress'onKeyPress',
                
    keyup'onKeyUp',
                
    painted'onPainted'
            
    });
        },

        
    onChange: function() {},
        
    onKeyPress: function() {},
        
    onKeyUp: function() {},
        
    onPainted: function() {}
    }); 

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Answers
    5
    Vote Rating
    3
      0  

    Default

    Sounds great, however i only have onPainted that gets triggered. All other dom-based event does not work, even with your method. Can you confirm this bug ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •