如何在Ext JS的items数组中重复firstRowButtons组件达MaxNumber次？

Sure thing! Since you can't directly embed a loop inside an Ext JS items array literal, here are two straightforward solutions to repeat your firstRowButtons component exactly MaxNumber times:

Solution 1: Pre-generate components with a for loop #

First, create an array of your repeated button components, then merge it into your main items array using the spread operator (...):

// Create the repeated buttons array
const repeatedFirstRowButtons = [];
for (let i = 0; i < MaxNumber; i++) {
    repeatedFirstRowButtons.push({ xtype: 'firstRowButtons' });
}

// Build your full component configuration
items: [
    ...repeatedFirstRowButtons, // Insert all repeated buttons here
    {
        margin: '10 50 10 50',
        padding: '10 20 10 20',
        xtype: 'textfield',
        name: 'Name',
        fieldLabel: 'Survey Name',
        maxLength: 100,
        allowBlank: false,
        disabled: true
    },
    {
        margin: '10 50 10 50',
        padding: '10 20 10 20',
        xtype: 'combo',
        fieldLabel: 'Number of Questions',
        name: 'NofQuestions',
        queryMode: 'local',
        store: ['1', '2', '3'],
        displayField: 'noOfQuestions',
        autoSelect: true,
        forceSelection: true,
        disabled: true,
    }
],
{
    padding: '10 10 10 10',
    xtype: 'secondRowButtons'
}

Solution 2: Concise one-liner with Array.from #

If you prefer a shorter syntax, use Array.from to generate the repeated components directly in the items array:

items: [
    // Generate MaxNumber instances of firstRowButtons
    ...Array.from({ length: MaxNumber }, () => ({ xtype: 'firstRowButtons' })),
    {
        margin: '10 50 10 50',
        padding: '10 20 10 20',
        xtype: 'textfield',
        name: 'Name',
        fieldLabel: 'Survey Name',
        maxLength: 100,
        allowBlank: false,
        disabled: true
    },
    {
        margin: '10 50 10 50',
        padding: '10 20 10 20',
        xtype: 'combo',
        fieldLabel: 'Number of Questions',
        name: 'NofQuestions',
        queryMode: 'local',
        store: ['1', '2', '3'],
        displayField: 'noOfQuestions',
        autoSelect: true,
        forceSelection: true,
        disabled: true,
    }
],
{
    padding: '10 10 10 10',
    xtype: 'secondRowButtons'
}

Both methods work by pre-building the array of repeated components before integrating them into the Ext JS configuration. This avoids the restriction of not being able to use loops directly inside the array literal, while keeping your code clean and maintainable.

内容的提问来源于stack exchange，提问作者harunB10