“Extjs把Chart当做一个类 嵌入到table布局的一个panel里面”

[梅子寒的博客]

这个一个table布局的table.js

extend: 'Ext.tab.Panel',
alias: 'widget.Coststatistics',
activeTab: 0,
region: 'center',
id: 'costtabpanel',

/**
* 初始化控件
*/
initComponent: function () {
var me = this;
me.items = [
{

xtype: 'container',
title: HomepageLocale.ChangJiang.Title,
id:'changjiangcontainer',
layout: 'table',
items: [
{
id: 'Changjiang',
xtype: 'ChangJiangStatistics'
}


]
},

这是一个Chart 的js 文件 命名为 ChangjiangStatistics.js

Ext.namespace("Changjiang.Portal.Homepage.Views");
Ext.define('Changjiang.Portal.Homepage.Views.ChangJiangStatistics', {

extend: 'Ext.chart.Chart',
alias: 'widget.ChangJiangStatistics',
//id: 'Changjiang',
layout: 'fit',
store: 'dataStore',

initTheme: (function () {
var dataStore = new Ext.data.JsonStore({
fields: ['age', 'percentage', 'growing'],
data: [
{ age: '武汉分部', percentage: 10, growing: 35 },
{ age: '武汉总部', percentage: 40, growing: 30 },
{ age: '株洲分部', percentage: 30, growing: 30 },
{ age: '常州分部', percentage: 20, growing: 30 }
]
});
Ext.create('Ext.panel.Panel', {
//title: '武汉点点',
width: 400,
height: 400,
// renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'chart',
store: dataStore,
animate: true, //是否启用动画效果
legend: {
position: 'bottom' //图例位置
},
shadow: true,
series: [{
type: 'pie', //图表序列类型
field: 'percentage', //对应饼状图角度的字段名
showInLegend: true, //是否显示在图例当中
colorSet: ['#FFFF00', '#669900', '#FF6699', '#66CCCC'], //颜色
label: {
field: 'age', //标签字段名
contrast: true,
color: '#FFFF00',
renderer: function (v) {//自定义标签渲染函数
return "[" + v + "]";
},
display: 'middle', //标签显现方式
font: '18px "Lucida Grande"'//字体
},
highlight: {
segment: {
margin: 10 //空白区域宽度
}
},
tips: {
trackMouse: true, //是否启用鼠标跟踪
width: 50,
height: 28,
renderer: function (storeItem) {//自定义渲染函数
var title = storeItem.get('percentage') + '%';
this.setTitle(title);
}
}
}]
}]
});
})
// ,
// initComponent: function () {
//// var listViewController = this.getController('Changjiang.Portal.CostStatistics');
//// renderto: listViewController.id;

// me.callParent(arguments);
// }
});


问题是怎么样可以把这个Chart当做一个类 引用到这个布局的js文件里面 如红色区域。