您的位置：首页 > 其它

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

2013-08-31 17:43 483 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航