Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2852 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    116
    Vote Rating
    0
    JacobGu is on a distinguished road

      0  

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

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


    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>

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    116
    Vote Rating
    0
    JacobGu is on a distinguished road

      0  

    Default


    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>

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

Thread Participants: 1