Hybrid View

ComponentDataView - Ext components inside a dataview or listview

ComponentDataView - Ext components inside a dataview or listview

DataView and ListView are very useful to render store based data as HTML. This extension adds the ability to include Ext components in the HTML without the need to keep track of them (e.g. you won't get a memory leak when you update or delete a record).
It also supports automatically getting and setting the value from the store if the component is an Ext.form.Field.

Someone before asked how to render component in different place, other than TD.. As the question remained unanswered, just posting some examples.
To render component in different place of template use CSS structural pseudo classes!
For example, to have component in 8th div in template :

I think rendering the component in diferent targets is not the real problem here. Try to think about the use case I said before: a DataView which display products as its items and each item will have its HTML markup as usual and two components: a button and a rating comp.

As a possible solution I think extending the XTemplate to provide component building capabilities, something like:

Then, when the template proccessor finds a <comp> tag it call a function, which is reponsible for building that component:

Code:

function(compName, values) {
// create the component and return so the template can render it
}

It should also provide some cache capability to avoid creating the same component for the same item more than one time. Probably it should handle unique IDs too, just like Ext does.
I'm not sure if I was clear in my example, but ASAP I'll work on some code.