Question

我有以下问题。我创建了继承的容器 Ext.Container并使用items数组创建一些项目。在构造函数中我有异步逻辑并填充一些静态属性。我想用创建容器项时此静态属性的值。我怎么能解决这个问题？这是我逻辑的重要部分。

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

我试过了：

html: this.statics.property1

和

html: this.statics().property1

但得到错误：

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

编辑：

在阅读Sencha Touch 2的文档后，我找到了一个解决方案。在此之后可以在构造函数中完成异步逻辑我们可以添加项目到容器。如果异步逻辑需要很长时间，则此决定可能会导致问题。出于这个原因，展示一个微调器或类似的东西是很好的。这是解决方案的示例代码。

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

感谢所有给我建议的人。

Answer 1

你不能以这种方式数据绑定。视图首先由框架加载，然后在实例化时加载。这意味着如果您想设置html: this.property1，您的静态属性还没有值。

这有效：

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

Answer 2

未捕获错误：即使已加载文件，也未声明以下类

这仅仅意味着您的源文件命名与实际声明的类之间存在不一致。例如，您可能有一个名为Foo.js的文件，但它实际上包含Ext.define('Bar'...。

在构造函数中，我有异步逻辑并填充一些静态属性。我想在使用时使用这个静态属性的值创建容器的项目。我怎么能解决这个问题？

请记住：自从构建Container以来，如果项目在一段时间后添加，那么这种方法才有意义。对items配置中指定的项使用该方法将无法正常工作，因为在完成异步逻辑之前将创建项。因此，如果您需要对items配置中指定的项使用这些静态属性，则必须将异步逻辑置于Container之外，并且只有在属性可用时才构造它。

在创建项

2 个答案: