Ext学习笔记(5):DrawComponent使用 Demo

最新推荐文章于 2018-08-22 11:19:26 发布

洛枫偃月

最新推荐文章于 2018-08-22 11:19:26 发布

阅读量1.5k

点赞数

分类专栏： Js/Jquery

本文链接：https://blog.csdn.net/zgs_shmily/article/details/10752941

版权

Js/Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
<head>
<!-- Ext DrawComponent Demo -->
<script src="js/ext-all.js"></script>
<link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
	Ext.onReady(function() {
		var drawComponent = Ext.create('Ext.draw.Component', {
		    width: 800,
		    height: 600,
		    renderTo: Ext.DomQuery.selectNode("div[@id='chart1']")
		});
		
		/*
		Ext.draw.Component.surface
		表面实例管理该组件*/
		surface = drawComponent.surface;

		surface.add([{
		    type: 'circle',
		    radius: 10,
		    fill: '#f00',
		    x: 10,
		    y: 10,
		    group: 'circles'
		}, {
		    type: 'circle',
		    radius: 10,
		    fill: '#0f0',
		    x: 50,
		    y: 50,
		    group: 'circles'
		}, {
		    type: 'circle',
		    radius: 10,
		    fill: '#00f',
		    x: 100,
		    y: 100,
		    group: 'circles'
		}, {
		    type: 'rect',
		    width: 20,
		    height: 20,
		    fill: '#f00',
		    x: 10,
		    y: 10,
		    group: 'rectangles'
		}, {
		    type: 'rect',
		    width: 20,
		    height: 20,
		    fill: '#0f0',
		    x: 50,
		    y: 50,
		    group: 'rectangles'
		},{
		    type: 'rect',
		    width: 20,
		    height: 20,
		    fill: '#00f',
		    x: 100,
		    y: 100,
		    group: 'rectangles'
		}]);

		// Get references to my groups
		circles = surface.getGroup('circles');
		rectangles = surface.getGroup('rectangles');

		// 使圆形竖直向下移动
		circles.animate({
		    duration: 1000,//执行时间
		    to: {
		        translate: {
		            y: 200//y=y+200
		        }
		    }
		});

		// 使正方形水平向右移动
		rectangles.animate({
		    duration: 1000,//执行时间
		    to: {
		        translate: {//转化
		            x: 200//x=x+200
		        }
		    }
		});

		Ext.create('Ext.panel.Panel', {
		    title: 'Panel with VerticalTextItem',
		    width: 300,
		    height: 200,
		    lbar: {
		        layout: {
		            align: 'center'
		        },
		        items: [{
		            xtype: 'text',
		            text: 'Sample VerticalTextItem',
		            degrees: 60//旋转60度角
		        }]
		    },
		    renderTo: Ext.DomQuery.selectNode("div[@id='chart2']")
		});
	});
</script>
</head>
<body>
	<div id="chart1" style="margin-left: 100px;"></div>
	<div id="chart2" style="margin-left: 100px;"></div>
</body>
</html>

洛枫偃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记(5):DrawComponent使用 Demo

Ext.onReady(function() { var drawComponent = Ext.create('Ext.draw.Component', { width: 800, height: 600, renderTo: Ext.DomQuery.selectNode("div[@id='chart1']") }); /* Ext.
复制链接

扫一扫

专栏目录