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();

                    }

                }]

            })

显示效果：