1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    20
    Vote Rating
    1
    jens13583 is on a distinguished road

      0  

    Default Migration from 1 to 2: no button tap?

    Migration from 1 to 2: no button tap?


    Hi!
    I just downloaded ST2 RC an tried to migrate my page from 1.1 to 2.0, but I'm facing some problems:
    I have a panel with 2 buttons:
    ST1 Code:
    Code:
    var b1 = new Ext.Button({
        text: 'Button1',
        height: '300px',
        width: '350px',
        scope: this,
        handler: function(){
          //
        }
    });
    var b2 = new Ext.Button({
        text: 'Button2',
        height: '300px',
        width: '350px',
        scope: this,
        handler: function(){
          //
        }
    });
    
    MyPanel = Ext.extend(Ext.Panel, {
        fullscreen: true
        ,items: [{
          layout: 'hbox',
          items: [b1,
                  {xtype: 'spacer'},
                  b2]
        }]
        ,initComponent:function() {
          Portal.superclass.initComponent.apply(this, arguments);
      }
    });
    I tried to migrate this small piece of code to ST 2.0.
    ST2 - non-working code:
    Code:
    var b1 = new Ext.Button({
        text: 'Button1',
        height: '300px',
        width: '350px',
        scope: this,
        handler: function(){
          //
        }
    });
    var b2 = new Ext.Button({
        text: 'Button2',
        height: '300px',
        width: '350px',
        scope: this,
        handler: function(){
          //
        }
    });
    
    Ext.define('MyPanel', {
        extend: 'Ext.Panel',
        fullscreen: true
        ,layout: 'fit'
        ,config:{
          items: [{
            layout: 'hbox',
            items: [b1,{xtype: 'spacer'},b2]
          }]}
        ,initialize:function() {
          this.callParent(arguments);
      }
    });
    The buttons are visible, but it is impossible to tap them, the handler function doesn't get called and the class doesn't change to x-button-pressing.
    Now, if I create the buttons within items[], it works. I just don't understand why?!?

    ST2 working code:
    Code:
    Ext.define('MyPanel', {
        extend: 'Ext.Panel',
        fullscreen: true
        ,layout: 'fit'
        ,config:{
          ,items: [{
            layout: 'hbox',
            items: [{xtype: 'button',
                     text: 'Button1',
                     height: '300px',
                     width: '350px',
                     scope: this,
                     handler: function(){
                     }},
                     {xtype: 'spacer'},
                     {xtype: 'button',
                     text: 'Button2',
                     height: '300px',
                     width: '350px',
                     scope: this,
                     handler: function(){
                     }}]
          }]}
        ,initialize:function() {
          this.callParent(arguments);
      }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should not create an instance of a component and use it as an item when using Ext.define. Ext.define should create the component instance itself.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1