ExtJS 6.6 Grid中渲染图表

Ext6的案例真的是太少了，Ext6的grid组件还是比较强大的，可以直接渲染图表，就像下图

主要用到grid里的widget属性，做了个demo，方便以后查看

/**
 * 任务列表
 * 
 * @author seaside
 * @version 2019.4.16
 */
Ext.ns("com.dfe.e8800.business.gws.resourceManagement");

com.dfe.e8800.business.gws.resourceManagement.PodsList = function(cfg) {
	var self = this;
	this.pageSize = 20;

	/**
	 * 初始化
	 */
	this.init = function() {
		self.makeFace();
	}

	/**
	 * 创建布局
	 */
	this.makeFace = function() {
		var grid = self.makePodsListGridPanel();

		new Ext.Viewport({
					layout : 'card',
					id : 'cardPanel',
					items : [grid]
				});
		Ext.getCmp('cardPanel').setActiveItem(0); //
	}

	/**
	 * 创建节点列表
	 */
	this.makePodsListGridPanel = function() {
		if (!Ext.isEmpty(Ext.getCmp('podsListGrid'))) {
			return Ext.getCmp('podsListGrid');
		}

		var store = Ext.create('Ext.data.Store', {
					fields : ['name', 'progress','line','bar','bullet'],
					data : [{
								name : 'Test1',
								progress : .25,
								line : [1, 10, 20, 60, 30, 29],
								bar : [1, 10, 20, 60, 30, 29],
								bullet : [1, 10, 20, 60, 30, 29]
							}, {
								name : 'Test2',
								progress : .256,
								line : [1, 34, 75, 32, 97, 2],
								bar : [1, 34, 75, 32, 97, 2],
								bullet : [1, 34, 75, 32, 97, 2]
							}, {
								name : 'Test3',
								progress : .55,
								line : [1, 20, 43, 64, 23, 69],
								bar : [1, 20, 43, 64, 23, 69],
								bullet : [1, 20, 43, 64, 23, 69]
							}, {
								name : 'Test4',
								progress : .17,
								line : [1, 64, 43, 53, 86, 43],
								bar : [1, 64, 43, 53, 86, 43],
								bullet : [1, 64, 43, 53, 86, 43]
							}, {
								name : 'Test5',
								progress : .15,
								line : [1, 44, 23, 76, 23, 15],
								bar : [1, 44, 23, 76, 23, 15],
								bullet : [1, 44, 23, 76, 23, 15]
							}]
				});
		var grid = new Ext.grid.Panel({
					autoLoad : true,
					region : 'center',
					height : 400,
					id : 'podsListGrid',
					title : "Grid Test",
					multiSelect : false,// 单选
					headerBorders : true,
					columnLines : true,
					border : true,
					viewModel : true,//
					margin : '6px 10px 20px 10px',
					selModel : {
						selType : 'rowmodel',
						mode : 'SINGLE'
					},
					bbar : {
						xtype : 'pagingtoolbar',
						store : store,
						displayInfo : true
					},
					defaults : {
						align : 'left'
					},
					store : store,
					columns : [new Ext.grid.RowNumberer({
										header : '',
										width : 40
									}), {
								text : 'Name',
								dataIndex : 'name'
							}, {
								text : 'progress',
								xtype : 'widgetcolumn',
								flex : 1,
								dataIndex : 'progress',
								widget : {
									xtype : 'progressbarwidget',
									textTpl : ['{percent:number("0")}% done']
								}
							}, {
								text : 'Line',
								flex : 1,
								dataIndex : 'line',
								xtype : 'widgetcolumn',
								widget : {
									xtype : 'sparklineline',
									tipTpl : 'Value: {y:number("0.00")}'
								}
							}, {
								text : 'Bar',
								flex : 1,
								dataIndex : 'bar',
								xtype : 'widgetcolumn',
								widget : {
									xtype : 'sparklinebar'
								}
							}, {
								text : 'Bullet',
								flex : 1,
								dataIndex : 'bullet',
								xtype : 'widgetcolumn',
								widget : {
									xtype : 'sparklinebullet'
								}
							}]
				});
		return grid;
	};

};

// 程序入口
var resourceDashboardApp = null;
// 用户项目中需要指定的参数信息。允许指定的参数，请参见类头部变量定义的相关
// 如果没有需要特殊指定的参数，则生成实例时可不传入config参数
var config = {};
Ext.onReady(function() {
	resourceDashboardApp = new com.dfe.e8800.business.gws.resourceManagement.PodsList(config);
	resourceDashboardApp.init();
});