GeoExt Grid populated from 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>
GeoExt Grid from WFS-Service
<div id="mainpanel"></div>

JavaScript

var store, gridPanel, mainPanel;

Ext.onReady(function () {

    // create feature store, binding it to the vector layer
    store = new GeoExt.data.FeatureStore({
        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:3857",
                version: "1.1.0"
            })
        }),
        autoLoad: true
    });

    // create grid panel configured with feature store
    gridPanel = new Ext.grid.GridPanel({
        title: "Feature Grid",
        region: "center",
        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 grid panel
    // inside it
    mainPanel = new Ext.Panel({
        renderTo: "mainpanel",
        layout: "border",
        height: 400,
        width: 520,
        items: [gridPanel]
    });
});