How to show attribute table of object when user clicks on it?

Question

sorry if I'm asking stupid questions but I really spent days trying to figure out how to add functionality to my map so that when user clicks on some map object he gets the attribute table on the side with the attribute data of that object. Is it even possible? I don't speak about popups, I speak about actual table. This is how my map looks now:

I would like that space on the east side of monitor populate with that attribute table when users click. I'm not saying that's the best solution but that's how I imagined that. But I'm open for suggestions.

As you can see I use geoext, openlayers and extjs and honestly, I don't know lot about php or some other frameworks so I would be happy if the solution could be solved using geoext or smilair. I was looking around but nothing what I found is what I'm actually looking for.

One more time, sorry if my question is unprofessional or something but I'm really kind of desperate :)

Answer 1

You could use the FeatureGrid : http://api.geoext.org/1.1/examples/feature-grid.html

Answer 2

You can try this code, this will display a pop-up containing attribute information of layers on that particular point.

controls.push(new OpenLayers.Control.WMSGetFeatureInfo({
            autoActivate: true,
            infoFormat: "application/vnd.ogc.gml",
            maxFeatures: 10,
            eventListeners: {
                "getfeatureinfo": function(e) {
                    var items = [];
                    Ext.each(e.features, function(feature) {
                        items.push({
                            xtype: "propertygrid",
                            title: feature.fid,
                            source: feature.attributes,
                            editable: false
                        });
                    });
                    new GeoExt.Popup({
                        title: "Feature Info",
                        width: 300,
                        height: 500,
                        layout: "accordion",
                        map: app.mapPanel,
                        location: e.xy,
                        items: items
                    }).show();
                }
            }
        }));

Ref: http://workshops.boundlessgeo.com/geoext/stores/getfeatureinfo.html