CODEWITHSUNDEEP
extjs
Oliver Watkins
Oliver Watkins

Reputation: 13509

Declaring Default Values in Config

I have a situation where I have a number of components in a column layout with alternating width, ie .75 then .25.

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',

    items: [{
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }, {
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }, {
        xtype: 'textfield',
        columnWidth: .75
    }, {
        xtype: 'textfield',
        columnWidth: .25,
    }

    ]
});

Ext.onReady(function() {
    Ext.create('MyApp.view.TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

Is there any way of storing these two values in a config object? I don't want to have to change everything every time someone wants a width change. I can't set a default value, because it is not just one value which i want to change.

I was thinking that it might be possible somehow to apply these values to the config object in a constructor, or I was thinking there might be a possible solution that looks like this :

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',

    config: {
        colWidth1: .75,
        colWidth2: .25
    }


    items: [{
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth1'
    }, {
        xtype: 'textfield',
        columnWidth: 'colWidth2'
    }

    ]
});

Ext.onReady(function() {
    Ext.create('MyApp.view.TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

https://fiddle.sencha.com/#fiddle/1ccj

Upvotes: 1

Views: 662

Answers (1)

Stuart
Stuart

Reputation: 3258

The simplest option would be to define the items in the initComponent method as I don't think it's possible to link things to config options using declarative configuration.

Unfortunately I don't think you can use a ViewModel and the bind config as the columnWidth config doesn't have a setter.

Check out this fiddle for an example - https://fiddle.sencha.com/fiddle/1ccq/

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'column',


    initComponent: function(){
        var colWidth1 = .75,
            colWidth2 = .25;

        Ext.apply(this, {
            items: [{
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }, {
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }, {
                xtype: 'textfield',
                columnWidth: colWidth1
            }, {
                xtype: 'textfield',
                columnWidth: colWidth2
            }
            ]
        });

        this.callParent(arguments);
    }
});

Upvotes: 4

Related Questions