Displaying “numberoffeatures” in grid

Question

How to display numberoffeatures in map using geoext on grid?

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

items.push({
        xtype: "grid",
        ref: "capsGrid", // makes the grid available as app.capsGrid
        title: "Available Layers",
        region: "north",
        height: 150,
        viewConfig: {forceFit: true},
        store: new GeoExt.data.WFSCapabilitiesStore({
                url: "http://localhost:8080/geoserver/wfs?request=GetFeature&typename=GisData:sites&version=1.1.1&resultType=hits&filter=(%3CFilter%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3EVendor%3C/PropertyName%3E%3CLiteral%3EvendorTE%3C/Literal%3E%3C/PropertyIsEqualTo%3E%3C/Filter%3E)",
                protocolOptions: {version: "1.1.1"},
                autoLoad: true
            }),
        columns: [
            {header: "numberOfFeatures", dataIndex: "numberOfFeatures", sortable: true}
        ]
    });

I get xml response in firebug:

Answer 1

Well there are no component to do this job but I found that I can make up my custom component using ExtJS window and ExtJS Grid: Following is sample:

 xmlhttp.open("GET",url,false);
             xmlhttp.send();
             xmlDoc=xmlhttp.responseXML;    
             var t = xmlDoc.getElementsByTagName("FeatureCollection");//for firefox it's "wfs:FeatureCollection"                     
             cnt = t[0].getAttribute("numberOfFeatures");

Now this can be used in geoext grid panel with getLengendGraphic request to geoserver. http://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/legendgraphic.html

Information about creating ExtJS grid with image can be found at:

http://loianegroner.com/2010/01/how-to-display-an-imagelink-inside-an-ext-js-gridpanels-cell/