Ext.create('Ext.panel.Panel', {
title: '组合图像',
renderTo: 'ComplexDiagram',
items: [{
xtype: 'button',
text: '缩放的字',
margin:'5px',
handler: function (btn) {
Ext.create('Ext.window.Window', {
layout: 'fit',
width: ,
height: ,
items: Ext.create('Ext.draw.Component', {
viewBox: false,
items: [{
type: 'circle',
fill: '#0066CC', //blue
radius: ,
x: ,
y:
},{
type: 'circle',
fill: '#00CC66', //green
radius: ,
x: ,
y:
},{
type: 'circle',
fill: '#FF9933', //orange
radius: ,
x: ,
y:
},{type: 'text',
text: 'Model',
fill: '#000', //black
font: '12px "Arial"',
x: ,
y:
},{
type: 'text',
text: 'View',
fill: '#000',
font: '12px "Arial"',
x: ,
y:
},{
type: 'text',
text: 'Controller',
fill: '#000',
font: '12px "Arial"',
x: ,
y:
},{
type: 'rect',
fill: '#CC0000', //red
width: ,
height: ,
x: ,
y:
},{
type: 'rect',
fill: '#CC0000',
width: ,
height: ,
x: ,
y: ,
rotate: {
degrees: // line in diagonal \
}
},{
type: 'rect',
fill: '#CC0000',
width: ,
height: ,
x: ,
y: ,
rotate: {
degrees: // line in diagonal /
}
}]
})
}).show();
}
}]
})

显示效果:

EXTJS4自学手册——组合图像-LMLPHP

05-11 22:33