Results 1 to 9 of 9

Thread: XTemplate variables with spaces

  1. #1
    ExtJS Premium Member
    Join Date
    Feb 2010
    Location
    Neptune Beach, Florida
    Posts
    51

    Default XTemplate variables with spaces

    XTemplate doesn't evaluate if the variables name has spaces
    Code:
    <span style="font:bold 12px;color:red">{MY CODE}</span>
    It just returns the template code directly.

    If I replace variable spaces with underscores in variables and ModelData property name, everything works!
    Code:
    <span style="font:bold 12px;color:red">{MY_CODE}</span>
    However the Model Data (and variables) are generated from database results, which are under user control.

    Is their a better option than preprocessing the model property keys to replace spaces with underscores and requiring a template convention of having template variable name containing spaces be replaced with underscores?

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    "MY CODE" is not a valid dataindex. dataindexes dont contain spaces.

  3. #3
    ExtJS Premium Member
    Join Date
    Feb 2010
    Location
    Neptune Beach, Florida
    Posts
    51

    Default

    I am unfamiliar with the term "dataindex" in relation to GXT xtemplates. Spaces work perfectly fine as ModelData property names, but the xtemplate likely needs to handle some type of regular grammar based token processing to support the wealth of features available as part of XTemplates making variable spaces an understandable "no no".

    Since I am dynamically building JSON,ModelData and ColumnModel using the same scheme, It wasn't too difficult to intercept the token that becomes the [property/dataindex/thing] and do a simple char replace all, but this is a little bit of a hack, and although it get's the Job done, there is now a mismatch between expected and actual property names that is likely to cause confusion among consumers of the API further down the road.

    I was hoping their might be a way to make a variable name with spaces work in a template by using quotes, brackets, escaping the space, or something else...

    e.g.
    Code:
    <b>{[MY CODE]}</b>
    <b>{MY\ CODE}</b>
    <b>{'MY CODE'}</b>
    <b>{MY&x20;CODE}</b>
    Or some other format or trick that makes the template parser/compiler happy.

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You should not use these kind of dataindexes inside your modals too. We have no plan on supporting them.

  5. #5
    ExtJS Premium Member
    Join Date
    Feb 2010
    Location
    Neptune Beach, Florida
    Posts
    51

    Default

    Is "dataindex" the same as (at least in BaseModelData) the property name?
    e.g. It would be semantically correct to say
    Code:
    myModelData.get(dataindex)
    The ModelData property names are an artifact of database result sets, which are built from database metadata configuration, which is under user control. Using the spaces in the property names is not a programming decision, but an artifact of the client configuration, which must be supported.
    So far, the best option (to support the use of XTemplates) appears to be preprocessing the user key value to replace non-alphanumeric characters with underscores.

  6. #6
    Ext JS Premium Member rex.staples's Avatar
    Join Date
    Jul 2007
    Location
    Austin, TX
    Posts
    35

    Default

    Just ran in to this, and posting the solution so when I forget I can find it again. Define a template member function that you invoke using the {[ ... ]} syntax passing the currently scoped values and the key to access.

    Code:
    var tpl = Ext.XTemplate(
    
        '<span>{[this.val(values, "MY CODE")]}</span>',
    
        {
            val: function(map, key) {
                return map[key];
            }
        }
    );
    Tested against Ext JS 4.0.5

  7. #7
    ExtJS Premium Member
    Join Date
    Feb 2010
    Location
    Neptune Beach, Florida
    Posts
    51

    Default

    Nice trick!

  8. #8
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148

    Default

    You can fix this properly by overriding the regular expression XTemplate (and Template) uses to match against.

    Code:
    Ext.override(Ext.Template, {
    	re: /\{([\w\-\s]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g
    });
    
    Ext.override(Ext.XTemplate, {
    	re: /\{([\w-\.\#\s]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?\}/g
    });
    The first "\s" is the bit doing the magic

  9. #9
    Sencha User
    Join Date
    Dec 2008
    Posts
    2

    Default

    This will also work, and is the simplest solution, in my opinion, if you must to have spaces in your field name:

    Code:
    var tpl = Ext.XTemplate(
        '<span>{[values["MY CODE"]]}</span>'
    );

Similar Threads

  1. regex no spaces and letters only
    By Mthor in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 21 Oct 2009, 6:34 AM
  2. XTemplate member function with two variables
    By Shogun in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Jul 2008, 7:18 AM
  3. about blank spaces in formpanel
    By iTzAngel in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 26 Jun 2008, 1:19 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •