1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Question Best Practice for custom component with multiple wrappers

    Best Practice for custom component with multiple wrappers


    hello, I am working to migrate my app from ext 3 to 4.x.

    One big question is that. In a lot of cases, our custom component has the following structures:

    ...

    initComponent: function(){
    // basic html rendering goes here
    this.tpl =new Ext.XTemplate( '<div class="wrapperClass1">,
    <div class="wrapperClass2">,
    <div class="wrapperClass3">,
    <div id="{id}-ctrl1"></div>
    <div id="{id}-ctrl2"></div>
    </div>
    </div>
    </div>'

    },


    render: function(){

    this.ctrl = Ext.create('ctrl1', {
    renderTo: "{id}-ctrl1"
    });

    this.ctr2 = Ext.create('ctrl2', {
    renderTo: "{id}-ctrl2"
    });

    }


    I wonder what is the best practice for create a component with layers of wrappers?


    Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would actually mess with the renderTpl to create a DOM structure.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    thanks.

    So the basic methodology is sound. And that is how a composite / complicated component should be strung together?

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,429
    Vote Rating
    151
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Using renderTpl on your prototype is ideal. The renderTpl is "upgraded" from array to XTemplate instance "in place". So if you have a renderTpl on your class prototype, it will become a proper XTemplate on your prototype (hence shared by all instances).

    For a good example of how intricate this can be, see how fields work in the source. They have a renderTpl which uses other templates even.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    thank you very much. This is a great answer.

Thread Participants: 2