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

Creating a simple Sencha component using a loop

本文关键字：简单 一个 Sencha 组件 循环 创建      更新时间：2023-09-26

如何在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}, 
               }
              ]
        });
    }
});

这些都是非常基础的东西——我建议您在投入时间学习框架之前先熟悉一下基本的语言结构。有几种方法可以做到这一点…

参见:MDN: A reintroduction 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
        });
    }
});

…或者当你在全局执行范围内，你不想用不必要的变量污染 window 对象时——或者只是在"一行程序"上有一个OCD——你可以利用内联函数/闭包:

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};
    })
});
相关文章：