一个简单的extjs chart练习-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18405/article/details/82028752

本文介绍了一个使用ExtJS实现图表展示的实际案例。该案例通过Struts后台获取JSON数据，并利用ExtJS的ColumnChart组件进行图表绘制。重点在于配置JsonStore的autoLoad属性为true以自动加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做了一个简单的extjs chart练习，数据是从struts后台得到的，一点注意的就是jsonstore的autoLoad属性要设置成true

ChartPanel = Ext.extend(Ext.Panel,{
mydocumentChart:null,
constructor:function() {
this.mydocumentChart = new DocumentChart();
ChartPanel.superclass.constructor.call(this,{
width:600,
height:300,
frame:true,
layout:"fit",
renderTo:"chartPanel",
items:[this.mydocumentChart]
});
}
});
/*****************************************************************************************/
DocumentChart = Ext.extend(Ext.chart.ColumnChart,{
myChartStore:null,
constructor:function() {
this.myChartStore = new ChartStore();
DocumentChart.superclass.constructor.call(this,{
store:this.myChartStore,
url:"ext/resources/charts.swf",
xField:"department",
yField:"documentNumber"
});
}
});
/*****************************************************************************************/
ChartStore = Ext.extend(Ext.data.JsonStore,{
constructor:function() {
ChartStore.superclass.constructor.call(this,{
autoLoad:true,
url:"http://139.28.96.10:8080/premanagement3/secure/chart",
root:"documentCounts",
fields:["department","documentNumber"]
});
}
});