Problem with adding CUSTOM CODE to an object

[fmrc]

I'd like to setup a custom anims object which is not in the Config panel of SA. It should be something like:
config: {
anims: {
next : {
type: 'slide',
direction: 'left'
}
previous : {
type: 'slide',
direction: 'right'
}
}
},

I've tried to add an object "anims" in the config panel. But after taping the code, it is automatically changed into:

config: {
anims: 'next : {\n type: \'slide\',\n direction: \'left\'\n}\nprevious : {\n type: \'slide\',\n direction: \'right\'\n}'
}

So what's the trick to get around this? I gather inserting custom code is very common when using Sencha Architect, isn't it? Thank you in advance.

[tyladurdan]

I had the same problem....but it will work if you write the text in this format:

{ animas: blah blah blah }

...all on one line

:-)

[aconran]

This occurs when what you put in is unable to be validated/is not a valid JS Object.

If you look closely at what you pasted, you will notice that there is a missing , after the `next` object. In the forthcoming Architect 2.2, we provide more warning that it was unable to validate the object (in addition to using a string instead of an object)

[fmrc]

Thank you for your help.
If I add a custom property called "anims", which is a string, following ST's syntax, in a single line:


{next : {type: 'slide', direction: 'left'}, previous : {type: 'slide', direction: 'right'}}


I get this:


config: {
anims: '{next : {type: \'slide\', direction: \'left\'}, previous : {type: \'slide\', direction: \'right\'}}'
}


====


I've also tried without inserting commas:


{next : {type: slide, direction: left}, previous : {type: slide, direction: right}}


I get then:


config: {
anims: '{next : {type: slide, direction: left}, previous : {type: slide, direction: right}}'
}

Surely I'm doing something wrong, but I don't get what.

[aconran]

Ah! Thanks for the screenshot, helps immensely.

You've set the anims property to a string, look to the left where the "..." is, if you click on that and select object things should work for you.

[fmrc]

You're right. That was tyladurdan's advice but I mixed things up. The code is now correct:

Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',


config: {
anims: {
next: {
type: 'slide',
direction: 'left'
},
previous: {
type: 'slide',
direction: 'right'
}
}
}
});

Thank you very much