Sencha Touch + OpenLayers: failed to create a list that wraps a Openlayers.request.Get function

I am using S开发者_如何转开发encha 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.

I can't find what's wrong with it. Anybody could help me give me some hints?

Appreciate all help!!!

---

Be advised I'm still a newbie here with all the ExtJS and now Sencha framework. However, as your question may be related eventually to some work I'm doing with OL and Sencha Touch, decided to look at it. Couldn't really find anything wrong but I was looking in the Sencha Touch docs and the itemtap is listed as:

itemtap( Ext.DataView this, Number index, Ext.Element item, Ext.EventObject e )

So, have you tried this instead of what you wrote?

itemtap: function( this, index, item, e ) 

I could be wrong here but perhaps Sencha is complaining because it thinks you're declaring a new dataview which hasn't been defined yet(?). I think that's what the error is complaining about. Be interested if that was the issue.