Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Error When Extending Toolbar Class

  1. #1

    Default Error When Extending Toolbar Class

    I am relatively new to Extjs and need assistance in resolving an issue I am having when pre-configuring the Toolbar class . Here is my class extension code encapsulated in file application.adminmenu.js:

    Code:
    Application.AdminMenu = new Ext.Toolbar({
    height: 23 ,items: [
    {
    text: 'Orders' ,menu: OrderMenu // <- local var
    } ,{
    text: 'Inventory' ,menu: InventoryMenu // <- local var
    }
    ]
    }); // eo Application.AdminMenu Ext.reg('adminmenu', Application.AdminMenu);
    When I call the xtype from my application.js script, it blows up in FireBug as 'Application.AdminMenu undefined'. Thank you!
    Last edited by Chris55; 21 Sep 2009 at 7:15 PM. Reason: More Information

  2. #2
    Sencha User karieanis's Avatar
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    110

    Default

    I would strongly suggest that you read the following article on extending Ext classes: http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies. What you're currently doing is instancing a class, and trying to make an xtype for this instance. An xtype should be a reference to the class name it needs to construct the required object.
    Jeremy Rayner
    Software Engineer

  3. #3

    Default

    Thank you for the response. I will read the tutorial reference you provided. I have read Saki's contribution to "Writing a Big Application in Ext (parts 1-3)." The link is here: http://blog.extjs.eu/know-how/writin...cation-in-ext/. However, still a little puzzled why my Application.AdminMenu reference is null.

    Quote Originally Posted by karieanis View Post
    I would strongly suggest that you read the following article on extending Ext classes: http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies. What you're currently doing is instancing a class, and trying to make an xtype for this instance. An xtype should be a reference to the class name it needs to construct the required object.

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698

    Default

    Chris55,

    The error message you provide is throwing me off scent - I would expect an invalid constructor message or similar. I also doubt that the Ext.reg call would provide any error message - I don't think you've posted the code that is producing the error.

    Anyway, a couple of things to look into:

    Have you namespaced 'Application' before you attempt to use it?

    How will you expect to reuse an instance? it isn't a constructor, so the reg call is useless anyway.

    If you actually wanted to extend the toolbar class, that's not what you are doing, you would want to use Ext.extend, not create an instance with the new keyword.

  5. #5

    Default

    You are right. After reading the "newbies" extension article I see mistakes I have generated. I will make changes and post the results later today (currently 1:30 AM EST and I am tired). Thanks again.

    Quote Originally Posted by danh2000 View Post
    Chris55,

    The error message you provide is throwing me off scent - I would expect an invalid constructor message or similar. I also doubt that the Ext.reg call would provide any error message - I don't think you've posted the code that is producing the error.

    Anyway, a couple of things to look into:

    Have you namespaced 'Application' before you attempt to use it?

    How will you expect to reuse an instance? it isn't a constructor, so the reg call is useless anyway.

    If you actually wanted to extend the toolbar class, that's not what you are doing, you would want to use Ext.extend, not create an instance with the new keyword.

  6. #6

    Default

    I performed more reading about Extending an Ext class (among other things, of course) but my toolbar still does not render when calling it from my page.init :: xtype: AdminMenu. Below is the toolbar source that I encapsulate in a file called Application.AdminMenu. Your help is appreciated. Thanks.

    Code:
    var OrderMenu = new Ext.menu.Menu({
        items: [
            {
                text: 'Summary'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Fulfillment'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Back Orders'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Returns'
                /*,handler: onItemClick*/
            }
        ]
    });
    
    var InventoryMenu = new Ext.menu.Menu({
        items: [
            {
                text: 'Merchandise'
                /*,handler: onItemClick*/
                ,items: [
                    {
                        text: 'New'
                        /*,handler: onItemClick*/
                    }
                    ,{
                        text: 'Edit'
                        /*,handler: onItemClick*/
                    }
                ]
            }
            ,{
                text: 'Edit Merchandise'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Quantity'
                /*,handler: onItemClick*/
            }
        ]
    });
    
    Application.AdminMenu = Ext.extend(Ext.Toolbar, {
                initComponent:function() {
                    Ext.apply(this, {
                        height: 23
                        ,items: [
                            {
                                text: 'Orders'
                                ,menu: OrderMenu
                            }
                            ,{
                                text: 'Inventory'
                                ,menu: InventoryMenu
                            }
                        ]
                    })
                    Application.AdminMenu.superClass.initComponent.apply(this, arguments);
                } // eo function initComponent
            }
        );  // eo Application.AdminMenu
    
    Ext.reg('adminmenu', Application.AdminMenu);

  7. #7

    Default

    I could really use a second eye here. I am trying to prototype a sample UI for my boss so that we can move over to Extjs for future Web 2.0 work. So your input is appreciated. Thanks again.
    Last edited by Chris55; 23 Sep 2009 at 1:53 PM. Reason: Want resolution to develop prototype app for our Dev Group

  8. #8
    Sencha User karieanis's Avatar
    Join Date
    Jun 2008
    Location
    Melbourne, Australia
    Posts
    110

    Default

    You're missing a namespace statement for Application.AdminMenu, which should appear like so:

    Code:
      Ext.namespace('Application.AdminMenu');
    
      Application.AdminMenu = ...
    Also, make sure that superclass is lowercase.
    Jeremy Rayner
    Software Engineer

  9. #9

    Default

    Thank you for the reply. I made the changes you suggested but still cannot render the extended toolbar. If I create a new Toolbar, like the south region, it works fine. But if I include the AdminMenu xtype, it doesn't render at all. I included the full source below encapsulated in 2 files:

    Code:
    // file: application.js
    
    Ext.BLANK_IMAGE_URL = 'ext/ext-3.0.0/resources/images/default/s.gif';
    Ext.ns('Application');
    
    var page = {};
    page.init = function()
    {
    
        this.viewport = new Ext.Viewport({
            id: 'page-viewport'
            ,layout: 'border'
            ,title: 'Console Name'
            ,items: [
                        {
                            region: 'north'
                            ,id: 'north-panel'
                            ,height: 23
                            ,layout: {
                                type: 'toolbar'
                            }
                            ,xtype: 'adminmenu'  //<- inlcude for admin menu
                        }
                        ,{
                            region: 'south'
                            ,id: 'south-panel'
                            ,height: 23
                            ,margin: '0 0 0 0'
                            ,tbar: new Ext.Toolbar(
                                {
                                    height: 23
                                    ,items: ["South Toolbar"]
                                }
                            )
                        }
                        ,{
                            /*layout: 'border',*/
                            id: 'layout-browser'
                            ,region:'west'
                            ,border: false
                            ,split:true
                            ,margins: '2 0 5 5'
                            ,width: 250
                            ,minSize: 100
                            ,maxSize: 500
                            /*,items: [treePanel, detailsPanel]*/
                            ,layout: {
                                type: 'accordion'
                            }
                            ,layoutConfig: {
                                animate: true
                            }
                            ,items: [
                                {
                                    title: 'Treeview'
                                    ,html: '<p>TreeView to go here.</p>'
                                    ,border: false
                                }
                                ,{
                                    title: 'Notifications'
                                    ,html: '<p>Notifications to go here.</p>'
                                    ,border: false
                                }
                            ]
                        }
                        /*,new Ext.TabPanel({
                                region: 'center'
                                ,deferredRender: false
                                ,activeTab: 0,
                                items: [
                                        {
                                            title: 'Welcome'
                                            ,autoScroll: true
                                            ,html: '<p>Content here.</p>'
                                        }
                                ]
                            })*/
                         ,{
                            id: 'content-panel'
                            ,region: 'center'
                            ,layout: 'card',
                            layoutConfig: {deferredRender: false}
                            ,margins: '2 5 5 0'
                            ,activeItem: 0,
                            border: false,
                            items: [
                                    {
                                        id: 'start-panel'
                                        ,layout: 'fit'
                                        ,bodyStyle: 'padding:25px'
                                        ,margin: '8 8 8 8'
                                        /*,contentEl: 'start-div'*/
                                    }
                            ]
                        }
                    ]
            }); // eo Viewport instance
    
    };// eo function page.init
    
    Ext.onReady(page.init, page, true);
    // eo file application.js
    
    
    // file application.adminmenu.js
    var OrderMenu = new Ext.menu.Menu({
        items: [
            {
                text: 'Summary'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Fulfillment'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Back Orders'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Returns'
                /*,handler: onItemClick*/
            }
        ]
    }); // eo var OrderMenu
    
    var InventoryMenu = new Ext.menu.Menu({
        items: [
            {
                text: 'Merchandise'
                /*,handler: onItemClick*/
                ,items: [
                    {
                        text: 'New'
                        /*,handler: onItemClick*/
                    }
                    ,{
                        text: 'Edit'
                        /*,handler: onItemClick*/
                    }
                ]
            }
            ,{
                text: 'Price'
                /*,handler: onItemClick*/
            }
            ,{
                text: 'Quantity'
                /*,handler: onItemClick*/
            }
        ]
    }); // eo var InventoryMenu
    
    Ext.ns('Application.AdminMenu');
    Application.AdminMenu = Ext.extend(Ext.Toolbar, {
                initComponent:function() {
                    Ext.apply(this, {
                        height: 23
                        ,items: [
                            {
                                text: 'Orders'
                                ,menu: OrderMenu
                            }
                            ,{
                                text: 'Inventory'
                                ,menu: InventoryMenu
                            }
                        ]
                    })
                    Application.AdminMenu.superclass.initComponent.apply(this, arguments);
                } // eo function initComponent
            }
        );  // eo Application.AdminMenu
    
    Ext.reg('adminmenu', Application.AdminMenu);
    // eo file application.adminmenu.js
    Quote Originally Posted by karieanis View Post
    You're missing a namespace statement for Application.AdminMenu, which should appear like so:

    Code:
      Ext.namespace('Application.AdminMenu');
    
      Application.AdminMenu = ...
    Also, make sure that superclass is lowercase.

  10. #10
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698

    Default

    Chris,

    You only need Ext.ns('Application') then you can start using it (it just creates an object), so your Ext.ns('Application.AdminMenu') isn't needed.

    When you declare the 'AdminMenu', you are really just creating a property on the 'Application' object named 'AdminMenu'.

    When you specify layouts, you can just use a string not an object if specifying the type:

    PHP Code:
    layout'toolbar' 
    and

    PHP Code:
    layout'accordian' 
    Also get a copy of Firebug plugin for FireFox and run it with 'Break on all errors'.

    This should get you closer...

Page 1 of 2 12 LastLast

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
  •