Results 1 to 8 of 8

Thread: javascript namespace question

  1. #1

    Post javascript namespace question

    hi all,

    i'm running into a strange javascript issue (probably namespace) which i don't understand. i have the following:

    Code:
    // this is a singleton
    var myNameSpace.Module10.SubModule5=function(){
    return{
    
      this.win=Ext.Window(
        ...
        region:'north'
        items:[this.cmp1=new myNameSpace.Module10.SubModule5.Component_1()]
       ....
        region:'south'
        items:[this.cmp2=new myNameSpace.Module10.SubModule5.Component_22()]
      )
    }}();
    
    // components
    
    myNameSpace.Module10.SubModule5.Component_1 = Ext.extend(Ext.grid.GridPanel,{...
    
    myNameSpace.Module10.SubModule5.Component_22 = Ext.extend(Ext.FormPanel,{...
        ...
        items:[
            this.cbo1=new Ext.form.ComboBox({...})
            this.cbo2=new Ext.form.ComboBox({...})
        ]
    the code runs fine for the first time. after which it craps out on

    Code:
    myNameSpace.Module10.SubModule5.Component_22 is not a constructor.
    i realized that by removing the comboboxex removes the error but that doesn't solve the problem.

    i finally renamed:

    myNameSpace.Module10.SubModule5.Component_22

    to

    myNameSpace.Module10.SubModule5___Component_22

    and it worked fine. it took me 1/2 a day to figure that out but i still dont understand what the problem is. can anyone help clarifying?

    thanks!

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

    Default

    Hi,

    I think you'll need to post the real code or an online example for anyone to help..

    I do notice the funny var in snippet 1 below, and that you don't have a comma seperating the combos in the items collection (snippet 2 below), but I understand that this is not your real code and am guessing that these problems are just where you've edited it for the forum - that's why it's difficult to help and why I suggest that you'd have to post the full code.

    PHP Code:
    this.cmp2=new var myNameSpace.Module10.SubModule5.Component_22() 
    PHP Code:
     items:[
            
    this.cbo1=new new Ext.form.ComboBox({...})
            
    this.cbo2=new new Ext.form.ComboBox({...})
        ] 

  3. #3

    Default

    sorry that was a cut and paste error. above code is updated.

    here is part of the code:


    Code:
    yx.OrderMgmt.Edit = function(){
    return{
        // init section
        Init : function(){                    
            this.win = new Ext.Window({
                title: 'Edit Order',
                closeAction:'close',
                layout: 'border',
                width:800,
                height:550,
                plain:true,
                modal :true,
                items: [
                    {    // north
                        region:'north',
                        layout:'border',
                        height: 120,
                        items:[
                            { // west
                                region:'west',
                                title:'Original details',
                                layout:'fit',
                                width : 300,
                                items:[
                                    {}
                                ]
                                
                            },
                            { // center
                                region:'center',
                                title:'New details',
                                layout:'fit',
                                width: 300,
                                items:[
                                    {}
                                ]
                            }
                        ]
                    },
                    {    // center
                        region:'center',
                        title:'Order Editor',
                        layout:'border',
                        items:[
                            {
                                region:'west',
                                layout:'fit',
                                width:220,
                                items:[
                                    this.SearchBox=new yx.OrderMgmt.Edit.SearchBox()
                                ]
                            },
                            {
                                region:'center',
                                layout:'fit',
                                items:[
                                    {}
                                ]
                            }
                        ]
                    }
                ],
                buttons:[
                    {text: 'Confirm Update',handler:this.ConfirmUpdate,scope:this}
                ]
            });
        },
        Show : function(obj){
            this.Caller = obj;
            //if(!this.win)
            this.Init();
            this.win.show();
        }
    
    }}();
    
    yx.OrderMgmt.Edit.SearchBox = Ext.extend(Ext.FormPanel,{
        initCombos:function(){
    
            var StartDate = new Date();
            this.ddate = new Ext.form.DateField({
                fieldLabel:'Date',
                //vtype: 'daterange',
                //endDateField: RDateID,
                minValue :StartDate.format("m/d/Y"),
                value:"",
                triggerAction: 'all'
            });
    
            this.destination = new Ext.form.ComboBox({
                fieldLabel:'To',
                valueField:'destinationid',                    
                displayField:'destination',   
                emptyText:'Going to...',
                lastQuery:'',
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,
                typeAhead: true,
                store: new Ext.data.SimpleStore({
                    fields:['originid', 'origin','destinationid', 'destination'],
                    data:Routes
                })
            });
        },
        initComponent: function(){
        
            this.initCombos();
            
            Ext.apply(this,{
                //labelWidth: 80, // label settings here cascade unless overridden
                //defaults: {width:120},
                //title: 'Search',
                bodyStyle:'padding:5px 5px 0',
                defaultType: 'textfield',
                frame:true,
                items: [
                    {
                        xtype:'fieldset',
                        title: 'New Travel Details',
                        autoHeight:true,
                        width:200,
                        defaults: {width: 120},
                        labelWidth :50,
                        items :[
                            this.destination,
                            this.ddate
                        ],
                        buttons: [
                            {
                                text: 'Search',
                                handler:function(){
                                },
                                scope:this
                            }]
                        
                    }
                ]
            });
            
            yx.OrderMgmt.Edit.SearchBox.superclass.initComponent.apply(this, arguments);
        }
    });

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

    Default

    What about the order of the declarations:

    The yx.OrderMgmt.Edit closure executes instantly with the '()' at the bottom, have you tried declaring the yx.OrderMgmt.Edit.SearchBox extend call before the closure?

  5. #5

    Default

    i tired

    Code:
    items:[
      this.SearchBox=new yx.OrderMgmt.Edit.SearchBox
    ]
    but it still doesn't work. it looks like to me that "yx.OrderMgmt.Edit.SearchBox is not a constructor" means that it was garbage collected and destroyed...but how can that be possible?

    this error appears in both FF3 and IE7

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

    Default

    Ah... I now see your issue - your declaring yx.OrderMgmt.Edit as the namespace of the SearchBox but you also declare it as your anon Window closure - try the code below instead - you should be able to paste it into a page which references Ext and test it by closing the window then using the firebug console to reopen it with this call:

    PHP Code:
    yx.OrderMgmt.EditWindow.Show({}); 
    Notice that i renamed Edit as EditWindow.


    PHP Code:
    yx = {};
                
    yx.OrderMgmt = {};
                
    yx.OrderMgmt.Edit = {};
                
                
    yx.OrderMgmt.EditWindow = function(){
                    return {
                        
    // init section
                        
    Init: function(){
                            
    this.win = new Ext.Window({
                                
    title'Edit Order',
                                
    closeAction'close',
                                
    layout'border',
                                
    width800,
                                
    height550,
                                
    plaintrue,
                                
    modaltrue,
                                
    items: [{ // north
                                    
    region'north',
                                    
    layout'border',
                                    
    height120,
                                    
    items: [{ // west
                                        
    region'west',
                                        
    title'Original details',
                                        
    layout'fit',
                                        
    width300,
                                        
    items: [{}]
                                    
                                    }, { 
    // center
                                        
    region'center',
                                        
    title'New details',
                                        
    layout'fit',
                                        
    width300,
                                        
    items: [{}]
                                    }]
                                }, { 
    // center
                                    
    region'center',
                                    
    title'Order Editor',
                                    
    layout'border',
                                    
    items: [{
                                        
    region'west',
                                        
    layout'fit',
                                        
    width220,
                                        
    items: [this.SearchBox = new yx.OrderMgmt.Edit.SearchBox()]
                                    }, {
                                        
    region'center',
                                        
    layout'fit',
                                        
    items: [{}]
                                    }]
                                }],
                                
    buttons: [{
                                    
    text'Confirm Update',
                                    
    handlerthis.ConfirmUpdate,
                                    
    scopethis
                                
    }]
                            });
                        },
                        
    Show: function(obj){
                            
    this.Caller obj;
                            
    //if(!this.win)
                            
    this.Init();
                            
    this.win.show();
                        }
                        
                    };
                }();
                
                
    yx.OrderMgmt.Edit.SearchBox Ext.extend(Ext.FormPanel, {
                    
    initCombos: function(){
                    
                        var 
    StartDate = new Date();
                        
    this.ddate = new Ext.form.DateField({
                            
    fieldLabel'Date',
                            
    //vtype: 'daterange',
                            //endDateField: RDateID,
                            
    minValueStartDate.format("m/d/Y"),
                            
    value"",
                            
    triggerAction'all'
                        
    });
                        
                        
    this.destination = new Ext.form.ComboBox({
                            
    fieldLabel'To',
                            
    valueField'destinationid',
                            
    displayField'destination',
                            
    emptyText'Going to...',
                            
    lastQuery'',
                            
    mode'local',
                            
    triggerAction'all',
                            
    selectOnFocustrue,
                            
    typeAheadtrue,
                            
    store: new Ext.data.SimpleStore({
                                
    fields: ['originid''origin''destinationid''destination'],
                                
    data: {}
                            })
                        });
                    },
                    
    initComponent: function(){
                    
                        
    this.initCombos();
                        
                        
    Ext.apply(this, {
                            
    //labelWidth: 80, // label settings here cascade unless overridden
                            //defaults: {width:120},
                            //title: 'Search',
                            
    bodyStyle'padding:5px 5px 0',
                            
    defaultType'textfield',
                            
    frametrue,
                            
    items: [{
                                
    xtype'fieldset',
                                
    title'New Travel Details',
                                
    autoHeighttrue,
                                
    width200,
                                
    defaults: {
                                    
    width120
                                
    },
                                
    labelWidth50,
                                
    items: [this.destinationthis.ddate],
                                
    buttons: [{
                                    
    text'Search',
                                    
    handler: function(){
                                    },
                                    
    scopethis
                                
    }]
                            
                            }]
                        });
                        
                        
    yx.OrderMgmt.Edit.SearchBox.superclass.initComponent.call(this);
                    }
                });
                
                
    Ext.onReady(function(){
                    
    yx.OrderMgmt.EditWindow.Show({});
                }); 

  7. #7

    Default

    i think the problem lies in the structure of my class:

    Code:
    yx={}
    
    yx.OrderMgmt = Ext.extend(Ext.app.Module,{...
    
    yx.OrderMgmt.Edit = function(){   // problematic singleton sandwiched between
    return{...}}();                           // classes?
    
    yx.OrderMgmt.Edit.OrderDetails=Ext.extend(Ext.grid.GridPanel,{...
    yx.OrderMgmt.Edit.SearchBox = Ext.extend(Ext.FormPanel,{...
    i renamed it to yx.OrderMgmt.EditWin like you suggested and it ran fine.

    thanks!!!

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

    Default

    Quote Originally Posted by d0uble_hel1x View Post
    i think the problem lies in the structure of my class:

    Code:
    yx={}
    
    yx.OrderMgmt = Ext.extend(Ext.app.Module,{...
    
    yx.OrderMgmt.Edit = function(){   // problematic singleton sandwiched between
    return{...}}();                           // classes?
    
    yx.OrderMgmt.Edit.OrderDetails=Ext.extend(Ext.grid.GridPanel,{...
    yx.OrderMgmt.Edit.SearchBox = Ext.extend(Ext.FormPanel,{...
    i renamed it to yx.OrderMgmt.EditWin like you suggested and it ran fine.

    thanks!!!
    Renaming it works because your no longer redeclaring your namespace.

    Remember that a namespace is an object and so is a function - if you use yx.OrderMgmt.Edit as a namespace, you can't assign a function to yx.OrderMgmt.Edit without wiping out everything else that was a propert of the namespace (SearchBox, OrderDetails).

Posting Permissions

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