Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:

Exercise 2-10: Playing a Video

Page of 168
Displaying a Video


During this lab, you will display a video by instantiating the Ext.Video component.

  • Use Ext.Video to play a video file


Define the View

  1. Open Sencha Architect
  2. Open the following project:

    Note: This is the solution from the prior exercise.
  3. From the Toolbox, drag a Container and drop it onto the Main view of the Project Inspctor.
  4. Configure the following Ext.Container Properties:
    • title: Drink
    • iconCls: tv
    • layout: hbox
    • pack: center
    • align: center
    • itemId: friendsvideo
  5. From the Toolbox, drag a Titlebar component and drop it onto the friendsvideo view.
  6. Configure the following Ext.Titlebar property:
    • title: Drink with Friends
  7. From the Toolbox, drag a Video component and drop it onto the friendsvideo view.
  8. Configure the following properties:
    • autoResume: true
    • loop: true
    • muted: false
    • url:
    • posterUrl:
  9. Click Save
  10. Click Preview
  11. Test your application

-- End of Exercise --

Page of 168
comments powered by Disqus