@cfg

Synopsis:

@cfg
Documentation for the config option.

@cfg name
Documentation for the config option.

@cfg {Type} name
Documentation for the config option.

@cfg {Type} name (required)
Documentation for the config option.

@cfg {Type} [name="default value"]
Documentation for the config option.

@cfg {Type} name.subproperty
Documentation for the config option subproperty.

Documents the config option: its name, type and default value.

Example:

/**
 * @cfg {Boolean} [hidden=false]
 * True to hide panel initially.
 */

Auto-detection

See the auto-detection documentation for @property. The only difference with config options is that you need to always include @cfg tag - otherwise it will be treated as a property.

Objects and functions as config options

The syntax is the same as used for @param tag:

/**
 * @cfg user A user record
 * @cfg user.name The name of the user.
 * @cfg user.email The email of the user.
 */
user: {},

See @param for more details. Configs of Function type are an odd case, but if you really want to, you can have them and even document the parameters.

Required config options

All config options (as the name tells) are optional by default. To document them as required add (required) after the name:

/**
 * @cfg {Ext.data.Store} store (required)
 */

Accessors

Ext4 generates get/set accessor methods for the configs defined inside config: {} block. JSDuck doesn't recognize this automatically, so an @accessor tag needs to be added to each such config:

Ext.define("MyClass", {
    config: {
        /**
         * @cfg {Ext.data.Store} store (required)
         * The store to use for this view.
         * @accessor
         */
        store: undefined
    }
});

JSDuck will then generate documentation for the getters and setters as if you had written:

Ext.define("MyClass", {
    config: {
        /**
         * @cfg {Ext.data.Store} store (required)
         * The store to use for this view.
         * @accessor
         */
        store: undefined
        /**
         * @method setStore
         * Sets the value of {@link #store}.
         * @param {Ext.data.Store} store
         */
        /**
         * @method getStore
         * Returns the value of {@link #store}.
         * @return {Ext.data.Store}
         */
    }
});

Additionally the config options may be defined inside eventedConfig: block. In such case you also need to include an @evented tag:

Ext.define("MyClass", {
    eventedConfig: {
        /**
         * @cfg {Ext.data.Store} store (required)
         * The store to use for this view.
         * @accessor
         * @evented
         */
        store: undefined
    }
});

This will result in documentation for event <cfg-name>change to be created. In the above case it's as if you had also documented the following event:

/**
 * @event storechange
 * Fires when the {@link #store} configuration is changed by {@link #setStore}.
 * @param {MyClass} this The MyClass instance.
 * @param {Ext.data.Store} value The new value being set.
 * @param {Ext.data.Store} oldValue The existing value.
 */