I want to create a very simple pivot grid, using ExtJS 6
. What I have now is ExtJS 6
library itself and pg-6.0.2
package containing something related to Pivot Grid. In the past, when there was Extjs 5
version there was some nice documentation, which explained how to link pivot grid files to the index page:
{pivotFolder}/packages/PivotGrid/build/PivotGrid.js
{pivotFolder}/packages/PivotGrid/build/{themeName}/resources/PivotGrid-all.css
Now, the structure of pg-6.0.2
is essentially different. In fact there is no build/PivotGrid.js
anymore, but there is something like build/pivot.js
. Is that what we need? I'm not sure of that. Besides, it would be really great if someone could provide a really teeny-weeny example, demonstrating how to code pivot grid (let it be just with one column and one row of data). This code may serve as a starting point:
Ext.define("MyPivot.view.Viewport",{
extend: "Ext.container.Viewport",
layout: "fit",
initComponent:function(){
Ext.apply(this,{
layout:{
type: "border"
},
items:[{
region: "center",
xtype: "panel",
title: "My first pivot grid",
layout: "fit",
items: [{
// I want to add here a pivot grid
}]
}]
});
this.callParent(arguments);
}
});
And how the index page should look like?
<link rel="stylesheet" href="/ext-6.0.2/build/classic/theme-triton/resources/theme-triton-all.css" type="text/css" />
<script src="/ext-6.0.2/build/ext-all.js"></script>
// what else I should link ???
EDIT
My root app.js
file looks like so:
Ext.Loader.setConfig({enabled:true, disableCaching:true});
Ext.Loader.setPath('Ext.ux', '../ext-6.0.2/packages/ux/classic/src/');
Ext.application({
name: 'MyPivot',
appFolder: '.',
autoCreateViewport: true
});
And I tried this in my index file:
<html>
<head>
<link rel="stylesheet" href="/ext-6.0.2/build/classic/theme-neptune/resources/theme-neptune-all.css" type="text/css" />
<script src="/ext-6.0.2/build/ext-all.js"></script>
<link rel="stylesheet" href="/pg-6.0.2/ext-addons-6.0.2/packages/pivot/build/neptune/resources/pivot-all.css" type="text/css" />
<script src="/pg-6.0.2/ext-addons-6.0.2/packages/pivot/build/pivot.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>
However, when I load the page I see in the console, that many files are not found. This one - "/Ext/exporter/Excel.js". And this one - "Ext/ux/ajax/JsonSimlet.js". And so the page gets broken. I do not know how to fix all that and I wish there were some more "illustrative" examples in official Sencha documentation concerning Pivot Grid.
EDIT I wish such examples contained also index page source code. Otherwise, if you do not know how to link everything, the rest code is of no use to you.