Question

我正在尝试使用函数在组件初始化时在组件内创建项目。

请考虑以下事项：

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    config:{    
        items: [{
        xtype: 'textfield',
        name: 'Name',
        label: 'Name'
        }]
});
Ext.application({
    viewport: {
        layout:'fit'        
    },
    launch: function(){
        Ext.Viewport.add(Ext.create('mobi.form.Login'));
    }
})

我试图让mobi.form.login从initialize上运行的函数生成其配置（或者我可以用来覆盖我指定的配置）。

我知道Sencha touch 2有constructor和initialize函数，但它们似乎都有arguments=[]（例如一个空数组）

如果我在ExtJS 4.x中执行此操作，它或多或少会如此：

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    initComponent:function(config){
        config=Ext.apply({}.config,{});//make sure config exists    
        config.items= [{
            xtype: 'textfield',
            name: 'Name',
            label: 'Name'
        }]
    Ext.apply(this, config);
    this.callParent(arguments);
    }
});

Answer 1

您不需要手动调用初始化它已经由构造函数完成，并且在调用此函数时您可以使用this.items访问项目数据并在那里创建面板项目

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    config: {
        items: []
    },

    initialize : function()
    {
        this.items = [Ext.create({
             xtype: 'textfield',
             name: 'Name',
             label: 'Name'
        })];

        this.callParent();
    }
});

Ext.application({
    viewport: {
        layout:'fit'        
    },
    launch: function(){
        Ext.Viewport.add(Ext.create('mobi.form.Login'));
    }
})

Answer 2

如果您想要这样做，可以使用constructor或initialize。

您将用于同步逻辑的构造函数，它将很快并且您希望在组件初始化之前发生。您可以通过构造函数的第一个参数访问配置：

Ext.define('MyComponent', {
    extend: 'Ext.Component',

    constructor: function(config) {
        console.log(config);

        this.callParent([config]);
    }
});

Ext.application({
    launch: function(){
        Ext.create('MyComponent', { test: 1 })

        // Will log out:
        // {
        //     test: 1
        // }
    }
});

请记住，总是需要callParent与构造函数中的config / arguments。

在任何其他情况下，您应该使用initialize >所有配置初始化后的。 :)我们在内部使用它来添加监听器。

initialize: function() { this.on({ ... }); }

Answer 3

使用以下内容：

Ext.apply(this, {
    items: [
 .... 
    ]
});

Answer 4

你尝试过类似的东西吗？我只是将配置对象传递给Ext.create，虽然我现在无法测试它。见http://docs.sencha.com/touch/1-1/#!/api/Ext-method-create

Ext.Viewport.add(Ext.create(
    {
        xtype: 'mobi.form.Login',
        items: [ /*A list of items*/ ]
    }
));

您也可以将此代码段添加到自己的函数中，将项目作为参数。希望这能解决你的问题！

在initialize函数中定义对象的项目

4 个答案: