Initialize with a parameter

Question

Here is my code, I want to know how put my for-loop limit (IE 8) has a parameter in my constructor, so I could build this view with a specific number of line? And then, how to initialize such view ?

Thank you!

Ext.define('Prototype.view.FoodPanel', {
extend: 'Ext.Panel',
alias: 'widget.foodpanel',

config: {
    height: 455,
    id: 'FoodPanel',
    layout: {
        type: 'vbox'
    },
    scrollable: 'vertical',
    items: [
        {
            xtype: 'panel',
            height: 47,
            id: 'rowTitle',
            layout: {
                type: 'hbox'
            },
            items: [
                {
                    xtype: 'textfield',
                    id: 'column_title_source',
                    width: 100,
                    label: 'Source',
                    labelWidth: '100%',
                    readOnly: false
                },
                {
                    xtype: 'textfield',
                    id: 'column_title_user',
                    width: 100,
                    label: 'User',
                    labelWidth: '100%',
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    id: 'column_title_object',
                    width: 160,
                    label: 'Object',
                    labelWidth: '100%',
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    disabled: false,
                    id: 'column_title_factor',
                    width: 100,
                    label: 'Factor',
                    labelWidth: '100%',
                    readOnly: true
                }
            ]
        }
    ]
},

initialize: function() {
    this.callParent();
    var rows=[];
    for(var i=0; i<8;i++)
    {
        var row = Ext.create(Prototype.view.RowModel);
        if(i===4)
        {
            row.getComponent('mybutton').hide();
        }
        console.log(row.down('#rowLabel')._label);
        rows.push(row);
    }
    this.add(rows);
}

});

Answer 1

By convention, constructors of Ext components are expected to take only one parameter, which is the config object. Doing otherwise would be bad practice.

However, you're free to add what you want in the config...

For example, add a numberOfLines option in the config definition. You can later access the value of the option through this.numberOfLines or the generated getter this.getNumberOfLines():

Ext.define('Prototype.view.FoodPanel', {
    // ...

    ,config: {
        // ...
        /**
         * Here's how you document a config option.
         * 
         * @cfg {Integer} [numberOfLines=8]
         */
        ,numberOfLines: 8 // default value of 8
    }

    ,initialize: function() {
        this.callParent();

        var n = this.getNumberOfLines();

        for (var i=0; i<n; i++) {
            // ...
        }

        // ...
    }
});

Then you can pass the option in the config, as usual:

Ext.create('Prototype.view.FoodPanel', {
    numberOfLines: 20
    // any other option you like...
});