getting "Uncaught TypeError: Cannot read property 'events' of undefined "error ..

**newusername** · 15 Nov 2012, 3:47 AM

Hi I am getting this kind of error , and I am not able to resolve it .. Please help me out ..following is the source code ..

Code:

<html>
	
	<head>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    	<script type="text/javascript" src="ext/ext-all-debug.js"></script>
		<script type="text/javascript">
		
		Ext.onReady(function(){
			Ext.ns("OMS");  


			OMS.POHeaderDetailsForm = Ext.extend(Ext.form.FormPanel,{
			  title             : 'PurchaseOrder',
			  autoScroll        : true,
			  itemid            : 'poHeaderDetailsForm',
			  id                : 'poHeaderDetailsForm',
			  fieldsPrefix      : 'SCC$Order$',
			  termsFieldsPrefix : 'SCC$OrderLine$',
			  url               : "/oms/rest/OMS/enhancedPurchaseOrder/",
			  defaultState      : 'Awaiting Approval',
			  modelLevelType    : "SCC.Order",
			  sysId             : null,
			  orderType         : 'Spot Order',
			  Notes             : {},
			  initComponent     : function(){
			                      //this.layoutConfig = {align: 'stretch'}
			                      //this.plugins      = [new OMS.POHeaderDetailsController()];
			                      //this.addEvents("actionclick"); // this event will be fired when button clicked and is handled in controller
			                      //var poLinesGrid   = OMS.POGrid.getPOLinesGrid(); // create lines grid
			                      //var poLinesLink   = OMS.POHyperLink.getPOLinesHyperLink(); // hyperlink to navigate lines tab
			    
			                      this.items        = [{
			                                              xtype      : 'tabpanel',
			                                              id         : 'poTabbedPanel',
			                                              itemid     : 'poTabbedPanel',
			                                              activeTab  : 0,
			                                              autoScroll : true,
			                                              items      : [this.orderDetailTabItems,
			                                                             { 
			                                                              xtype : 'panel',
			                                                              preventheader : true,
			                                                              autoScroll: true,
			                                                              layout: 'anchor',
			                                                              id : 'poLineGridTab',
			                                                              title : 'Order Lines ('+0+')',
			                                                              items : []
			                                                              } 
			                                                            ]
			                                            }];
			                                           OMS.POHeaderDetailsForm.superclass.initComponent.call(this);
			                        }
			                        
			,orderDetailTabItems : {
			                        labelAlign : 'right',
			                        title      : 'Order Details',
			                        layout     : 'column',
			                        autoScroll : true,
			                        items      : [{
			                                         labelAlign  : 'right' 
			                                        ,layout      : 'form'
			                                        ,items       : [this.leftColumnItems]
			                                      },
			                                      {
			                                        labelAlign  : 'right' 
			                                       ,layout      : 'form'
			                                       ,items       : [this.leftColumnItems]
			                                     }]
			                       }
			,leftColumnItems     : [
			{


			  name               : 'ShipToSite',
			  xtype              : 'autocomplete',
			  fieldLabel         : 'Ship To Site',
			  allowBlank         : false
			}
			                        ]
			});
		
		po= new OMS.POHeaderDetailsForm ();
		po.render(document.body);
		});		


		
		</script>
    	
	</head>
	
	<body>
	
	</body>
</html>

**willigogs** · 15 Nov 2012, 4:18 AM

Well one issue might be because under this.items.items you're attempting to add orderDetailTabItems which hasn't been defined yet...

Same issue with orderDetailTabItems.items where you're attempting to add leftColumnItems.

**newusername** · 15 Nov 2012, 5:47 AM

Thanks for ur reply but till I am not getting what should be the solution ...

**willigogs** · 15 Nov 2012, 7:17 AM

You can only add an object after it has been defined.

In your example, you are attempting to add "orderDetailTabItems" but you don't then write the code to create "orderDetailTabItems" until later - therefore this object will be "undefined".

**newusername** · 15 Nov 2012, 8:55 PM

Hey willi .. Will u please provide some example how to do that .. it will be really helpful...Please please

**newusername** · 18 Nov 2012, 10:59 PM

Originally Posted by willigogs

You can only add an object after it has been defined.

In your example, you are attempting to add "orderDetailTabItems" but you don't then write the code to create "orderDetailTabItems" until later - therefore this object will be "undefined".

Willi Please do reply .. I am very much new to JS and ext js ..

**willigogs** · 19 Nov 2012, 2:27 AM

I'm not sure how much simpler I can explain it

You can't add an object which doesn't exist yet.

Therefore you must create the leftColumnItems and orderDetailTabItems objects BEFORE calling them inside initComponent.

Thread: getting "Uncaught TypeError: Cannot read property 'events' of undefined "error ..

Thread Tools

Search Thread

Display

getting "Uncaught TypeError: Cannot read property 'events' of undefined "error ..

Posting Permissions