[HELPED] How to Use my ComboBox extension in Architect?

[Scott]

I have created an extension to ComboBox and trying to figure out how to add it to my project in Architect. If I manually edit the myWindow.js file to add an item to my form like

Ext.create('SalesLeads.shared.States', {
fieldLabel: 'Foo'
})

then everything works like I want. This tells me I have created the extension correctly.

Do I have to create a user extension to be able to use this within Architect?
I have tried adding a ComboBox and changing 'CreateAlias' to 'SalesLeads.shared.States', this creates the item like

{
xtype: 'SalesLeads.shared.States',
fieldLabel: 'Label'
}

Although this doesn't give me any errors on the console it doesn't display any combo box at all.

I did find the instructions for creating User Extensions to Architect but was trying to determine if that is necessary or if there was a simpler way that I am missing. Once I get this part worked out then I can move my extension to a shared directory outside of any particular project.

Thanks,

Scott

[richard.milone]

If the name of your app is SalesLeads and the combo box just exists within the shared folder within that app it should be as simple as putting a "requires" on the view class in which you are putting the combo box. If it's outside of your app then you will need to add a path to the loader config at the Application level. If you describe the app structure a little more I can help you further. You don't need to do anything complicated with user extensions.

[Scott]

Right now the combo box is within the app I am working on but ultimately I would like outside so it can be used in other apps. I was having difficulty getting it all tied together when outside the app so I simplified in order to try and get it figured out.

What I would really like to do is this:

My apps are in a folder '/davisapps/apps' so the SalesLeads app is in '/davisapps/apps/SalesLeads'. I would like to put my reusable components under a folder '/davisapps/shared'.


In my reusable combo box I it currently has the below, I assume I need to change the part in define also to match where this resides?

Ext.define('SalesLeads.shared.States', {
extend: 'Ext.form.field.ComboBox',.............

[eweiler]

Here are some examples where I set paths with the loader and referenced objects. You need to set the alias if you want to reference your component with the xtype.

In an App file:

Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths : {
'MyControls.ux' : '/valence/apps/resources/controls'
}
});

http://docs.sencha.com/extjs/4.2.2/#...thod-setConfig

Component File:

Ext.define('MyControls.ux.YNCheckbox', {
extend: 'Ext.form.field.Checkbox',
alias: 'widget.yncheckbox',
....

http://docs.sencha.com/extjs/4.2.2/#...lass-cfg-alias

In use:

{
xtype : 'yncheckbox'
}

[Scott]

I am so close but only get a line instead of my combo box and no errors in the console.

My App file:

Ext.Loader.setConfig({
    disableCaching: false,
    enabled: true,
    paths: {
        'davisapps.shared': '/davisapps/shared'
    }
});

My component:

Ext.define('davisapps.shared.States', {
    extend: 'Ext.form.Field.ComboBox',
    alias: ['widget.States'],
 .....

And the combo box on my form:

                        {
                            xtype: 'States',
                            fieldLabel: 'Label'
                        }

[eweiler]

Use a lowercase f in field for 'Ext.form.Field.ComboBox' in your extends

[Scott]

Thank you so much, that fixed it for me. The sad part is that I had two copies of this extension, the one outside my app that I really wanted and one inside my app for trying to make it work. I fixed that 'f' in the one inside my app Friday but never changed the one outside my app, I had forgot that. Lesson learned.

Again, thank you very much for your help!!!