1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    PhoenixSenchaBeginner is on a distinguished road

      0  

    Default Unanswered: Uncaught Error: [Ext.create] Invalid class name or alias 'undefined' specified

    Unanswered: Uncaught Error: [Ext.create] Invalid class name or alias 'undefined' specified


    Hi guys. I'm new to sencha touch development.
    I've been trying to get something like the kittens list example running from the tutorial at this link:
    http://www.sencha.com/blog/dive-into...ouch-2-beta-2/

    I have three views whose code is as follows:

    --------
    Main.js
    --------
    Code:
    Ext.define("Example.view.Main", {
        extend: 'Ext.tab.Panel',
        requires: [
            'Ext.TitleBar',
            'Ext.Video',
            'Ext.carousel.Carousel'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
    	        {
    	    		xtype: 'carousel',
    				title: 'Menu',
                    iconCls: 'favorites',
    
    
                    items: [
    	    			{
    		    			style: "background-color: #292728; color:#E22028;",
    			    		title: "Page 1",
    			    		html: 'Menu'
    	    			},
    	    			
    	    			{ xtype: 'menulist' }
    	    		]
    	    	}
            ]
        }
    });
    ------------
    menuList.js
    ------------
    Code:
    Ext.define('Example.view.menuList', {
        extend: 'Ext.dataview.DataView',
        xtype: 'menulist',
        requires: [
            'Example.view.menuListItem',
            'Ext.data.Store'
        ],
        config: {
    	    useComponents: true,
    	    defaultType: 'menulistitem',
    	    store: {
    	        fields: [
    	            "name",
    	            "image",
    	            { name: "cuteness", type: 'int' }
    	        ],
    	        data: [
    	           { name: 'Yawning kitten', image: 'data/images/kitten1.jpg', cuteness: 70 },
    	           { name: 'Sitting kitten', image: 'data/images/kitten2.jpg', cuteness: 90 },
    	           { name: 'Evil kitten', image: 'data/images/kitten3.jpg', cuteness: 70 },
    	           { name: 'Ginger kitten', image: 'data/images/kitten4.jpg', cuteness: 80 },
    	           { name: 'Kitten friends', image: 'data/images/kitten5.jpg', cuteness: 20 },
    	           { name: 'Milk kitten', image: 'data/images/kitten6.jpg', cuteness: 50 }
    	        ]
    	    }
        }
    });
    --------------
    menuListItem
    --------------
    Code:
    Ext.define('Example.view.menuListItem', {
        extend: 'Ext.dataview.component.DataItem',
        xtype: 'menulistitem',
     
        config: {
        	
            dataMap: {
                getImage: {
                    setSrc: 'image'
                },
    
    
                getName: {
                    setHtml: 'name'
                },
    
    
                getSlider: {
                    setValue: 'cuteness'
                }
            },
        	
            image: true,
     
            name: {
                cls: 'x-name',
                flex: 1
            },
     
            slider: {
                flex: 2
            },
     
            layout: {
                type: 'hbox',
                align: 'center'
            }
        },
        
    	applyImage: function(config) {
    	return Ext.factory(config, Ext.Img, this.getImage());
    	},
     
    	updateImage: function(newImage, oldImage) {
    		if (newImage) {
    			this.add(newImage);
    		}
    	 
    		if (oldImage) {
    			this.remove(oldImage);
    		}
    	},
    	
    	applyName: function(config) {
            return Ext.factory(config, Ext.Component, this.getName());
        },
        
        updateName: function(newName, oldName) {
            if (newName) {
                this.add(newName);
            }
    
    
            if (oldName) {
                this.remove(oldName);
            }
        },
        
        applySlider: function(config) {
            return Ext.factory(config, Ext.slider.Slider, this.getSlider());
        },
        
        updateSlider: function(newSlider, oldSlider) {
            if (newSlider) {
                this.add(newSlider);
            }
    
    
            if (oldSlider) {
                this.remove(oldSlider);
            }
        }
    });
    When I run it in the browser i get the error:
    Uncaught Error: [Ext.create] Invalid class name or alias 'undefined' specified, must be a non-empty string

    How can i fix this please?

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    Run a debugger in the browser - set a break point and find out the components alias name that is undefined.
    Look up the call stack to see which component is being initialised

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    2
    the_Chameleon is on a distinguished road

      0  

    Default


    hello,

    Can you copy your app code (Ext.Application).

    You have to specify all component in you application classe.

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    2
    the_Chameleon is on a distinguished road

      0