ComponentDataView - Ext components inside a dataview or listview

they are not the same though. The ComponentDataView allows a <tpl for="."> to specify wrapping DOM for each newly rendered Component. The layout version requires that the wrapping DOM already be in place, and that each Component be programmatically targeted at an element.

Are you suggesting a layout that has a template that is used for each item?

I could create one, but do you see a usecase?

Yes, just like the ComponentDataView that incorporates a <tpl for ="."> to iterate over the Components it is rendering. And the Components could have a targetSelector config to select which element in that tpl they want to render into.

The layout can't use a <tpl for="."> because you can also add/remove single items to/from a container, but I could create a layout that uses a template or HTML fragment to render each item to.

As a kind of automatic wrapper of each Component? I'm just speculating really on what kind of things might make it easier for people.

Hey you all! I think a ComponentDataView is a must have feature, it should be part of the ExtJS framework, for sure. Do you remember the ZipWhip implementation showcase? http://www.extjs.com/blog/2009/05/27...ip-and-ext-js/
They "complain" about the lack of a Componente-capable DataView.
Imagine this very simple use-case:
- You want to build a DataView with your products, and in each element you'll have a StarRating component and a "Add to cart" button.

I think that the way to go is to provide a Component-Capable Template, extending the XTemplate, and them plug this layout inside the custom DataView.
Maybe the ZipWhip implementation can give us some ideas... but it is, indeed, a needed feature.

http://www.zipwhip.com/

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 :

Code:

---

renderTarget: 'div:nth(8)'

---

second li

Code:

---

renderTarget: 'li:nth(2)'

---

third child of foo

Code:

---

renderTarget: 'foo:nth-child(3)'

---

I'm not a big fan of using 'nth', because changing your HTML markup would directly invalidate your render targets.

I would assign a class="my-target" to the target element and use a '.my-target' selector.

Hey guys,

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:

Code:

---

<tpl for".">
    <div id="product_{id}">
        <img />
        <div>
            <comp name="rating" />
        </div>
        <p>{name}</p>
        <p>{shortDescription}</p>
        <div>
            <comp name="button" />
        </div>
    </div>
</tpl>

---

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.

The template builder doesn't process HTML (that would be too slow). You can only do this as after-processing of a rendered template (like my ComponentDataView does).