Error trying to attach event listener to Ext.dom.Element

**JacobGu** · 27 Apr 2012 5:22 AM

Here is test case. The script error occurs in the el.on call made in initSignInProviderListeners, apparently because the Element instance's self.cache variable is not defined.

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Sencha Test</title>
        
        <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
        <link href="sencha-touch.css" rel="stylesheet" type="text/css" />


		<script type="text/javascript">


			Ext.define('Test.view.LoginForm', {
			    extend: 'Ext.form.Panel',
			    alias: 'widget.loginform',


			    config: {


				    fullscreen: true,


					layout: 'vbox',
					submitOnAction: false,
					scrollable: false,
					padding: 18,


					items: [{
						xtype: 'component',
						cls: 'open-login',
						style: 'font-size:12px;font-weight:bold',
						contentEl: 'openLogin', // rendered as div in html file in order to speed up rendering of provider img's in IOS.
						listeners: {
							painted: function(me){
								// There seems to be a Sencha bug in which the x-hidden-display class is not being
								// removed from contentEl, so we'll have to remove it ourselves.
								Ext.get(me.config.contentEl).removeCls('x-hidden-display');
							}
						}
			        }]
				} 
			});
			
			Ext.define('Test.controller.Main', {
			    extend: 'Ext.app.Controller',
				requires: [
					'Test.view.LoginForm',
				],


				config: {


					refs: {
						'loginForm': {
							selector: 'loginform',
							xtype: 'loginform',
							autoCreate: true
						},
						'openLogin': 'loginform component[cls=open-login]'
					},


			        control: {


			        	'loginform component[cls=open-login]': {
			        		painted: 'initSignInProviderListeners'
			        	}
			        }
				},


				initSignInProviderListeners: function(open_login){


					var provider_link_icons = Ext.select('div[class="providerlink"] img', open_login.element.dom);
					provider_link_icons.each(function(el, c, index){
						el.on('tap', this.doSignInProvider, this);
					}, this);
				},


				doSignInProvider: function(e, t){
					var provider = t.className;
					alert(provider);
				},


				init: function(){


					var openLogin = this.getOpenLogin();
					if(!openLogin){
						this.getLoginForm();
						openLogin = this.getOpenLogin();
					}


					if(openLogin && openLogin.rendered){
						this.initSignInProviderListeners(openLogin);
					}
			    }
			});


			Ext.application({
			    name: 'Test',


			    views: ['LoginForm'],
			    models: [],
			    stores: [],
			    controllers: ['Main'],
			
				launch: function() {


					if(!Ext.os.is.iOS){
						// probably desktop browser, so simulate iPhone layout
						Ext.Viewport.setWidth(320);
						Ext.Viewport.setHeight(480);
						Ext.Viewport.setMargin(50); // leave a little space in dom around the viewport
					}
				}
			});
			
		</script>
    </head>
	<body>
		<div id="openLogin" class="x-hidden-display">
	    	<div style="float:left;margin-top:8px;margin-right:10px">Log in using:</div>
			<div class="providerlink" style="float:left;margin-left:5px">
				<img class="google" src="http://www.fareclock.com/static/site/images/icons/google-icon.png" style="width:46px;height:46px">
			</div>
			<div class="providerlink" style="float:left;margin-left:5px">
				<img class="yahoo" src="http://www.fareclock.com/static/site/images/icons/yahoo-icon.png" style="width:46px;height:46px">
			</div>
		</div>
	</body>
</html>

**JacobGu** · 27 Apr 2012 5:41 AM

The same bug repros also if the div element is implemented in the component's template instead of as a contentEl:

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Sencha Test</title>
        
        <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
        <link href="sencha-touch.css" rel="stylesheet" type="text/css" />


		<script type="text/javascript">


			Ext.define('Test.view.LoginForm', {
			    extend: 'Ext.form.Panel',
			    alias: 'widget.loginform',


			    config: {


				    fullscreen: true,


					layout: 'vbox',
					submitOnAction: false,
					scrollable: false,
					padding: 18,


					items: [{
						xtype: 'component',
						cls: 'open-login',
						style: 'font-size:12px;font-weight:bold',
						tpl: [
							'<div id="openLogin">',
						    	'<div style="float:left;margin-top:8px;margin-right:10px">Log in using:</div>',
									'<tpl for="providers">',
										'<div class="providerlink" style="float:left;margin-left:5px">',
											'<img class="{.}" src="http://www.fareclock.com/static/site/images/icons/{.}-icon.png" style="width:46px;height:46px">',
										'</div>',
									'</tpl>',
								'</div>',
							'</div>'
						],
						data: {
							providers: ['google', 'yahoo']
						}						
			        }]
				} 
			});
			
			Ext.define('Test.controller.Main', {
			    extend: 'Ext.app.Controller',
				requires: [
					'Test.view.LoginForm',
				],


				config: {


					refs: {
						'loginForm': {
							selector: 'loginform',
							xtype: 'loginform',
							autoCreate: true
						},
						'openLogin': 'loginform component[cls=open-login]'
					},


			        control: {


			        	'loginform component[cls=open-login]': {
			        		painted: 'initSignInProviderListeners'
			        	}
			        }
				},


				initSignInProviderListeners: function(open_login){


					var provider_link_icons = Ext.select('div[class="providerlink"] img', open_login.element.dom);
					provider_link_icons.each(function(el, c, index){
						el.on('tap', this.doSignInProvider, this);
					}, this);
				},


				doSignInProvider: function(e, t){
					var provider = t.className;
					alert(provider);
				},


				init: function(){


					var openLogin = this.getOpenLogin();
					if(!openLogin){
						this.getLoginForm();
						openLogin = this.getOpenLogin();
					}


					if(openLogin && openLogin.rendered){
						this.initSignInProviderListeners(openLogin);
					}
			    }
			});


			Ext.application({
			    name: 'Test',


			    views: ['LoginForm'],
			    models: [],
			    stores: [],
			    controllers: ['Main'],
			
				launch: function() {


					if(!Ext.os.is.iOS){
						// probably desktop browser, so simulate iPhone layout
						Ext.Viewport.setWidth(320);
						Ext.Viewport.setHeight(480);
						Ext.Viewport.setMargin(50); // leave a little space in dom around the viewport
					}
				}
			});
			
		</script>
    </head>
	<body>
	</body>
</html>

**Jamie Avins** · 27 Apr 2012 7:00 AM

Looks like someone else ran into this bug today as well: http://www.sencha.com/forum/showthre...t-add-listener

We'll hunt it down.

Error trying to attach event listener to Ext.dom.Element

Thread Tools

Search Thread

Display

Error trying to attach event listener to Ext.dom.Element

Error trying to attach event listener to Ext.dom.Element