Use GeoExt to edit Features attributes on a Map

Question

I'm new to geoext and the documentation doesn't really help me.

I've got a map with points on it. These points have attributes like 'name'. I coded a map with geoExt that has a vector layer which is poplulated by features(points) from a server. I can add features to the vector layer (not to the server) and select them.

Now I'd like to select the features and edit their attributes using a window showing up. Saving them and in the next step saving them to the server.

I've been trying to do this for a few hours now, but I can't get used to ext js/geoExt "philosophy" and I can't find examples that help me do what I wan't.

Could somebody give me advice how to proceed?

Edit: i worked on the code and i'm now able to read the attributes of a feature an show it in a popup. i still like to know how to edit the values and save it to the server

Here's my (new) existing code:

var app, items = []

var osmLayer = new OpenLayers.Layer.OSM();
var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
var map = new OpenLayers.Map({
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    // todo: benutzerdefinierbar
    units: 'm',
    controls: [
        new OpenLayers.Control.ZoomPanel()
    ]
});

Ext.onReady(function() {
    app = new Ext.Viewport({
        layout: "border",
        items: items
    });
});

// registering a event that calls popup creation
vectorLayer.events.on({
    featureselected: function(e) {
        createPopup(e.feature);
    }
});

// create a popup showing the properties of a feature
var popup;
function createPopup(feature) {
    // so kann man properties schreiben
    // feature.attributes.placename = "testtestPlacename";
    popup = new GeoExt.Popup({
        title: "Features Properties",
        location: feature,
        width:200,
        // steht unter dem grid
        //html: "hier steht html text",
        maximizable: false,
        collapsible: false,
        unpinnable: false,
        items: //new Ext.grid.PropertyGrid({
            new Ext.grid.EditorGridPanel({
            xtype: "editorgrid",
            //title: "testTitle",
            source: feature.attributes,
            autoHeight: true
        })
    });
    popup.show();
}

// populate vectorLayer with features from remote source
var store = new GeoExt.data.FeatureStore({
    layer: vectorLayer,
    proxy: new GeoExt.data.ProtocolProxy({
        protocol: new OpenLayers.Protocol.HTTP({
            url: '...',
            format: new OpenLayers.Format.GeoJSON({})
        })
    }),
    fields: [
        {name: 'title', type: 'string'},
        {name: 'description', type: 'string'}
    ],
    autoLoad: true
});

items.push(new GeoExt.MapPanel({
    region: "center",
    map: map,
    title: 'xyz',
    layers: [
        osmLayer,
        vectorLayer
    ],
    tbar: buildMapToolbar(map, vectorLayer)
}
));

Answer 1

Just follow OpenGeo's Geoext tutorial and you'll have all the answers. If you want a more easy way, use their sdk tutorial. You'll find there all the examples you need. Good luck, Tudor