StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>here come my version </p> <pre><code><html> <head> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  <script type="text/javascript" src="../../ext-all.js"></script>  <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> </head> <body> <div id="ext_grid_panel"> </div> <script> Ext.onReady(function(){ var store = new Ext.data.JsonStore({ fields: ['total', 'range'], autoLoad: true, data: [ { total: 42, range:'20,000' } ,{ total: 53, range:'10,000' } ] }); var mainGridPanel = new Ext.TabPanel({ renderTo: 'ext_grid_panel', //style: {width:'100%'}, width: '100%', height: 400, activeTab: 0, plain: true, items: [ { id: 'panelglscurrent', title: 'GPS', layout: 'fit', listeners: { activate: function(){ } }, items: [{ id: 'chart1', xtype : 'piechart', store : store, dataField : 'total', categoryField : 'range' }] }, { id: 'panelblackoutcurrent', title: 'All', layout: 'fit', listeners: { activate: function(){ } }, items: [ { id: 'chart2', xtype : 'piechart', store : store, dataField : 'total', categoryField : 'range' } ] } ] }); Ext.getCmp('panelglscurrent').on('activate', function() { Ext.getCmp('panelglscurrent').doLayout(true); }); Ext.getCmp('panelblackoutcurrent').on('activate', function() { Ext.getCmp('panelblackoutcurrent').doLayout(true); }); if (!Ext.IsIE) mainGridPanel.setWidth('100%'); }); </script> </body> </html> </code></pre> <p>your sample had a few problems: </p> <ul> <li>first you have to create a proper store passing the array of object to the pie chart is not enought</li> <li>also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly</li> <li>make sure to include the <code>plain: true</code> on tabPanel with chart inside or the chart won't render properly</li> </ul> <p>an general note</p> <ul> <li>try to give good name at your variable (like mainGridPanel being actually a TabPanel)</li> <li>intent properly your code, by experience it really become messy fast. </li> </ul> <p>Also if you want to make the extjs component using full screen, you have better to use the viewport it would make everything resize nicely and make things more easy for you</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload