Edit designed config

[froamer]

Hi, I love the new designer and I have bought my upgrade in anticipation of the final release.

However I would love the ability to programmatically adjust the generated config before it is used in initComponent.

At the moment the generated initComponent contains the generated config and and turns it into objects all in one. This means all I can do is override the initComponent where I can either hook in when there is none of the designed config or run callOverridden after which the config has been turned into objects.

If the designer created a method called something like "designedConfig" and the initComponent called that, I could override designedConfig and manipulate it before it is used.

Why would I want to do this? Because the designer although excellent does not contain everything I may need. Here's an example...

I want to create a Panel called EntityList. It contains a grid, a toolbar, a paging toolbar, some buttons, etc. I want to use this panel linked into windows for listing different entities. Each window will set a custom store property in my panel and the panel will in turn set the store of the grid and the paging toolbar.

Without the ability to adjust the config I would have to let the EntityList completely initialise then adjust it via methods if such methods exist. Not only is this not often possible but it is slower and perhaps causes more flicker.

[aconran]

froamer -

It's a good idea.

It would work something like this. Instead of code generating a class like this:

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 158,
    width: 383,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'fieldset',
                    title: 'My Fields',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Label',
                            anchor: '100%'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'Label',
                            boxLabel: 'Box Label',
                            anchor: '100%'
                        },
                        {
                            xtype: 'checkboxgroup',
                            fieldLabel: 'Label',
                            items: [
                                {
                                    xtype: 'checkboxfield',
                                    boxLabel: 'Box Label'
                                },
                                {
                                    xtype: 'checkboxfield',
                                    boxLabel: 'Box Label'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

It would generate the following:

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 158,
    width: 383,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this,
            config = {
                items: [
                    {
                        xtype: 'fieldset',
                        title: 'My Fields',
                        items: [
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label',
                                anchor: '100%'
                            },
                            {
                                xtype: 'checkboxfield',
                                fieldLabel: 'Label',
                                boxLabel: 'Box Label',
                                anchor: '100%'
                            },
                            {
                                xtype: 'checkboxgroup',
                                fieldLabel: 'Label',
                                items: [
                                    {
                                        xtype: 'checkboxfield',
                                        boxLabel: 'Box Label'
                                    },
                                    {
                                        xtype: 'checkboxfield',
                                        boxLabel: 'Box Label'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };

        Ext.applyIf(me, me.prepareConfig(config);

        me.callParent(arguments);
    },

    prepareConfig: function(config) {
        return config;
    }
});

If you wanted to override prepareConfig to improve the handling of all of your complex configurations, you could do so via an override. It would not affect simple types like strings, numbers and booleans.

A feature like this could probably go in shortly after GA.

[froamer]

Hi Aaron,

That sounds great! I look forward to this feature, it will add much more flexibility in real world projects.