How do extjs 5 @example in JSDuck.?

Just like in some sencha docs I would like to have examples of my classes on the documentation pages.

I believe JSDuck is made for ExtJS 4 but Sencha uses it for ExtJS 5 so I am hoping on some help on how to do this. Also for others who want the same.

Here is how far I got....

1) I created a jsduck.json with the following in it:

Code:

{
    "--title": "MY - API",
    "--": [
        "."
    ],
    "--output": "path_to_output_docs",
    "--welcome": "docs/readme.html",
    "--guides": "docs/guides.json",
    "--eg-iframe": "docs/eg-iframe.html",
    "--external": [
            "Ext.*"
        ]
}

2) Create shell script createdoc.sh:

Code:

# Create jsduck documentation.
jsduck

# Create symlink to extjs @ documentation loaction.
ln -s Path_To_Ext-5.1.0/build path_to_output_docs/extjs-build

Problem 1

I want an example like:

Code:

 /**
 *     @example
 *     Ext.create('myclass',{
 *         renderTo: Ext.getBody()
 *      });
 */

The code shows in the documentation, when I try to 'live preview' it I get the error:

'TypeError: object is not a function'

How do i fix this.?

Problem 2

So I try an example with an ExtJS class:

Code:

 /**     @example
 *     Ext.create('Ext.form.Panel', {
 *         title: 'Contact Info',
 *         width: 300,
 *         bodyPadding: 10,
 *         renderTo: Ext.getBody(),
 *         items: [{
 *             xtype: 'textfield',
 *             name: 'name',
 *             fieldLabel: 'Name',
 *             allowBlank: false
 *         }, {
 *             xtype: 'textfield',
 *             name: 'email',
 *             fieldLabel: 'Email Address',
 *             vtype: 'email'
 *         }]
 *     });
 */

This does work in the documentation but without theme.

So all white with font 'times new roman' with 2 very small input fields.

How do i fix this?

How do extjs 5 @example in JSDuck.?