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
    featureselected: function(e) {

// 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,
        // 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

// 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: [
    tbar: buildMapToolbar(map, vectorLayer)

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

  • 1
    thx that wasn't really the answer i was looking for but i found the opengeo recipie book i found examples that helped me solving the problem – MontyBurns Jan 15 '13 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.