Get get something of statics properties of Ext.Container when creating item

Question

I have following issue. I have created container with inheriting of Ext.Container and creating some items using items array. In constructor I'm have asynchronous logic and fill some static properties. I want to use value of this static properties when creating items of container. How I can solve this problem? This is important part of my logic.

Ext.define('somename', {
    extend: 'Ext.Container',
    xtype: 'somextype',
    id: 'someid',
    statics: {
        property1: false,
        property2: null,
        property3: null
    },
    config: {
        dataAutoId: 'someid',
        items: [{
            xtype: 'panel',
            html: 'so here i want to use value of property1',
            cls: 'some',
            id: 'someid',
            dataAutoId: 'someid'
        }]
    },
    constructor: function () {
        this.callParent(arguments);

        // here i have implemented some asinhronous logic
        // and as a result set value of property1 
        var statics = this.statics();
        statics.property1 = 'test string';
    }
});

I have tried:

html: this.statics.property1 

and

html: this.statics().property1 

but get error:

Uncaught Error: The following classes are not declared even if their files have been loaded.

Edit:

After reading documentation of Sencha Touch 2 I found a solution. Asynchronous logic can be done into constructor after this we can add items to container. This decision may cause problems if the asynchronous logic take a long time. For this reason it's nice to show a spinner or something similar. This is example code of the solution.

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    static: {
         title: null
    },
    config: {
        tabBarPosition: 'bottom'
    },
    constructor: function () {
        this.callParent(arguments);
        var statics = this.statics();
        statics.title = 'test string';
        this.renderItems();
    },
    'renderItems': function() {
        var statics = this.statics();
        this.add([{
            title: statics.title,
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Welcome to Sencha Touch 2'
            },

            html: [
                "dfdfhfjYou've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                "and refresh to change what's rendered here."
            ].join("")
        }, {
            title: 'Get Started',
            iconCls: 'action',

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Getting Started'
            }, {
                xtype: 'video',
                url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }]
        }]);
    }
});

Thanks to everyone who gave me advice.

Answer 1

You can't databind in this way. The view is first loaded by the framework and later on instantiated. This means that if you want to set html: this.property1 your static properties not have a value yet.

This works:

Ext.define('Fiddle.view.somename', {
    extend: 'Ext.Container',
    xtype: 'somextype',
    id: 'someid',
    statics: {
        property1: false,
        property2: null,
        property3: null
    },
    config: {
        dataAutoId: 'someid2',
        items: [{
            xtype: 'panel',
            html: 'so here i want to use value of property1',
            cls: 'some',
            id: 'someid3',
            dataAutoId: 'someid'
        }]
    },
    constructor: function () {
        this.callParent(arguments);

        // here i have implemented some asinhronous logic
        // and as a result set value of property1 
        var statics = this.statics();
        this.property1 = 'test string';
        this.down('#someid3').setHtml(this.property1);
    }
});