0

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.

Community
  • 1
  • 1
Jacobian
  • 10,122
  • 29
  • 128
  • 221

0 Answers0