ux.Media[.Flash/Flex] Components 2.1.2

[hendricd]

@kenshin - Thanks. Yes I'm still playing with the Office suite trials

[DigitalSkyline]

Doug -
You save me too much time... I feel like you should be on the payroll!
(not that I could afford you )

anyways... I'm trying to use this like:

 
{
        id:'clockPortlet',
        xtype: 'flashpanel',
        title: 'Clock',
        hideMode : 'visibility',
        height: 150,
        autoWidth: true,
        collapsible:true,
        border:true,
        mediaType:'SWF',
        url: '/media/flash/clock.swf',
        controls:true,
        start:true
} 

but nothing is showing up in the panel... any idea?

[hendricd]

Still need the mediaCfg for 'flashpanel':

{
        id:'clockPortlet',
        xtype: 'flashpanel',
        title: 'Clock',
        hideMode : 'visibility',
        height: 150,
        autoWidth: true,
        collapsible:true,
        border:true,
        mediaCfg:{
           url: '/media/flash/clock.swf'
          ,controls:true
          ,start:true    //Commas MUST be on the other side  :))
          ,width: 150
          ,height:150
          ,params: { wmode : 'transparent' }  //might want this too.
        }
}

I take checks!

[DigitalSkyline]

Still need the mediaCfg for 'flashpanel':


I take checks!

o I c. Would width/height be redundant?

RE: take checks?

I wouldn't recommend that

PS on second thought, I'm not sure how much time you really save me after I have to rewrite all those commas!

[hendricd]

The seemingly redundant w,h is for the embedded <object> element itself, not its container (Panel.body).

Looking ahead you might want to handle w/h with CSS. Each mediaType has a classNames generated for it as well:

mediaCfg:{
           url: '/media/flash/clock.swf'
          ,id : 'SWFClock'
           ,controls:true
          ,start:true    
          ,width: 150
          ,height:150
          ,params: { wmode : 'transparent' }  //might want this too.
        }

#SWFClock.x-media-swf { ... }

[DigitalSkyline]

As long as the object defaults to 100% w/h then I'm happy with it (seems to be the case)
Thanks, btw This works for me:

{
        id:'clockPortlet',
        xtype: 'flashpanel',
        title: 'Clock',
        height: 150,
        autoWidth: true,
        collapsible:true,
        border:true,
        mediaCfg:{
         mediaType:'SWF',
         url: '/media/flash/clock.swf',
         controls:true,
         start:true
        }
      } 

[hendricd]

MediaPanel.Flash ignores the mediaType as it's known by the class anyway.

For what you're doing, this would be equivalent:

{
        id:'clockPortlet',
        xtype: 'mediapanel',
        title: 'Clock',
        height: 150,
        autoWidth: true,
        collapsible:true,
        border:true,
        mediaCfg:{
         mediaType:'SWF', //here it would be required
         url: '/media/flash/clock.swf',
         unsupportedText:'You need Flash to tell the time.',
         controls:true,
         start:true
        }
      }

[DigitalSkyline]

Gotcha ...

Anyways, I think I might have found a bug, where this panel covers the next item [panel]'s header when expanded.



...hmm...

[hendricd]

Unfortunately the nature of portlets requires hideMode:'display' in order for collapse to work (reflow) as designed.

try putting that params:{wmode : 'transparent'} in the mediaCfg.

or

or Extend MediaPanel to create a MediaPortlet as in the Portlet examples. I believe it has anchor in there, no ?

Short of that, post more of your Portlets code.

[DigitalSkyline]

params:{wmode : 'transparent'}

resulted in this:





The thing is, the clock is not defined as "portlet" The portal is beneath:

     //init Sidebar
     new Ext.Panel({
      region:  'east',
      title:  "Sidebar",
      id:   'SideBarPanel',
      layout:  'rowfit',
      split:  true,
      width:  250,
      minSize: 250,
      maxSize: 250,
      titlebar: true,
      collapsible:true,
      animate: true,
      border:  false,
      frame:  true,
      tbar : ['->',
      {
       id:  'addWidgetbtn',
       text: 'Add Widget',
       handler:dsExt.widgetDialog,
       cls: 'x-btn-text-icon',
       icon: dsExt.vars.ImgPath+'silk/cog_add.png',
       tooltip:'Add Widgets to Your Sidebar'
      }],
      items: [{
        id:'clockPortlet',
        xtype: 'flashpanel',
        title: 'Clock',
        height: 150,
        autoWidth: true,
        collapsible:true,
        border:true,
        mediaCfg:{
         mediaType:'SWF',
         url: '/media/flash/clock.swf',
         controls:true,
         start:true,
         params:{wmode : 'transparent'}
        }
      },{
       //Portal goes here
       xtype:'portal',
       autoScroll:true,
       items:[{
        id: 'SideBarPortal',
        columnWidth:.99,
        items:[{
         title: 'Welcome Message',
         plugins: new Ext.ux.MaximizeTool(),
         html : '<p>Welcome to the blah blah blah.</p>',
         draggable : true,
         tools: tools
        }]//end portal items def
       }]
      }]
     }),//end Sidebar