ext js改变颜色，宽度和复制精灵

Question

我是新手，很难学习它。如何更改颜色，宽度以及能够复制图纸。我希望能够更改自由手绘图的颜色，更改线宽，并能够选择和复制精灵或绘图。

我的代码到目前为止：

这是视图

Ext.define('SketchApp.view.main.Shapes', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainShapes',

requires: [
'Ext.draw.Component',
'SketchApp.view.main.ShapesDrawComponent'
],

layout: 'anchor',
width: 650,
style: {borderColor:'black', borderStyle:'solid'},

tbar: ['->', {
    text: 'Clear',
    handler: function () {
        // Remove all the sprites and redraw.
        var draw = Ext.getCmp('free-draw');
        draw.getSurface().removeAll(true);
        draw.renderFrame();
    }
}],

items: [{
    xtype: 'free-draw-component',
    id: 'free-draw',
    anchor: '100%',
    height: 500
}],

onAdded: function(container, pos, instanced) { 
    this.callParent([container, pos, instanced]); 
    container.setScrollable(false);
},

onRemoved: function(destroying) {
    this.ownerCt.setScrollable(true);
    this.callParent([destroying]);
}

});

这是组件

Ext.define('SketchApp.view.main.ShapesDrawComponent', function () {

    function smoothList(points) {
        if (points.length < 3) {
            return ['M', points[0], points[1]];
        }

        var dx = [], dy = [], result = ['M'],
            i, ln = points.length;

        for (i = 0; i < ln; i += 2) {
            dx.push(points[i]);
            dy.push(points[i + 1]);
        }

        dx = Ext.draw.Draw.spline(dx);
        dy = Ext.draw.Draw.spline(dy);
        result.push(dx[0], dy[0], 'C');

        for (i = 1, ln = dx.length; i < ln; i++) {
            result.push(dx[i], dy[i]);
        }

        return result;
    }

    return {
        extend: 'Ext.draw.Container',
        xtype: 'free-draw-component',

        config: {
            background: 'white'
        },

        sprite: undefined,
        lastEventX: undefined,
        lastEventY: undefined,
        list: [],

        constructor: function () {
            var me = this;

            me.callParent(arguments);

            me.on({
                element: 'element',
                mousedown: 'onMouseDown',
                mousemove: 'onMouseMove',
                mouseup: 'onMouseUp',
                mouseleave: 'onMouseUp',
                scope: me
            });
        },

        onMouseDown: function (e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id),
                surface = me.getSurface(),
                xy, x, y;

            if (!me.sprite) {
                xy = surface.getEventXY(e);
                x = xy[0];
                y = xy[1];

                me.list = [x, y, x, y];
                me.lastEventX = x;
                me.lastEventY = y;

                me.sprite = surface.add({
                    type: 'path',
                    path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],
                    lineWidth: 20,
                    lineCap: 'round',
                    lineJoin: 'round',
                    strokeStyle: new Ext.util.Color(0,0,0)
                });
                surface.renderFrame();
            }
        },

        onMouseMove: function (e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id),
                surface = me.getSurface(),
                path, xy, x, y, dx, dy, D;

            if (me.sprite) {
                xy = surface.getEventXY(e);
                x = xy[0];
                y = xy[1];
                dx = me.lastEventX - x;
                dy = me.lastEventY - y;
                D = 10;

                if (dx * dx + dy * dy < D * D) {
                    me.list.length -= 2;
                    me.list.push(x, y);
                } else {
                    me.list.length -= 2;
                    me.list.push(me.lastEventX = x, me.lastEventY = y);
                    me.list.push(me.lastEventX + 1, me.lastEventY + 1);
                }

                path = smoothList(me.list);

                me.sprite.setAttributes({
                    path: path
                });
                if (Ext.os.is.android) {
                    Ext.draw.Animator.schedule(function () {
                        surface.renderFrame();
                    }, me);
                } else {
                    surface.renderFrame();
                }
            }
        },

        onMouseUp: function(e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id);

            me.sprite = null;
        },

        onResize: function() {
            var size = this.element.getSize();

            this.getSurface().setRect([0, 0, size.width, size.height]);
            this.renderFrame();
        }
    };
});