PDA

View Full Version : Custom component tutorial?



juger
1 Mar 2013, 1:29 PM
I'm looking for an advanced tutorial or something to help me get started on creating an entirely custom UI component with templates and everything. All I've been able to find are examples and tutorials on how to use existing components. Can anyone point me at one?

mitchellsimoens
4 Mar 2013, 8:23 AM
What are you wanting to create?

juger
4 Mar 2013, 1:24 PM
I'm trying to create a component that will allow me me to display html5 video like the ExtJS flash component, where I can set source (or multiple sources to support multiple browsers), size and then change them based on browser resize events. I've looked through the ExtJS source, but the levels of inheritance make it difficult to read and understand quickly. What I'd love is some documentation on the basic anatomy of an ExtJS component all in once place. Like when to use render templates as opposed to normal templates, how the size of a component is tied to the data in the template, etc...

One of my current problems is that it seems like i need to update the entire data object of a component complete with all of the fields in the template. If I just update a single field in the data object, it seems to overwrite the rest of the variables used in the template to empty. I dunno if I'm making any sense.

In the other languages I've used, if I needed something totally custom, I could simply use the graphics libraries to draw directly on the screen. Since you can't really do that in HTML because you're bound by CSS and the HTML tags, I'm looking for something to help me understand how to do entirely custom interactive controls in the ExtJS format.

dawesi
6 Mar 2013, 11:03 PM
There's plenty of guides on what a component is, just read through the doc on component and the guides in the documenation.

To build a video component, I'd check out the Sencha touch implementation, realising that this is an HTML5 video component and a lot of people don't have HTML5 compatible browers and that video is not fully implemented to the HTML5 spec by any browser (maybe with the exception of IE10)

http://docs.sencha.com/touch/2-1/#!/api/Ext.Video