PDA

View Full Version : How to consume the timyMCE package in my app?



stewardsencha
16 Apr 2014, 9:34 AM
Trying to understand how to consume a package.

I want to use tinyMCE.


RE http://docs.sencha.com/extjs/4.2.2/#!/guide/command_packages
RE http://www.sencha.com/blog/understanding-sencha-cmd-packages


Looks like I can add this to my app.json file



"requires": [
"TinyMCE"
],


Then I run sencha app refresh, then sencha app build, then I have incorporated this package and can use it. No?

The docs just told us to run build or refresh. So the next sentence makes no sense:


Whichever command you run, Sencha Cmd will download and expand the package to your "packages" folder. After this you will find a "packages/ext-easy-button" folder in your workspace.


build and refresh do not download andd install packages, right?

I download and unzip and place TinyMCE in my workspace pakage folder.
I add the requirement to app.json.
I run refresh and build.

The mysterious bootstrap now contains:



Ext.Loader.addClassPathMappings({
"Ext": "../ext/src",
"Ext.Msg": "../ext/src/window/MessageBox.js",
"Ext.rtl.EventObjectImpl": "../ext/src/rtl/EventObject.js",
"Ext.ux.form": "../packages/TinyMCE/src",
"Ext.ux.form.ItemSelector": "../ext/src/ux/form/ItemSelector.js",
"Ext.ux.form.MultiSelect": "../ext/src/ux/form/MultiSelect.js",
"Ext.ux.form.SearchField": "../ext/src/ux/form/SearchField.js",
"ExtThemeNeptune": "../ext/packages/ext-theme-neptune/overrides",


Hmm. That looks confusing. Different paths for Etx.ux.form But the example app in the package is similar:



"Ext.ux.form": "packages/TinyMCE/src",
"Ext.ux.form.ItemSelector": "ext/src/ux/form/ItemSelector.js",
"Ext.ux.form.MultiSelect": "ext/src/ux/form/MultiSelect.js",
"Ext.ux.form.SearchField": "ext/src/ux/form/SearchField.js",


... so I don't worrry about it.

The supplied example has this line is app.js:

Ext.Loader.setPath('Ext.ux.form.TinyMceTextArea','packages/TinyMCE/src/TinyMceTextArea.js');

My app.js looks like this:


Ext.Loader.setPath({
'hank':'../hank',
'crud':'../hank/crud',
'ux':'../ux'
//'Ext.ux.form.TinyMceTextArea':'../packages/TinyMCE/src/TinyMceTextArea.js'
});
Ext.Loader.setPath('Ext.ux.form.TinyMceTextArea','../packages/TinyMCE/src/TinyMceTextArea.js');


Again I am confused. But I think this is just using strings ve objects for the argument to setPaths and no concern.


Now I require it on a form:

requires:[
'Ext.ux.form.TinyMceTextArea'
],

Now when I run in dev mode I see the loader is failing to load:

"...bh/bhw/fox/resources/TinyMCE/ice/ice-master.min.js?_dc=1397668380400".

It is looking for packages in my app folder, not my workspace folder.

So I change "packages" to "../" (also tried "../../").

.../bh/packages/TinyMCE/src/TinyMceTextArea.js?_dc=1397668746174".

Weird. It skips the workspace folder and goes for the one above.

And on and on. I move it around all over the place and can find nothing that makes anyone happy.

Resources and plugins need to be dragged along after the build, I don't see that happening in any case.

Don't know what to ask. How do I consume this package into my app? What simple step have I overlooked?

The docs seem to say "add it to apps.json, refresh and you are home free".

I think there must be another step?

Thank you.