javascript - 使用循环创建一个简单的 Sencha 组件

Question

我们如何在 Sencha ExtJS 中用 for 循环替换硬编码数据？
例如，我定义了以下列表:

Ext.application({  

    launch: function() {

        Ext.create('Ext.List', {
            fullscreen: true,
            itemTpl: '{title}',
            data: [{
                title: 'Item 1'
            }, {
                title: 'Item 2'
            }, {
                title: 'Item 3'
            }, {
                title: 'Item 4'
            }]
        });      
    }
});

如何将数据替换为如下内容:

Ext.application({
    launch: function() {

       Ext.create('Ext.List', {
            fullscreen: true,
            itemTpl: '{title}',
            data: [
               for(int i=0;i<5;i++){
                  {title: 'Item '+i}, 
               }
              ]
        });

    }
});

Answer 1

这确实是基本的东西 - 我建议您在投入时间学习框架之前熟悉基本的语言结构。有多种方法可以做到这一点...

参见:MDN: A re-introduction to Javascript

<小时/>

最简单的方法，首先创建配置数据并将其分配给变量:

Ext.application({
    launch: function() {

        var listData = [];
        for(var i=0;i<5;i++) 
            listData.push({title: 'Item '+i});

        Ext.create('Ext.List', {
            // ...
            data: listData
        });
    }
});

...或者当您处于全局执行范围并且不想用不必要的变量污染 窗口 对象时- 或者只是对“one-liners”有强制症 - 你可以利用内联函数/闭包:

Ext.create('Ext.List', {
    // ...
    data: (function(){
        var data = [];
        for(var i=0;i<5;i++) 
            data.push({title: 'Item '+i});
        return data;
    })()
});

...或者有时我使用以下内容，因为我认为它看起来更整洁(但这是主观的):

Ext.create('Ext.List', {
    // ...
    data: Ext.Array.map(Array.apply(null, Array(5)), function(o,i){
        return {title: 'Item '+i};
    })
});