Results 1 to 2 of 2

Thread: "Uncaught RangeError: Maximum call stack size exceeded"

  1. #1

    Exclamation "Uncaught RangeError: Maximum call stack size exceeded"

    Ok, so here is a situation, that I either need to figure out another way of doing the same thing... or figure out why this is happening.

    I have a Tab Panel, inside of that tab panel is a NestedList, that nested list reference a card that is another TabPanel. Each TabPanel item is of another component type (FormPanel & Panel)... when i attempt to do this I console logs "Uncaught RangeError: Maximum call stack size exceeded", and nothing happens.

    Here is displaying what im triyng to do:

    *Note: In order to get what is shown in the image displayed, i had to remove the call to the formPanel Component and just supply blank html attribute. Otherwise the Maximum call stack error is thrown.



    Viewport.js
    Code:
    App.views.Viewport = Ext.extend(Ext.TabPanel, {
        fullscreen: true,
        tabBar: {
    		dock: 'bottom',
    		layout: {
    			pack: 'center'
    		}
        },
        layout: 'card',
        padding: 0,
        items: [
        	{
        		xtype:'App.views.HomeMenu'
        	},
        	{
        		title:"Test",
        		iconCls: 'download'
        	},
        	{
        		title:"Test",
        		iconCls: 'bookmark'
        	},
        	{
        		title:"Test",
        		iconCls: 'download'
        	},
        ]
    });
    HomeMenu.js:
    Code:
     App.views.HomeMenu = Ext.extend(Ext.NestedList, {
        title: 'Home',
        iconCls: 'home',
        padding: 0,
        width: '100%',
        height: '100%',
        cardSwitchAnimation: 'slide',
        initComponent: function() {
            Ext.apply(this, {
                store: App.stores.MainMenu,
                getDetailCard: function(item, parent) {
                    var itemData = item.attributes.record.data;
                    return itemData.card;
                }
            });
            
            App.views.HomeMenu.superclass.initComponent.apply(this, arguments);
    	}
    });
    
    Ext.reg('App.views.HomeMenu', App.views.HomeMenu);
    RegisterSync.js:
    Code:
    App.views.HomeRegisterSync = Ext.extend(Ext.TabPanel, {
        tabBar: {
    		dock: 'top',
    		layout: {
    			pack: 'center'
    		}
        },
        items: [
        	{
        		title:"Register",
        		html: '',
        		//xtype: 'App.views.HomeRegister',
        	},
        	{
        		title:"Sync",
        		html: '',
        		//xtype: 'App.views.HomeSync',
        	}
        ]
    });
    Questions:

    Is this a sencha problem?

    Is this a bad design concept? (Most apps i see work like this)

    Is there another route to take, instead of nesting so many elements?

  2. #2

    Default

    Solved the issue, was referencing a view file from within itself causing an infinite loop

Tags for this Thread

Posting Permissions

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