Change OpenLayers Vector Style Dynamically

HTML

<script src="https://extjs.cachefly.net/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body onload="init()">
    <div id="map"></div>
    <div id="my-div"></div>
    <div>Selected Features: <span id="anzahl"></span></div>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400, 700, 300);
 html, body {
    font-family:'Oswald', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #FF0000;
    width:100%;
    height:100%;
}
#map {
    margin-bottom:5px !important;
    width:100%;
    height:65%;
    border:1px solid #FF0000;
    margin: auto;
}

JavaScript

var test, cp;
var map, layer;

function init() {
        cp = new Ext.ColorPalette({
        value: '993300'
    }); // initial selected color
    cp.render('my-div');
    cp.hide();
    cp.on('select', function (palette, selColor) {
        console.log(selColor);
        $("#colorbutton").css('background', "#" + selColor);

        /* // works also instead of using a whole new Stylemap:
    vector_layer.styleMap.styles.default.defaultStyle.strokeColor = "#"+selColor;
         vector_layer.styleMap.styles.default.defaultStyle.fillColor ="#"+selColor;
         vector_layer.redraw();
    */
 
        var newStyle = new OpenLayers.Style({
            "fillColor": "#" + selColor,
                "strokeColor": "#" + selColor,
                "fillOpacity": 0.4,
                "strokeOpacity": 1,
                "strokeWidth": 1,
                "strokeLinecap": "round",
                "pointRadius": 6
        });


        var sty = OpenLayers.Util.applyDefaults(newStyle, OpenLayers.Feature.Vector.style["default"]);

        var sm = new OpenLayers.StyleMap({
            'default': sty,
                'select': {
                strokeColor: "red",
                fillColor: "red"
            }
        });

        vector_layer.styleMap = sm;


        vector_layer.redraw();

        cp.hide();



    });

    test = Ext.create('Ext.Button', {
        text: 'Change VectorStyle (click)',
        id: "colorbutton",
        renderTo: Ext.getBody(),
        handler: function () {

            if (cp.hidden) {
                cp.show();
            } else {
                cp.hide();
            }


        },
        style: {
            background: '#993300'
        }
    });





    map = new OpenLayers.Map('map');
    layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(layer);
    map.setCenter(

    new OpenLayers.LonLat(-1.1240386962890625,
    44.68500966685889).transform(
    new OpenLayers.Projection("EPSG:4326"),
   ...