EXTJS4自学手册——组合图像

 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: 260,
                            height: 250,
                            items: Ext.create('Ext.draw.Component', {
                                viewBox: false,
                                items: [{
                                    type: 'circle',
                                    fill: '#0066CC', //blue
                                    radius: 40,
                                    x: 125,
                                    y: 50
                                },{
                                    type: 'circle',
                                    fill: '#00CC66', //green
                                    radius: 40,
                                    x: 50,
                                    y: 145
                                },{
                                    type: 'circle',
                                    fill: '#FF9933', //orange
                                    radius: 40,
                                    x: 200,
                                    y: 145
                                },{type: 'text',
                                    text: 'Model',
                                    fill: '#000', //black
                                    font: '12px "Arial"',
                                    x: 110,
                                    y: 50
                                },{
                                    type: 'text',
                                    text: 'View',
                                    fill: '#000',
                                    font: '12px "Arial"',
                                    x: 185,
                                    y: 145
                                },{
                                    type: 'text',
                                    text: 'Controller',
                                    fill: '#000',
                                    font: '12px "Arial"',
                                    x: 25,
                                    y: 145
                                },{
                                    type: 'rect',
                                    fill: '#CC0000', //red
                                    width: 50,
                                    height: 5,
                                    x: 100,
                                    y: 145
                                },{
                                    type: 'rect',
                                    fill: '#CC0000',
                                    width: 30,
                                    height: 5,
                                    x: 150,
                                    y: 95,
                                    rotate: {
                                        degrees: 45 // line in diagonal \
                                    }
                                },{
                                    type: 'rect',
                                    fill: '#CC0000',
                                    width: 30,
                                    height: 5,
                                    x: 70,
                                    y: 95,
                                    rotate: {
                                        degrees: 135 // line in diagonal /
                                    }
                                }]
                            })
                        }).show();
                    }
                }]
            })

显示效果：