mixin automatic getter/ setter & initialization

**hiroprotagonist** · 27 Mar 2012 10:53 PM

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

**Jamie Avins** · 28 Mar 2012 8:12 AM

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);
        }});

**Jamie Avins** · 28 Mar 2012 8:13 AM

Let me know if you have questions.

**hiroprotagonist** · 28 Mar 2012 12:08 PM

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!

mixin automatic getter/ setter & initialization

Thread Tools

Search Thread

Display

mixin automatic getter/ setter & initialization

mixin automatic getter/ setter & initialization