OpenLayers: failed to create a Ext.list that wraps a Openlayers.request.Get function

Question

I am using Sencha Touch + OpenLayers to develop a demo app. One feature is to get the catalog of feature data in GeoServer. I want to use Ext.List to display the name of feature layers. I tried following codes:

App.AddFeatureLayerList = Ext.extend(Ext.List, {    
createStore: function(){
    Ext.regModel('WFSLayers', {
        fields: ['name', 'title', 'srs', 'featureNS']
    });
    var data = [];
    var request = OpenLayers.Request.GET({
        url: root+'/geoserver/ows?service=wfs&version=1.0.0&request=GetCapabilities',
        handler: function(response){
            var XMLformat = new OpenLayers.Format.XML();
            var xml = XMLformat.read(response.responseText);
            var CAPformat = new OpenLayers.Format.WFSCapabilities();
            cap = CAPformat.read(xml);

            for (var i = 0; i < cap.featureTypeList.featureTypes.length; i++) {
                var featureT = cap.featureTypeList.featureTypes[i];
                data.push({
                    name: featureT.name,
                    title: featureT.title,
                    srs: featureT.srs,
                    featureNS: featureT.featureNS
                });
            }
            return new Ext.data.Store({
                model: 'WFSLayers',
                sorters: 'title',
                data: data,
                getGroupString: function(record){
                    return record.get('title')[0];
                },
            });
        }
    });
},
initComponent: function(){
    this.store = this.createStore();
    this.itemTpl = new Ext.XTemplate('<span class="gx-layer-item">{name}</span>');
    this.grouped = true;
    this.listeners = {
        itemtap: function(dataview, index, item, e){


        }
    };
    App.AddFeatureLayerList.superclass.initComponent.call(this);
}
});
Ext.reg('app_addFeatureLayerList', App.AddFeatureLayerList);

However, i got an error:

Uncaught DataView requires tpl, store and itemSelector configurations to be defined.

then if I remove the codes:

new Ext.data.Store({
            model: 'WFSLayers',
            sorters: 'title',
            data: data,
            getGroupString: function(record){
                return record.get('title')[0];
            },
        });

and put them to pass to this.store after call "this.createStore()", I will get a empty list. however, I traced array data and it turns out it has data, but the store is empty.

another funny thing is if I put 'createStore()' as a public function, and call it in list configs, e.g, 'store: createStore()', I will get an error message saying my IP is not allowed to access to target URL, which this is not correct since I use a proxy and I added other WFS layers from this server already... I can't find what's wrong with it. Anybody could help me give me some hints?

Appreciate all help!!!

Answer 1

In your initComponent function you send a call to Geoserver to retreive the GetCapabilities. This call however is asynchronous - the code in the handler which returns the store could execute long after the this.createStore() function has returned.

In fact the createStore function as you have written it does not actually return a store itself - it is the handler function in the request object that returns a store.

What you could try to diagnose the issue is hardcoding some data to fill a store and return it to the rest of the code to make sure this is the issue.

If this is the only issue then you will have to rethink your code. The handler that executes when the GetCapabilities XML is returned should take care of setting the store.

So you currently have an extended list class, which runs the following when a new list is created:

1. Sends a request to Geoserver
2. When Geoserver returns XML it builds a store to populate the list.

To make sure the list uses a store that is fully populated I'd do something like:

1. Create the request in your Ext.onReady function (or button click, or whenever you want to display the list)
2. In the request handler, create the store, and then create a list with the populated store. You can split this up into separate functions, but make sure the list is only created after your store is populated.
3. Once you have a list & store then display it to the user.