PDA

View Full Version : Broken Fiddle preview when embedded in the forum thread



mx_starter
28 Dec 2016, 1:15 AM
This thread shows the fiddle with unformatted code within (can not tell if it is the only case):

https://www.sencha.com/forum/showthread.php?332221-Custom-component-advise-needed


Snapshot (just in case it gets fixed):

55702

mitchellsimoens
28 Dec 2016, 5:06 AM
While looking into exactly is tripping the JS error, one thing I notice is you have jquery and jquery-ui full source saved in your fiddle. Not really the recommended approach. For this I would have created remote javascript assets and loaded them against their CDN sources. Not sure if you saw the options for remote assets:

55704

jQuery CDN is listed at https://code.jquery.com/ and you could have used these urls:

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js

And of course whatever theme CSS url like: https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css

A fiddle would then be:

1na8

mx_starter
28 Dec 2016, 5:49 AM
Agree, i do know about the remote assets (actually, i use them) and will tend to use them instead in the future.

To be honest, there is one thing, that is unclear to me:

In the Fiddle Docs: https://docs.sencha.com/fiddle/guides/working_with_files.html,
you mentioned that "remote resources are added to the running fiddle after the framework JS and CSS resources".

However, it is unclear if this is true for the locally added JS files (it is mentioned for the local CSS files).

Thanks for your patience

mitchellsimoens
28 Dec 2016, 5:53 AM
No, local javascript files are not added automatically. These are usually Ext JS classes that you can then require in your code like you would when developing an Ext JS app. What you were doing was fine by adding a script element in index.html for non-Ext JS classes but for things like jquery it'd be best for remote assets. Here is what is automatically included and not:

local javascript: not included
remote javascript: included
local css: included
remote css: included
local html: not included (index.html will automatically be included in the <body>)

mx_starter
28 Dec 2016, 6:38 AM
No, local javascript files are not added automatically. These are usually Ext JS classes that you can then require in your code like you would when developing an Ext JS app. What you were doing was fine by adding a script element in index.html for non-Ext JS classes but for things like jquery it'd be best for remote assets. Here is what is automatically included and not:

local javascript: not included
remote javascript: included
local css: included
remote css: included
local html: not included (index.html will automatically be included in the <body>)

It is clarified to me now.
I believe it will be useful if you mention this in the fiddle docs