Fatal编程技术网
  • extjs/
  • 无法使用ExtJs 3.0呈现简单Piechart

无法使用ExtJs 3.0呈现简单Piechart

extjs

无法使用ExtJs 3.0呈现简单Piechart,extjs,pie-chart,Extjs,Pie Chart,我试图使用ExtJS3.0呈现一个简单的piechart，但无法。以下是片段： <div id="ext_grid_panel"> <div id="blackout_tab"> <div id="grid_blackout_current"></div> </div> <div id="gls_tab"> <div id="gls_current">

我试图使用ExtJS3.0呈现一个简单的piechart，但无法。以下是片段：

<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
    ]
});


var mainGridPanelWidth=（Ext.IsIE）？“”：“宽度：\'100%\”；
var mainGridPanel=新的Ext.TabPanel({
id:“maingridpanel”，
renderTo:'ext_grid_panel'，
样式：{宽度：'100%}，
宽度：1000，
活动选项卡：0，
项目：[
{id:'allTabPanel'，contentEl:'blackout_tab'，title:'All'}，
{id:'glsTabPanel'，contentEl:'gls_tab'，title:'gls'}
]
});
如果（！Ext.IsIE）
mainGridPanel.setWidth（'100%”）；
Ext.getCmp（'allTabPanel'）。在（'activate'，function（）上{
}); 
Ext.getCmp（'glsTabPanel'）。在（'activate'，function（）{
}); 
变量图表={
xtype:“piechart”，
存储：[{'total'：'42'，'range'：'20000'}，{'total'：'53'，'range'：'10000'}，
数据字段：“总计”，
类别字段：“范围”
};
var Panel BlackoutCurrent=新的外部面板({
id:“面板断电电流”，
renderTo:“电网断电电流”，
项目：[
皮查特
]
});
var panelglsCurrent=新的外部面板({
id:“panelglscurrent”，
renderTo:“gls_当前”，
项目：[
皮查特
]
});
当我在firefox firebug中检查时，我看到创建了一个对象（.swf），但piechart内容不存在/呈现

快速指导非常受欢迎，因为它需要花费大量时间，而且没有解决方案

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

结果如下：

我的版本来了

<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（函数（）{
var store=new Ext.data.JsonStore({
字段：['total'，'range']，
自动加载：对，
数据：[
{
总数：42，
范围：'20000'
}
,{
总数：53，
范围：'10000'
}
]
});
var mainGridPanel=新的Ext.TabPanel({
renderTo:'ext_grid_panel'，
//样式：{宽度：'100%}，
宽度：“100%”，
身高：400，
活动选项卡：0，
朴素：没错，
项目：[
{
id:“panelglscurrent”，
标题：“全球定位系统”，
布局：“适合”，
听众：{
激活：函数（）{
}
},
项目：[{
id:'图表1'，
xtype:“piechart”，
店:店,，
数据字段：“总计”，
类别字段：“范围”
}]
},
{
id:“面板断电电流”，
标题：“全部”，
布局：“适合”，
听众：{
激活：函数（）{
}
},
项目：[
{
id:'图表2'，
xtype:“piechart”，
店:店,，
数据字段：“总计”，
类别字段：“范围”
}
]
}
]
});
Ext.getCmp（'panelglscurrent'）。在（'activate'，function（）上{
Ext.getCmp（'panelglscurrent'）.doLayout（真）；
}); 
Ext.getCmp（'panelblackoutcurrent'）。在（'activate'，function（）{
Ext.getCmp（'panelblackoutcurrent'）.doLayout（真）；
}); 
如果（！Ext.IsIE）
mainGridPanel.setWidth（'100%”）；
});
您的样本存在一些问题：

  • 首先，您必须创建一个适当的存储，将对象数组传递给饼图是不够的
  • 另外，您应该将代码包装在Ext.onReady中，否则可能会出现一些奇怪的行为，例如元素未正确呈现
  • 确保将
    plain:true
    包含在包含图表的选项卡面板上，否则图表将无法正确呈现
一般性说明

  • 尝试在变量中使用好的名称（比如mainGridPanel实际上是一个TabPanel）
  • 根据经验，您的代码很快就会变得凌乱
另外，如果您想使用全屏制作extjs组件，最好使用视口，这样可以很好地调整所有内容的大小，并使您的操作更加轻松

感谢您的链接，Igor。不过，我还是无法渲染它。当我在firebug中检查时，我发现以下内容，但没有呈现饼图：。我的应用程序部署在IIS服务器中，我想知道服务器是否不允许/支持呈现“.swf”文件。如果为真，您知道如何在IIS中启用/设置以允许“application/x-shockwave-flash”类型的文件吗？“PhP.ini”中还有其他设置需要完成吗？谢谢Igor，它可以工作！！你提供了一个简单的，基本的启动步骤，真的很有帮助。非常感谢RageZ，它很有效！！！！！你的解释很详细，很容易理解。拉格兹，我看到一种奇怪的行为。这两个选项卡在firefox中每次都能很好地呈现，但在IE6中，当我点击第二个选项卡（即id:'panelblackoutcurrent'，title:'All'）时，它会随机呈现piechart（有时呈现，有时不呈现）。所以我再次刷新以查看结果，它有时渲染，有时不渲染。你能告诉我解决办法吗？提前谢谢。