First steps with the Designer: One question

[wurstkuchen]

Hey,

I'am doing my first steps with the Designer and now I have a question about the code the Designer is creating.

This is for example the code it creates:

Ui = Ext.extend(Ext.Window, {
    title: 'New Window',
    width: 384,
    height: 224,
    layout: 'auto',
    activeItem: 0,
    initComponent: function() {
        this.fbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'Neuer Button'
                },
                {
                    xtype: 'button',
                    text: 'Abbrechen'
                }
            ]
        };
        this.items = [
            {
                xtype: 'fieldset',
                title: 'Field One',
                layout: 'form',
                items: [
                    {
                        xtype: 'combo',
                        fieldLabel: 'Label',
                        anchor: '100%',
                        store: 'TheDataStore',
                        shadow: false,
                        hideLabel: true
                    }
                ]
            },
            {
                xtype: 'fieldset',
                title: 'Field Two',
                layout: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '',
                        anchor: '100%',
                        hideLabel: true
                    }
                ]
            }
        ];
        Ui.superclass.initComponent.call(this);
    }
}); 

I want my fields as new objects which are created before and then get listet in the item tag of the window.

Something like this:

Field1 = new Ext.form.Checkbox({
        id: 'Field1',
        fieldLabel: 'Field1',
        checked: true,
        width: 50,
        allowBlank: true
    });

   Field2 = new Ext.form.Checkbox({
        id: 'Field2',
        fieldLabel: 'Field2',
        checked: true,
        width: 50,
        allowBlank: true
    });

TheNewWindow = new Ext.Window({
        id: 'TheNewWindow',
        title: 'The Window',
        closable: true,
        width: 575,
        height: 700,
        plain: true,
        layout: 'fit',
        closeAction: 'hide',
        items:[Field1,Field2],
        buttons: [{
            text: 'Abbrechen'
        }]
    }); 

Is this possible?

Thank you!

[jarrednicholls]

The Designer will only export your "top level" components...top level meaning the components that are at the root level of your Components tree on the right-hand side. However, if you switch from Design view to Code view, and then highlight your individual sub-components, you can use the "Export Code to Disk" and/or "Copy Code to Clipboard" functions at the top of the Code view. You can then manually construct your components and add them as items to your container in your code.

[Schlurcher]

Would be nice if we could mark sub-components to be treated as root components and automatically be exported as such if you hit the Export Project button. Also whats kind of show stopper for me is that some config options and components are missing and your only option to get some things (especially plugins) to work the way that you want is to dive into the ui.js file. Which of course would get overwritten as soon as you export again, so you have to copy it somewhere save and add changes manually. Always feels like a huge fork in the road once you reach that point.

[jarrednicholls]

We are undergoing a configuration refactor to support everything. However, you should make manual configurations or modifications in your .js file, not your .ui.js file. Your .js class inherits from your .ui.js class. Your suggestion isn't bad, we'll consider it for a future release. Thanks!

[Schlurcher]

I am well aware that fiddling around with the ui.js file means crossing a point of no return, but with the current version of the Designer, some things simply can't be done otherwise.

As far as I understand the generated code, the only proper way to access the generated UI is AFTER initComponent, which for some things is simply too late. Or am I missing something here?

[jarrednicholls]

Correct, to access working/instantiated components, (e.g., via their "ref"), you do so after the superclass' initComponent is called (note, some visual behavior must only happen after the component is rendered, see the "render" event). Before that though, you can apply configuration options to your class directly (and sub-components in the "items" collection as well), including specifying plugins.

With that said, you shouldn't "have" to do that with most configurations. When we add support for missing options, then this will be less of an issue for you. It's generally fine to set configurations on the .js class prototype or within the initComponent call directly, but accessing sub-component configurations in the "items" collection to set certain configuration options there can be burdensome.