Cannot call method 'setStyle' of null

[rondog]

I am trying to set a style on some text in a tpl property. My items array contains this:

{
    xtype:'panel',
    id:'videoInfoText',
    tpl:'<h3 id="titleText">{title}</h3><p id="descText">{description}</p></font>'
}

and in my initialize function I have

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?

[mitchellsimoens]

Check what el is. Also you are overriding initialize and need to call this.callParent();

[rondog]

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?

[mitchellsimoens]

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.

[rondog]

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)

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);
    }
});

[mitchellsimoens]

You just need to wait for it to be put into the DOM like after the painted event.

[rondog]

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

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);
    }
});

[mitchellsimoens]

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:

initialize : function() {
    this.on('painted', 'onPainted', this);

    this.callParent();
},

onPainted : function(cmp) {
    //blah blah
}

[rondog]

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

[mitchellsimoens]

Your updateData method isn't firing because of the updatedata event, it's firing because somewhere the setData method was executed.