1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    55
    Vote Rating
    0
    dwb is on a distinguished road

      0  

    Question xtemplate?

    xtemplate?


    Hello,

    Does Architect 2 have an XTemplate object? I don't see it in the Toolbars list of objects. I could hand-code my template, but, I don't know were in Architect to employ this code.

    Thanks,
    -dwb

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default


    XTemplate is available as a property(config) for many components eg tpl for component and itemTpl for Dataview.
    Bharat Nagwani
    Sencha Designer Development Team

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Norway
    Posts
    23
    Vote Rating
    1
    _piotr is on a distinguished road

      0  

    Default


    If it is available, so what do I do wrong whereas I am trying to put XTemplate for itemTpl in Dataview?
    Code:
    Ext.define('mBooking.view.ReservationFormContainer', {    extend: 'Ext.Container',
        alias: 'widget.reservationformcontainer',
    
    
        config: {
            layout: {
                type: 'card'
            },
            items: [
                {
                    xtype: 'list',
                    id: 'dates-from',
                    itemTpl: [
                        'new Ext.XTemplate(',
                        '                    \'<div class="availability-date-item \',',
                        '                        \'{[AvailabilityStatus.getName(values.Status)]} {[PeriodType.getName(values.PeriodType)]}\',',
                        '                        \'<tpl if="this.IsConference(PeriodType)">\',',
                        '                            \' Conference\',',
                        '                        \'</tpl>\',',
                        '                        \'<tpl if="this.IsExternalEvent(PeriodType)">\',',
                        '                            \' ExternalEvent\',',
                        '                        \'</tpl>\',',
                        '                        \'">\',',
                        '                        \'<div class="container">\',',
                        '                            \'<div class="date" style="width: 20%;">{[getDay(values.Date)]}</div>\',',
                        '                            \'<div style="width: 75%;">\',',
                        '                                \'<div><span class="description">{[PeriodType.getDescription(values.PeriodType)]}</span></div>\',',
                        '                                \'<div class="status">{[AvailabilityStatus.getDescription(values.Status)]}</div>\',',
                        '                            \'</div>\',',
                        '                        \'</div>\',',
                        '                    \'</div>\',',
                        '                    {',
                        '                        disableFormats: true,',
                        '                        IsConference: function(periodType) {',
                        '                            return PeriodType.isConference(periodType);',
                        '                        },',
                        '                        IsExternalEvent: function(periodType) {',
                        '                            return PeriodType.isExternalEvent(periodType);',
                        '                        }',
                        '                    }',
                        '                )'
                    ],
                    store: 'AvailabilityCalendar',
                    onItemDisclosure: true
                },
                {
                    xtype: 'container',
                    id: 'dates-to',
                    layout: {
                        type: 'fit'
                    }
                }
            ]
        }
    
    
    });
    Thanks in advance!

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Vote Rating
    2
    Svinja is on a distinguished road

      0  

    Default


    hi,

    For example, select some container and then in config panel you have tpl box. In tpl box you can insert something like this:
    Code:
    <div>something</div>
    Note that tpl accepts string(?) so you cannot write something like this:
    Code:
    new Ext.XTemplate('<div>something</div>')

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Norway
    Posts
    23
    Vote Rating
    1
    _piotr is on a distinguished road

      1  

    Default


    Quote Originally Posted by bharatn View Post
    XTemplate is available as a property(config) for many components eg tpl for component and itemTpl for Dataview.
    @bharatn writes at it is possible for custom variables. So if I would like to use XTemplate for itemTpl, so what should I do?
    To overload the component, to set template with list.setTpl() or is there another better solution?

  6. #6
    Sencha User kitesurf's Avatar
    Join Date
    Jan 2012
    Location
    London, England
    Posts
    72
    Vote Rating
    2
    kitesurf is on a distinguished road

      0  

    Default


    I would also like to know how this can be accomplished.

    There does not seem to be any way to define a new Ext.XTemplate in the tpl in Architect 2 since the config tpl interprets everything as a string.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    Norway
    Posts
    23
    Vote Rating
    1
    _piotr is on a distinguished road

      0  

    Default


    I've tried to change it in notepad and it did worked however when I open Archtect the value changes again. It seems at we can't edit any sencha files with external editors. It is quite inconvenient!

    Any response from Sencha, please?

    It explains a lot:
    * This file will be auto-generated each and everytime you save your project. *
    * Do NOT hand edit this file.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Vote Rating
    2
    Svinja is on a distinguished road

      0  

    Default


    sencha generates files and you cannot change them, you can only make overrides.
    Generally, it doesnt matter what you do with generated files bcs they are regenerated(from metadata files) each time you save project.

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,064
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      1  

    Default


    Sencha Architect 2.1 will support creating templates with a much more robust editor.

    When adding a template you will get a full editor to put your template in, you will also be able to add basic functions to the template to get member formatting functions, etc.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    aconran,

    When will architect 2.1 come out?

    Besides, how can we activate the Xtemplate in stead of using itemTpl? Or I might be confused with?