Results 1 to 10 of 10

Thread: Cannot create an instance of unrecognized alias: widget.gmappanel

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default Answered: Cannot create an instance of unrecognized alias: widget.gmappanel

    i call it from window


    Code:
    var cont = new Ext.Window({
                    layout: 'fit',
                    closeAction: 'hide',
                    border: false,
    width:1162, 
    height:380,
     renderTo: Ext.getBody(),
    title: '?????',
    resizable: false,  
    draggable: false,
    closable: false,
    border: false,
    x:200,
    y:70,
     items: {
                        xtype: 'gmappanel',
                        zoomLevel: 14,
                        gmapType: 'map',
                        mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                        setCenter: {
                            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                            marker: {title: 'Fenway Park'}
                        },
                        markers: [{
                            lat: 42.339641,
                            lng: -71.094224,
                            marker: {title: 'Boston Museum of Fine Arts'},
                            listeners: {
                                click: function(e){
                                    Ext.Msg.alert({title: 'Its fine', text: 'and its art.'});
                                }
                            }
                        },{
                            lat: 42.339419,
                            lng: -71.09077,
                            marker: {title: 'Northeastern University'}
                        }]
                    }
    
    
    });    
    
    
    cont.show();
    but i have errors on firebug http://clip2net.com/s/1hzcj
    why? what is it?

  2. Include this:

    Code:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
    here is my entire page that is working:


    Code:
    <html>
    <head>
        <title>ExtJS 4 Test</title>
    
        <link rel="stylesheet" type="text/css" href="http://extjs4/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs4/ext-all-debug.js"></script>
    
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
    
        <script type="text/javascript">
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            'Ext.ux' : '../ext-4.0.7/examples/ux'
        }
    });
    Ext.require([
        'Ext.window.*',
        'Ext.ux.GMapPanel'
    ]);
    
    Ext.onReady(function(){
        var mapwin = Ext.create('Ext.Window', {
                    layout: 'fit',
                    title: 'GMap Window',
                    closeAction: 'hide',
                    width:450,
                    height:450,
                    border: false,
                    x: 40,
                    y: 60,
                    items: {
                        xtype: 'gmappanel',
                        zoomLevel: 14,
                        gmapType: 'map',
                        mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                        setCenter: {
                            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                            marker: {title: 'Fenway Park'}
                        },
                        markers: [{
                            lat: 42.339641,
                            lng: -71.094224,
                            marker: {title: 'Boston Museum of Fine Arts'},
                            listeners: {
                                click: function(e){
                                    Ext.Msg.alert({title: 'Its fine', text: 'and its art.'});
                                }
                            }
                        },{
                            lat: 42.339419,
                            lng: -71.09077,
                            marker: {title: 'Northeastern University'}
                        }]
                    }
                });
    
            mapwin.show();
    
     });
        </script>
    </head>
        <body>
        </body>
    </html>
    You will need to change the script and link tag to point to wherever you have ext js 4.x

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,389
    Answers
    3997

    Default

    Did you include the GMapPanel.js file?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default

    Did you include the GMapPanel.js file?


    how?

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,389
    Answers
    3997

    Default

    Quote Originally Posted by sedoyksa View Post
    how?
    Two ways...

    1. Add it to the Ext.require call (copy the class JS file to a folder where you keep any ux files)
    2. Include it as a script tag.


    The ux classes usually aren't included in the framework.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default

    just a simple
    <script type="text/javascript" src="google/ux/gmappanel.js"></script>
    yes?

  7. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,389
    Answers
    3997

    Default

    As long as that JS file is the correct one that comes with the 2.x framework.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  8. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default

    i write it but error is still

  9. #8
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default

    the error still on
    i have correct file from ext-4.0.7-gpl

  10. #9
    Sencha User
    Join Date
    Sep 2011
    Posts
    15

    Default

    it works!!!

  11. #10
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,389
    Answers
    3997

    Default

    Include this:

    Code:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
    here is my entire page that is working:


    Code:
    <html>
    <head>
        <title>ExtJS 4 Test</title>
    
        <link rel="stylesheet" type="text/css" href="http://extjs4/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs4/ext-all-debug.js"></script>
    
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
    
        <script type="text/javascript">
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            'Ext.ux' : '../ext-4.0.7/examples/ux'
        }
    });
    Ext.require([
        'Ext.window.*',
        'Ext.ux.GMapPanel'
    ]);
    
    Ext.onReady(function(){
        var mapwin = Ext.create('Ext.Window', {
                    layout: 'fit',
                    title: 'GMap Window',
                    closeAction: 'hide',
                    width:450,
                    height:450,
                    border: false,
                    x: 40,
                    y: 60,
                    items: {
                        xtype: 'gmappanel',
                        zoomLevel: 14,
                        gmapType: 'map',
                        mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                        setCenter: {
                            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                            marker: {title: 'Fenway Park'}
                        },
                        markers: [{
                            lat: 42.339641,
                            lng: -71.094224,
                            marker: {title: 'Boston Museum of Fine Arts'},
                            listeners: {
                                click: function(e){
                                    Ext.Msg.alert({title: 'Its fine', text: 'and its art.'});
                                }
                            }
                        },{
                            lat: 42.339419,
                            lng: -71.09077,
                            marker: {title: 'Northeastern University'}
                        }]
                    }
                });
    
            mapwin.show();
    
     });
        </script>
    </head>
        <body>
        </body>
    </html>
    You will need to change the script and link tag to point to wherever you have ext js 4.x
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •