Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    48
    Vote Rating
    1
    hiroprotagonist is on a distinguished road

      0  

    Default mixin automatic getter/ setter & initialization

    mixin automatic getter/ setter & initialization


    Sencha Touch version tested:
    • 2.0.0 release
    Browser versions tested against:
    • chrome, safari on ipad
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:

    This was my first try to use mixins as described in docs-> "Mixins are just classes".
    So I defined a class with some config properties, a constructor, initialize method etc. (have a look onto the tester I provided)
    I had a look onto the sources how e.g. Ext.dataview.DataView uses the selectable mixin.
    It calls the constructor of the mixin in its constructor to initialize the mixin.

    I reproduced the same, and afterwards I set some information to the mixin class by using the automatic getter and setter created by the config methods. These getter/ setter are initially available but vanish after
    setting a value.

    (->GenerateSetter method in line 5217, class Ext.class )
    Code:
    delete this[getName];
    Afterwards getter are not available anymore, thus fail on call.

    Two questions:
    1. As these mixins should just be classes like all the others, I guess this is supposed to work?
    2. Most of the Sencha Touch classes provide out of the box functionality for initialization, why does the mixins work different?
    ->Did I do the right thing?

    Steps to reproduce the problem:
    Just run the code in test case.

    The result that was expected:
    working setter and getters.

    The result that occurs instead:
    exception that method is not available due to removal as described above.

    Test Case:
    Code:
     Ext.Loader.setPath('Ext', '../touch');
    Ext.Loader.setConfig({ enabled: true });
    
    
    Ext.application({
        app:'textmixin',
        autoCreateViewport: true,
        launch: function()    {
            Ext.define('textmixin.mixin.testable', {
                extend:'Ext.EventedBase',
                config: {
                    testPropertyBool:false,
                    testPropertyString: 'defaultvalue'
                },
                test: function(param){
                    var testpropbool= this.getTestPropertyBool(),
                        testpropstring= this.getTestPropertyString();
                    
                    alert(Ext.String.format('These properties are set: {0}, {1}', varpropbool, varpropstring));
                }
            });
            
            Ext.define('testmixin.view.test', {
                extend:'Ext.Panel',
                mixins:{testable:'textmixin.mixin.testable'},
                config:{
                    property1: false,
                    property2:'test'
                    },
                start:function(){
                    this.mixins.testable.test('abc');
                },
                constructor:function(config){
                debugger;
                    this.mixins.testable.constructor.call(this, arguments);
                    this.callParent(arguments);
                    this.mixins.testable.setTestPropertyBool(true);
                    this.mixins.testable.setTestPropertyString('a different value');
                }
            });
            debugger;
            var panel = Ext.create('testmixin.view.test');
            panel.start();
            Ext.Viewport.add(panel);
    }});


    Debugging already done:

    yes, look above.

    Possible fix:
    • not provided
    Operating System:
    • Windows 7/ Chrome / ipad 2

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    The concept is that the mixin will be part of the class you mix it into. You wouldn't want to call anything directly except the constructor. So you example should look like the following:

    Code:
            Ext.application({
                app:'textmixin',
                autoCreateViewport: true,
                launch: function()    {
                    Ext.define('textmixin.mixin.testable', {
                        extend:'Ext.EventedBase',
                        config: {
                            testPropertyBool:false,
                            testPropertyString: 'defaultvalue'
                        },
                        test: function(param){
                            var testpropbool= this.getTestPropertyBool(),
                                testpropstring= this.getTestPropertyString();
    
                            alert(Ext.String.format('These properties are set: {0}, {1}', testpropbool, testpropstring));
                        }
                    });
    
                    Ext.define('testmixin.view.test', {
                        extend:'Ext.Panel',
                        mixins:{testable:'textmixin.mixin.testable'},
                        config:{
                            property1: false,
                            property2:'test'
                            },
                        start:function(){
                            this.test('abc');
                        },
                        constructor:function(config){
                            this.mixins.testable.constructor.call(this, arguments);
                            this.callParent(arguments);
                            this.setTestPropertyBool(true);
                            this.setTestPropertyString('a different value');
                        }
                    });
                    var panel = Ext.create('testmixin.view.test');
                    panel.start();
                    Ext.Viewport.add(panel);
            }});
    Since the configs merge as well, event better would be:

    Code:
            Ext.application({
                app:'textmixin',
                autoCreateViewport: true,
                launch: function()    {
                    Ext.define('textmixin.mixin.testable', {
                        extend:'Ext.EventedBase',
                        config: {
                            testPropertyBool:false,
                            testPropertyString: 'defaultvalue'
                        },
                        test: function(param){
                            var testpropbool= this.getTestPropertyBool(),
                                testpropstring= this.getTestPropertyString();
    
                            alert(Ext.String.format('These properties are set: {0}, {1}', testpropbool, testpropstring));
                        }
                    });
    
                    Ext.define('testmixin.view.test', {
                        extend:'Ext.Panel',
                        mixins:{testable:'textmixin.mixin.testable'},
                        config:{
                            property1: false,
                            property2:'test',
                            testPropertyBool: true,
                            testPropertyString: 'a different value'
                        },
                        constructor:function(config){
                            this.mixins.testable.constructor.call(this, arguments);
                            this.callParent(arguments);
                        }
                    });
                    var panel = Ext.create('testmixin.view.test');
                    panel.test('abc');
                    Ext.Viewport.add(panel);
            }});

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Let me know if you have questions.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    48
    Vote Rating
    1
    hiroprotagonist is on a distinguished road

      0  

    Default


    Jamie,

    just had a look onto your suggestion and wondered, why I didn't came to this by myself. Sometimes it can be so obvious :-). I'll will check it in my code.

    Thanks a lot!

Thread Participants: 1