1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    2
    Vote Rating
    0
    rondog is on a distinguished road

      0  

    Default Answered: Cannot call method 'setStyle' of null

    Answered: Cannot call method 'setStyle' of null


    I am trying to set a style on some text in a tpl property. My items array contains this:
    Code:
    {
        xtype:'panel',
        id:'videoInfoText',
        tpl:'<h3 id="titleText">{title}</h3><p id="descText">{description}</p></font>'
    }
    and in my initialize function I have
    Code:
    initialize : function() {
        var el = Ext.get("titleText");
        if (Ext.os.is.iPad) {
            el.setStyle('color','#ff0000');    
        }
        else
        {
            el.setStyle('color','#ff00ff');
        }
    }
    but I get this error in the console: Uncaught TypeError: Cannot call method 'setStyle' of null

    Does this mean the Ext.get() isn't working?

  2. You are not using listeners properly. Simply setting a method is not going to work. You need to hook into initialize and add a listener:

    Code:
    initialize : function() {
        this.on('painted', 'onPainted', this);
    
        this.callParent();
    },
    
    onPainted : function(cmp) {
        //blah blah
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Check what el is. Also you are overriding initialize and need to call this.callParent();
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    2
    Vote Rating
    0
    rondog is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Check what el is. Also you are overriding initialize and need to call this.callParent();
    I was doing an alert and it was returning [object] so I assumed it was working. I did a console.log and el is indeed null. What do you mean I am overriding it? I assumed initialize just meant when the js file has been loaded and displayed. Am I using the wrong event?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The initialize method is used by the framework, you are overriding it and not calling it's parent therefore not using the framework's code in the initialize method.

    Ext.get is returning null because the html isn't in the DOM yet.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    2
    Vote Rating
    0
    rondog is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    The initialize method is used by the framework, you are overriding it and not calling it's parent therefore not using the framework's code in the initialize method.

    Ext.get is returning null because the html isn't in the DOM yet.
    Gotcha..ok, then what would be the correct event to run this styling code in? I am almost running an updateData event which you helped me on earlier last week. This is the full code for the page I am trying to style (I removed the initialize event)
    Code:
    Ext.define('nativeVoices.view.VideoInfo', {
    	extend:'Ext.Panel',
    	xtype:'videoInfo',
    	
    	requires:[
    		'Ext.Video',
    		'Ext.Button'
    	],
        
        config: { 
        	scrollable:true,
    		styleHtmlContent: true,
    		cls:'videoInfoPage',
    
    
    		items:[
    		{
    				xtype:'button',
    				iconCls:'delete',
    				iconMask:true,
    				ui:'action',
    				width:'36px',
    				height:'36px',
    				style:'float:right',
    				handler:function()
    				{
    					var view = this.up('navigationview');
    					view.pop();
    				}
    			},
    			{
    				xtype:'panel',
    				id:'videoInfoText',
    				tpl:'<h3 id="titleText">{title}</h3><p id="descText">{description}</p></font>'
    			},
    			{
    				xtype:'panel',
    				width:'100%',
    				height:'100%',
    				style:'margin-top:10px;margin-left:auto;margin-right:auto',
    				items:{
    					xtype:'video',
    					width:'100%'
    				}
    			}
    		]
    	},
    
    
    	
    	updateData : function(data) {
            var cmp   = this.down('panel'),
                video = this.down('video');
            console.log(Ext.get('titleText')); //this is null
                
            cmp.setData(data);
            video.setPosterUrl('resources/videos/' + data.thumb);
            video.setUrl('resources/videos/' + data.video);
            
        	(Ext.os.is.iPad) ? videoHeight = 359 : videoHeight = 174;
    
    
        	video.setHeight(videoHeight);
            this.fireEvent('updatedata', this, data);
        }
    });

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You just need to wait for it to be put into the DOM like after the painted event.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    2
    Vote Rating
    0
    rondog is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You just need to wait for it to be put into the DOM like after the painted event.
    The painted event doesn't seem to get fired even though I see my content on screen
    Code:
    Ext.define('nativeVoices.view.VideoInfo', {
        extend:'Ext.Panel',
        xtype:'videoInfo',
        
        requires:[
            'Ext.Video',
            'Ext.Button'
        ],
        
        config: { 
            scrollable:true,
            styleHtmlContent: true,
            cls:'videoInfoPage',
    
    
            items:[
            {
                    xtype:'button',
                    iconCls:'delete',
                    iconMask:true,
                    ui:'action',
                    width:'36px',
                    height:'36px',
                    style:'float:right',
                    handler:function()
                    {
                        var view = this.up('navigationview');
                        view.pop();
                    }
                },
                {
                    xtype:'panel',
                    id:'videoInfoText',
                    tpl:'<h3 id="titleText">{title}</h3><p id="descText">{description}</p></font>'
                },
                {
                    xtype:'panel',
                    width:'100%',
                    height:'100%',
                    style:'margin-top:10px;margin-left:auto;margin-right:auto',
                    items:{
                        xtype:'video',
                        width:'100%'
                    }
                }
            ]
        },
        
        painted:function()
        {
            var el = Ext.get('titleText');
            console.log(el);
            (Ext.os.is.iPad) ? el.setStyle('color','#ff0000') : el.setStyle('color','#ff00ff');
        },
    
    
        
        updateData : function(data) {
            var cmp   = this.down('panel'),
                video = this.down('video');
                
            cmp.setData(data);
            video.setPosterUrl('resources/videos/' + data.thumb);
            video.setUrl('resources/videos/' + data.video);
            
            (Ext.os.is.iPad) ? videoHeight = 359 : videoHeight = 174;
    
    
            video.setHeight(videoHeight);
            this.fireEvent('updatedata', this, data);
        }
    });

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You are not using listeners properly. Simply setting a method is not going to work. You need to hook into initialize and add a listener:

    Code:
    initialize : function() {
        this.on('painted', 'onPainted', this);
    
        this.callParent();
    },
    
    onPainted : function(cmp) {
        //blah blah
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    2
    Vote Rating
    0
    rondog is on a distinguished road

      0  

    Default


    ah ok I get it...I figured it would work much like how updateData worked. Thanks Mitchell

  11. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your updateData method isn't firing because of the updatedata event, it's firing because somewhere the setData method was executed.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar