Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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!!!

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

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.
share|improve this answer
    
you are right. now I add a button to load the response from geoserver manually. –  Simon Sep 2 '11 at 20:33
    
"The handler that executes when the GetCapabilities XML is returned should take care of setting the store." could you give me any hints to achieve this? currently the list is empty initially, so I add a button for user to manually load data. But I think this is not a good solution. If there's a way to take care of this asynchronous issue automatically, without user's interaction, that would be great!! –  Simon Sep 2 '11 at 20:53
    
Does the above make sense? Basically put all store and list creation in a functions run in the handler that is run when geoserver returns data. –  geographika Sep 2 '11 at 21:24
    
i see. thank you! –  Simon Sep 2 '11 at 21:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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