Ext 中if为何不起作用

[shinlgienls]

    var data = {
        name: 'Jack Slocum',
        title: 'Lead Developer',
        company: 'Ext JS, LLC',
        email: '[e-mail]',
        address: '4 Red Bulls Drive',
        city: 'Cleveland',
        state: 'Ohio',
        zip: '44102',
        drinks: ['Red Bull', 'Coffee', 'Water'],
        kids: [{
            name: 'Sara Grace',
            age: 3
        }, {
            name: 'Zachary',
            age: 2
        }, {
            name: 'John James',
            age: 1
        }]
    };
    var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if ="age > 2">',  //    折行为什么不起作用，郁闷       
            '<p>{#}    ',
             'name:{name}  ',
            'age:{age}  ',
            'Dad: {parent.name}',
            '</p>',
         '</tpl>',
    '</tpl></p>', {
        isGirl: function (name) {
            return name == 'Sara Grace';
        }
    }
);
    tpl.overwrite("content", data);   

[zoujp_xyz]

'<tpl if ="age > 2">',[/color] // 用 ">"号即可

[zoujp_xyz]

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

[shinlgienls]

[Quote=引用 2 楼 zoujp_xyz 的回复:]
JScript code

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {……
[/Quote]

请问谁 试过这段代码，根本得不到预期结果啊，，，

[zoujp_xyz]

这是官方实例，没有问题
XTemplate( Mixed config )
The Ext.Template constructor describes the acceptable parameters to pass to the constructor. The following examples d...
The Ext.Template constructor describes the acceptable parameters to pass to the constructor. The following examples demonstrate all of the supported features.

    * Sample Data

      This is the data object used for reference in each code example:

      var data = {
          name: 'Jack Slocum',
          title: 'Lead Developer',
          company: 'Ext JS, LLC',
          email: '[e-mail]',
          address: '4 Red Bulls Drive',
          city: 'Cleveland',
          state: 'Ohio',
          zip: '44102',
          drinks: ['Red Bull', 'Coffee', 'Water'],
          kids: [{
              name: 'Sara Grace',
              age:3
          },{
              name: 'Zachary',
              age:2
          },{
              name: 'John James',
              age:0
          }]
      };

    * Auto filling of arrays

      The tpl tag and the for operator are used to process the provided data object:
          o If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl tag for each item in the array.
          o If for="." is specified, the data object provided is examined.
          o While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

      <tpl for=".">...</tpl>       // loop through array at root node
      <tpl for="foo">...</tpl>     // loop through array at foo node
      <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node

      Using the sample data above:

      var tpl = new Ext.XTemplate(
          '<p>Kids: ',
          '<tpl for=".">',       // process the data.kids node
              '<p>{#}. {name}</p>',  // use current array index to autonumber
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object

      An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Title: {title}</p>',
          '<p>Company: {company}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',     // interrogate the kids property within the data
              '<p>{name}</p>',
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data);  // pass the root node of the data object

      Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a loop. This variable will represent the value of the array at the current index:

      var tpl = new Ext.XTemplate(
          '<p>{name}\'s favorite beverages:</p>',
          '<tpl for="drinks">',
             '<div> - {.}</div>',
          '</tpl>'
      );
      tpl.overwrite(panel.body, data);

      When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',
              '<tpl if="age > 1">',
                  '<p>{name}</p>',
                  '<p>Dad: {parent.name}</p>',
              '</tpl>',
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data);

    * Conditional processing with basic comparison operators

      The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render specific parts of the template. Notes:
          o Double quotes must be encoded if used within the conditional
          o There is no else operator — if needed, two opposite if statements should be used.

      <tpl if="age > 1 && age < 10">Child</tpl>
      <tpl if="age >= 10 && age < 18">Teenager</tpl>
      <tpl if="this.isGirl(name)">...</tpl>
      <tpl if="id==\'download\'">...</tpl>
      <tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
      // no good:
      <tpl if="name == "Jack"">Hello</tpl>
      // encode " if it is part of the condition, e.g.
      <tpl if="name == "Jack"">Hello</tpl>

      Using the sample data above:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',
              '<tpl if="age > 1">',
                  '<p>{name}</p>',
              '</tpl>',
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data);

    * Basic math support

      The following basic math operators may be applied directly on numeric data values:

      + - * /

      For example:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',
              '<tpl if="age > 1">',  // <-- Note that the > is encoded
                  '<p>{#}: {name}</p>',  // <-- Auto-number each item
                  '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
                  '<p>Dad: {parent.name}</p>',
              '</tpl>',
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data);

    * Execute arbitrary inline code with special built-in template variables

      Anything between {[ ... ]} is considered code to be executed in the scope of the template. There are some special variables available in that code:
          o values: The values in the current scope. If you are using scope changing sub-templates, you can change what values is.
          o parent: The scope (values) of the ancestor template.
          o xindex: If you are in a looping template, the index of the loop you are in (1-based).
          o xcount: If you are in a looping template, the total length of the array you are looping.
          o fm: An alias for Ext.util.Format.
      This example demonstrates basic row striping using an inline code block and the xindex variable:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',
             '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
              '{name}',
              '</div>',
          '</tpl></p>'
      );
      tpl.overwrite(panel.body, data);

    * Template member functions

      One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing:

      var tpl = new Ext.XTemplate(
          '<p>Name: {name}</p>',
          '<p>Kids: ',
          '<tpl for="kids">',
              '<tpl if="this.isGirl(name)">',
                  '<p>Girl: {name} - {age}</p>',
              '</tpl>',
              // use opposite if statement to simulate 'else' processing:
              '<tpl if="this.isGirl(name) == false">',
                  '<p>Boy: {name} - {age}</p>',
              '</tpl>',
              '<tpl if="this.isBaby(age)">',
                  '<p>{name} is a baby!</p>',
              '</tpl>',
          '</tpl></p>',
          {
              // XTemplate configuration:
              compiled: true,
              disableFormats: true,
              // member functions:
              isGirl: function(name){
                  return name == 'Sara Grace';
              },
              isBaby: function(age){
                  return age < 1;
              }
          }
      );
      tpl.overwrite(panel.body, data);

Parameters:

    * config : Mixed

Returns:

    * void