javascript namespace question

[d0uble_hel1x]

hi all,

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

// 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

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!

[danh2000]

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.

this.cmp2=new var myNameSpace.Module10.SubModule5.Component_22() 

 items:[
        this.cbo1=new new Ext.form.ComboBox({...})
        this.cbo2=new new Ext.form.ComboBox({...})
    ] 

[d0uble_hel1x]

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

here is part of the 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);
    }
});

[danh2000]

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?

[d0uble_hel1x]

i tired

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

[danh2000]

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:

yx.OrderMgmt.EditWindow.Show({}); 

Notice that i renamed Edit as EditWindow.

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',
                            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: {}
                        })
                    });
                },
                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.call(this);
                }
            });
            
            Ext.onReady(function(){
                yx.OrderMgmt.EditWindow.Show({});
            }); 

[d0uble_hel1x]

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

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!!!

[danh2000]

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

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).