GeoExt Map with ScaleLine / ScaleBar and Grid with WFS

HTML

<script src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css">
<script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://api.geoext.org/1.1/script/GeoExt.js"></script>
<div id="mainpanel"></div>
GeoExt Map with ScaleLine and Grid from WFS-Service

CSS

.olControlScaleLine
{
    
    background: rgba(188, 210, 239,0.5);
    padding: 10px;
    border: 2px solid white;
}

JavaScript

var mapPanel, store, gridPanel, mainPanel;

Ext.onReady(function () {
    // create map instance
    var map = new OpenLayers.Map();
    var wmsLayer = new OpenLayers.Layer.WMS(
        "vmap0",
        "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });
    

    

    
    
    
    // create vector layer
    var vecLayer = new OpenLayers.Layer.Vector("vector");
    map.addLayers([wmsLayer, vecLayer]);
    
    // create map panel
    mapPanel = new GeoExt.MapPanel({
        title: "Map",
        region: "center",
        height: 400,
        width: 300,
        map: map
        
       // ,center: new OpenLayers.LonLat(5, 44),
       // zoom: 6
    });

    // create feature store, binding it to the vector layer
    store = new GeoExt.data.FeatureStore({
        layer: vecLayer,
        fields: [{
            name: 'cat',
            type: 'string'
        }, {
            name: 'str1',
            type: 'string'
        }],

        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.WFS({
                url: "http://demo.opengeo.org/geoserver/wfs",
                featureType: "bugsites",
                featureNS: "http://opengeo.org",
                srsName: "EPSG:4326",
                version: "1.1.0"
            })
        }),
        autoLoad: true
    });

    // create grid panel configured with feature store
    gridPanel = new Ext.grid.GridPanel({
        title: "Feature Grid",
        region: "east",
        store: store,
        width: 320,
        columns: [{
            header: "Category",
            width: 200,
            dataIndex: "cat"
        }, {
            header: "Str1",
            width: 100,
            dataIndex: "str1"
        }],
        sm: new GeoExt.grid.FeatureSelectionModel()
    });

    // create a panel and add the map panel and grid panel
    // inside it
    mainPanel = new Ext.Panel({
        renderTo: "mainpanel",
        layout: "border",
        height:...