Help me with this code from GeoExt and OpenLayers

Question

I haven't gone entirely through GeoExt. But I am trying to understand the below code, but I am struck. The below code is about creating popups of feature information. But the layers added are WMS Layers, How can a WMS layer contain feature information. It is not a vector layer.

     <script>
        OpenLayers.ImgPath = "../../resources/openlayers/img/";
         
        // the `panel` and `popup` variables are declared here for easy debugging
        var panel, popup;
         
        Ext.onReady(function() {
             
            // queryable WMS layer
            var zoning = new OpenLayers.Layer.WMS(
                "Medford Zoning",
                "/geoserver/wms",
                {layers: "medford:zoning", format: "image/gif", transparent: "true"}
            );
         
            panel = new GeoExt.MapPanel({
                title: "MapPanel",
                renderTo: "map-id",
                height: 300,
                width: "100%",
                layers: [
                    new OpenLayers.Layer.WMS(
                        "Global Imagery",
                        "http://maps.opengeo.org/geowebcache/service/wms",
                        {layers: "openstreetmap", format: "image/png"}
                    ),
                    zoning
                ],
                center: [-122.87, 42.34],
                zoom: 13
            });
             
            // create a control to get feature info from queryable layers
            var control = new OpenLayers.Control.WMSGetFeatureInfo({
                url: "/geoserver/wms"
            });
            panel.map.addControl(control);
            control.activate();
             
            // register a listener for the getfeatureinfo event on the control
            control.events.on({
                getfeatureinfo: function(event) {
                    // close existing popup
                    if (popup) {
                        popup.destroy();
                    }
                    popup = new GeoExt.Popup({
                        title: "Popup",
                        map: panel.map,
                        lonlat: panel.map.getLonLatFromPixel(event.xy),
                        width: 250,
                        autoScroll: true,
                        collapsible: true,
                        bodyStyle: {padding: 5},
                        html: event.text
                    });
                    popup.show();
                }
            });
         
        });

    </script>

The map is like this :

UPDATE

I changed the zoning layer to some other WMS layer in GeoServer. Now I can load the layer and everything else except that when I click, popup button opens but feature information is not coming.

I found in GeoServer documentation that there is GetFeature request availability for WMS layers. But there are some settings to be changed and I couldn't understand those. Please help changing those settings so that popup can show the feature information of the layer i.e., GetFeature request is accessible.

UPDATE

This is that GeoServer manual link where I read about WMS settings: http://docs.geoserver.org/stable/en/user/webadmin/data/layers.html

UPDATE

Found it! We should use proxy settings for features unlike normal layers. So I should replace the URL with protocol and formats.