Cannot create an instance of unrecognized alias:

[muddsg]

Hi everyone, i am new to Sencha and i have an application that should display the map with a search field at the bottom of the map. The map will show your current location with a marker and the address search from the search field will place a second marker on the map. But i have been constantly getting this

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.maps and the screen just show a blank page .

This is the code below.

Ext.define('demo.view.Maps', {
    extend:'Ext.Panel',
    extend: 'Ext.Map',
	extend: 'Ext.List',
    xtype:'maps',


    config: {
        title:'Maps',
        iconCls:'maps',
        layout:'vbox',
        draggable: true,
        useCurrentLocation: true,  
		
		listeners: {
            maprender : function(comp, map){
                new google.maps.Marker({
                    position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                    map: map
                });     },
				mapOptions: {
		zoom: 20,
		mapTypeId: google.maps.MapTypeId.HYBRID   }    
 }
},
			xtype:'toolbar',
            
            items:[{
			docked:'bottom', 
                xtype: 'searchfield',
                itemId:'Address',  
                placeHolder: 'Search Address'  
            }]
}
);


var geocoder;
var map;
var marker;


			
function initialize(){
        
map = new google.maps.Map(document.getElementByName("searchfield"));
        
  //GEOCODER
geocoder = new google.maps.Geocoder();
        
marker = new google.maps.Marker({
    map: map,
    draggable: true
  }) };
		


$(document).ready(function() { 
	initialize();
				  
  $(function() {
    $("#Address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'Address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
}
)});

[mitchellsimoens]

You have three extend properties at the top of your class... which do you want?

You are also using jQuery, there really is no need for jQuery at all and will affect performance.