ExtJS 6 - pivot without CMD

Question

I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd http://se.sencha.com/setup-guide/

I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:

www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework www.mydummy.server.org/lib/extjs/package/ <- addon

and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.

The target location of the addon is a bit strange for me, I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )

Now I wonder how should I include framework and addon in own html example,
I've tried something like:

<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>

The links are ok (no http error) but the simple pivot is not rendered and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.

What is the correct setup of extjs and pivot without cmd?

Thank you, Annie

Mitchell Simoens Mitchell Simoens · Accepted Answer · 2016-03-02T14:52:36

Couple things here.

For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.

Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.

<html>
    <head>
        <title>Pivot Grid Test</title>

        <link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
        <script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>

        <link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
        <script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
        <script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
    </head>
    <body></body>
</html>

Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).

ExtJS 6 - pivot without CMD

2 Answers