How to use the Ext.ux.form.field.MultiMonth component in Architect 2.1 ?

[dnoizet]

Hello,

I'm trying to use the Ext.ux.form.field.MultiMonth component available at https://market.sencha.com/users/30/extensions/61 in Sencha Architect, but I cannot get it to work. It doesn't even come in .xdc format so I can't add it to the toolbox.

Is there a way to add the component to the toolbox, so that I could drag n drop it where I need?

In my application, I did the following:

Added a Loader and a "requires" section:

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        Ext: '.',
        'Ext.ux': 'lib/extjs_plugins/ux'
    }
});

Ext.application({

    requires: [
        'Ext.ux.form.field.MultiMonth'
    ],
[...]
);

"lib/extjs_plugins/ux" being the path of the "ux" directory relative to the root of my Sencha Architect application.

However I still cannot add the component to any container. It seems to be invisible although the browser dev tools show that the component files are found and loaded.

Any help would be very appreciated, and a minimal and working example would be better again.

Best regards,

Gabriel

[dnoizet]

I'd really like an answer here. I found a workaround, but it is more of a hack than a solution, so if there is a better solution, I'll be happy to hear it.

Here is my hack:

1. Add a container in the Views node
2. Set the container's "userClassName" config to "MultiMonthContainer"
3. Set the MultiMonthContainer's "userAlias" config to "multimonthcontainer"
4. Delete the MultiMonthContainer's "width" and "height" configs
5. Ensure that MultiMonthContainer's layout is set to "auto"
6. Jump to MultiMonthContainer'scode view
7. Click on the "Create Override" button
8. Added the following "initComponent" function after the "override" config:

initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'multimonthfield',
                    fieldLabel: 'Période',
                    labelAlign: 'top',
                    labelSeparator: ' :',
                    format: 'M Y',
                    displayRangeSeparator: " à ",
                    rangeSeparatorRE: /\s*à\s*/,
                    startingMonthText: "Mois début",
                    endingMonthText: "Mois fin",
                    okText: "OK",
                    cancelText: "Annuler",
                    clearText: "Réinitialiser"
                }
            ]
        });

        me.callParent(arguments);
    }

And finally I can drag and drop the "MultiMonthContainer" container to where I want to use it and select the "Link" button when asked.

Note that the MultiMonth field is not rendered in Architect, nor can I modify its config in the Config pane. So that's not convenient at all.

[dnoizet]

I would really, *really* like to have someone's advice on this, if that's not too much to ask. How to use components from the Sencha Market in Sancha Architect, anyway?

[dnoizet]

Up