PDA

View Full Version : [SOLVED] Vimeo in Form



Fallen Zen
20 Feb 2011, 12:37 PM
I have a panel in a form which should display a vimeo video. I'm retrieving movie ID from the database. How can I display it with using <iframe>. Custom renderer on the panel like this won't work, as the data is inserted after render and the renderer is overwritten, right?



{
xtype: 'panel',
dataIndex: 'vimeoId',
name: 'Vimeo',
renderer: function(Id) {
this.html = '<iframe src="http://player.vimeo.com/video/' + Id + '?title=0&amp;byline=0&amp;portrait=0&amp;color=59a5d1&amp;autoplay=1" width="640" height="360" frameborder="0"></iframe>';
},
html: ''


How I should do it correctly? Any ideas?

Fallen Zen
20 Feb 2011, 11:58 PM
Managed on my own:



{
xtype: 'box',
anchor: '100%',
isFormField: true,
fieldLabel: 'Vimeo',
autoEl: {
tag: 'div',
id: 'Marketing-VimeoFrame',
qtip: 'Vimeo wideo'
}
},
{
xtype: 'textfield',
fieldLabel: 'VimeoId',
id: 'Marketing-VimeoId',
readOnly: true,
hidden: true,
name: 'VimeoId',
anchor: '100%'
}
Loading data after form is filled:


var value = Ext.getCmp('Marketing-VimeoId').getRawValue();
Ext.DomHelper.append(Ext.get('Marketing-VimeoFrame'), '<iframe src="http://player.vimeo.com/video/' + value + '?title=0&amp;byline=0&amp;portrait=0&amp;color=59a5d1&amp;autoplay=1" width="300" height="200" frameborder="0"></iframe>');
Maybe this will help other people.

Condor
21 Feb 2011, 5:53 AM
Why the extra div? I would change the tag:'div' to a tag:'iframe' and set the source initially to Ext.SSL_SECURE_URL.

Next, you only would have to change the existing iframe src instead of adding a new iframe every time.

Fallen Zen
21 Feb 2011, 6:11 AM
Why the extra div? I would change the tag:'div' to a tag:'iframe' and set the source initially to Ext.SSL_SECURE_URL.

Next, you only would have to change the existing iframe src instead of adding a new iframe every time.

You're right, thanks Condor!