1. #11
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  2. #12
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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?

  3. #13
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  4. #14
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  5. #15
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  6. #16
    Ext User
    Join Date
    May 2007
    Location
    Brasília, DF, Brasil
    Posts
    17
    Vote Rating
    0
    daniel.rochetti is on a distinguished road

      0  

    Default


    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/

  7. #17
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    290
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    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)'

  8. #18
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  9. #19
    Ext User
    Join Date
    May 2007
    Location
    Brasília, DF, Brasil
    Posts
    17
    Vote Rating
    0
    daniel.rochetti is on a distinguished road

      0  

    Default


    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.
    Last edited by daniel.rochetti; 20 Apr 2010 at 12:20 AM. Reason: typos

  10. #20
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).