无法使用 ExtJs 3.0 渲染简单的饼图

发布于 2024-08-13 23:01:43 字数 1485 浏览 11 评论 0原文

我试图使用 ExtJs 3.0 渲染一个简单的饼图，但不能。下面是片段：

<div id="ext_grid_panel">

    <div id="blackout_tab">
        <div id="grid_blackout_current"></div>
    </div>

    <div id="gls_tab">
         <div id="gls_current"></div>
    </div>

</div>

var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
    id: 'maingridpanel',
    renderTo: 'ext_grid_panel',
    style: {width:'100%'},
    tabWidth: 1000,
    activeTab: 0,
    items: [
        {id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
        {id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}

    ]
});

if (!Ext.IsIE)
    mainGridPanel.setWidth('100%');

Ext.getCmp('allTabPanel').on('activate', function() {

}); 

Ext.getCmp('glsTabPanel').on('activate', function() {   

}); 


var pieChart = {
        xtype : 'piechart',
        store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
        dataField : 'total',
        categoryField : 'range'         
        };

var panelBlackoutCurrent = new Ext.Panel({
    id: 'panelblackoutcurrent',
    renderTo: 'grid_blackout_current',
    items: [
            pieChart
    ]
});

var panelglsCurrent = new Ext.Panel({
    id: 'panelglscurrent',
    renderTo: 'gls_current',
    items: [
        pieChart
    ]
});

当我在 Firefox Firebug 中检查时，我看到创建了一个对象（.swf），但饼图内容不存在/渲染。

快速指导受到高度赞赏，因为它需要花费大量时间而没有解决方案

原文

I was trying to render a simple piechart using ExtJs 3.0 but could not. Below is the snippet:

<div id="ext_grid_panel">

    <div id="blackout_tab">
        <div id="grid_blackout_current"></div>
    </div>

    <div id="gls_tab">
         <div id="gls_current"></div>
    </div>

</div>

var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
    id: 'maingridpanel',
    renderTo: 'ext_grid_panel',
    style: {width:'100%'},
    tabWidth: 1000,
    activeTab: 0,
    items: [
        {id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
        {id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}

    ]
});

if (!Ext.IsIE)
    mainGridPanel.setWidth('100%');

Ext.getCmp('allTabPanel').on('activate', function() {

}); 

Ext.getCmp('glsTabPanel').on('activate', function() {   

}); 


var pieChart = {
        xtype : 'piechart',
        store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
        dataField : 'total',
        categoryField : 'range'         
        };

var panelBlackoutCurrent = new Ext.Panel({
    id: 'panelblackoutcurrent',
    renderTo: 'grid_blackout_current',
    items: [
            pieChart
    ]
});

var panelglsCurrent = new Ext.Panel({
    id: 'panelglscurrent',
    renderTo: 'gls_current',
    items: [
        pieChart
    ]
});

When i inspect in firefox firebug, i see an object(.swf) is created but the piechart content is not there/rendered.

Quick guidance is highly appreciated as it is taking lot of time with no solution

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2024-08-20 23:01:43

您可以使用示例饼图作为起点：

http: //www.extjs.com/deploy/dev/examples/chart/pie-chart.js

这是结果： http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html

回复收藏 0 原文

诺曦 2024-08-20 23:01:43

这是我的版本，

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>



    <!-- Common Styles for the examples -->
    <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>

您的示例有一些问题：

首先您必须创建一个适当的存储，将对象数组传递到饼图是不够的，
您还应该将代码包装在 Ext.onReady 中，否则您可能会得到一些奇怪的行为，例如 element无法正确渲染
请确保在带有图表的 tabPanel 上包含 plain: true ，否则图表将无法正确渲染

一般注释

尝试为您的变量提供良好的名称（例如 mainGridPanel 实际上是一个 TabPanel）
正确地意图你的代码，根据经验，它真的很快就会变得混乱。

另外，如果你想让 extjs 组件使用全屏，你最好使用视口，它会让一切都很好地调整大小，让事情变得更容易

here come my version

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>



    <!-- Common Styles for the examples -->
    <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>

your sample had a few problems:

first you have to create a proper store passing the array of object to the pie chart is not enought
also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly
make sure to include the plain: true on tabPanel with chart inside or the chart won't render properly

an general note

try to give good name at your variable (like mainGridPanel being actually a TabPanel)
intent properly your code, by experience it really become messy fast.

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

回复收藏 0 原文

~没有更多了~