1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    7
    Vote Rating
    2
    eldono is on a distinguished road

      0  

    Default Unanswered: Ext.define problems (loses layout and this reference)

    Unanswered: Ext.define problems (loses layout and this reference)


    Hello,
    I'm using extjs 4.1.1 and trying to "extend" the Window object just for configuration purpose.
    If I try something like:

    Code:
    Ext.define('MyWindow', {
       extend : 'Ext.Window',
       config: {
           layout : 'fit',
           width : 350,
           height : 300,
           modal: true,
           items: [ Ext.create('Ext.form.Panel', {
                 [...]
            }]
        }
    });
    The window doesn't have a correct "layout" and if I resize it the form doesn't adapt to it.
    Am I doing something wrong? If I remove the config word and set all configuration properties in the defines configuration everything works as expected.

    Another "strange" problem that has no workaround is when declaring window buttons:

    Code:
    Ext.define('MyWindow', {
        extend : 'Ext.Window',
        alias : 'solarisistemi.listarichiestefiltro',
        requires : [ 'Ext.form.*', 'Ext.window.Window' ],
        layout : 'fit',
        width : 350,
        height : 300,
        minWidth : 300,
        minHeight : 200,
        buttonsAlign: 'center',
        buttons : [{
            text : 'Reset',
            scope: this,
            handler : function() {
                 // Here this is the window object
            }
        }]
    })
    In ExtJS 3 it was possible to define the "this" scope for this kind of situation. How can I do it in 4.1.1?

    Thanx

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Below is a simple window extension which also addresses the button scope issue. Note that I assigned a widget alias of 'mw' to the extended Window, which you can then use with Ext.ComponentQuery, up(), down(), etc.

    Code:
    Ext.define('MyWindow', {
      extend : 'Ext.window.Window',
      alias: 'widget.mw',
      bodyPadding: 5,
      height : 300,
      layout : 'fit',
      modal: true,
      width : 350,
      saySomething: function(message) {
        Ext.Msg.alert(message, 'Button Handler Message');
      },
      items: [{  
        xtype: 'panel',
        title: 'Inner Panel'
      }],
      buttons: [{
        text: 'Do Something',
        handler: function(button, event) {
          button.up('mw').saySomething('The Do Something button was clicked.');
        }
      }]
    });
    
    // create a test instance of the Window.
    Ext.create('MyWindow').show();
    The use of the 'widget' alias also allows you to create object instances via xtype and override any default config:

    Code:
    var windowConfig = {
      xtype: 'mw',
      height: 200,
      width: 500,
      <...>
    }
    Last edited by friend; 23 Jul 2012 at 11:30 AM. Reason: clarity

Thread Participants: 1

Tags for this Thread