Hierarchy
Ext.BaseExt.TemplateExt.XTemplateRequires
Files
支持高级功能的模板类，如:
XTemplate也提供相应的制模机制整合到Ext.view.View.
Template描述了构造器可接受的参数。下面的例子演示了所有可支持的特点。
下面每一个例子使用的数据对象如下：
var data = {
name: 'Don Griffin',
title: 'Senior Technomage',
company: 'Sencha Inc.',
drinks: ['Coffee', 'Water', 'More Coffee'],
kids: [
{ name: 'Aubrey', age: 17 },
{ name: 'Joshua', age: 13 },
{ name: 'Cale', age: 10 },
{ name: 'Nikol', age: 5 },
{ name: 'Solomon', age: 0 }
]
};
标签tpl和操作符for可以用来处理提供的数据对象。
如果操作符for中值是一个数组，它将自动输出，并不断重复tpl标签内的模板块输出数组中的每一项。
只有检查通过的数据对象，才符合for所需要的规定数据对象。
然而处理一个数组，特殊的变量#提供了当前的数组的索引+1(由1开始，不是0)。
示例：
<tpl for=".">...</tpl> // 循环数组的root节点
<tpl for="foo">...</tpl> // 循环数组的foo节点
<tpl for="foo.bar">...</tpl> // 循环数组的foo.bar节点
使用上面的标准数据：
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">', // 处理数据的子节点
'<p>{#}. {name}</p>', // #当前数组的索引当自动编号
'</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // 传递数据对象子节点的属性
下面的例子阐述了怎样把操作符for中属性通过数据对象中成员移动到template中：
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">', // 查询数据中子节点的属性
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data); // 传递数据对象的root节点
单一数组(Flat arrays)指的是只包含值的(不是对象)，可以使用特殊变量{.}循环输出这类型的数组。这个变量代表当前数组的索引值：
var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
当处理子模板时，例如，你可以通过父对象成员的parent对象,循环一个子数组：
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);
标签tpl和操作符if，可用来执行条件判断，以决定模板的哪一部分需要被渲染出来。
使用上面的标准数据：
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);
更多高级的条件运算符也支持：
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name} is a ',
'<tpl if="age >= 13">',
'<p>teenager</p>',
'<tpl elseif="age >= 2">',
'<p>kid</p>',
'<tpl else">',
'<p>baby</p>',
'</tpl>',
'</tpl></p>'
);
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name} is a ',
'<tpl switch="name">',
'<tpl case="Aubrey" case="Nikol">',
'<p>girl</p>',
'<tpl default">',
'<p>boy</p>',
'</tpl>',
'</tpl></p>'
);
一个break默认是每一个case和默认值对应，然而，多个case可以排成一行被列出<tpl> 标签。
示例：
var tpl = new Ext.XTemplate(
"<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>",
"<tpl if='name == \"Don\"'>Hello</tpl>"
);
下面基础的数学操作符可以直接在数字值中使用:
+ - * /
For example:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">', // 注意 要被编码
'<p>{#}: {name}</p>', // 每一项的自动编号
'<p>In 5 Years: {age+5}</p>', // 基础数学
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
在XTemplate的框架内，{[ ... ]}中的任意代码回执行。 在生成的结果中，表达式是可评估的，并且结果在包含在内。 这有些特殊的变量可用：
out: 向被追加的模板上输出数组的对象(使用push，后面使用join)。
values: 当前作用域下的值. 如果你想改变它的值，可以切换到子模板作用域。
parent: 父级模板对象。
使用内联代码快和索引改变行的颜色的例子：
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>'
);
任何代码包含的字符块，都将直接嵌入在生成的代码中加入模板。这些块不包括输出。 这些可以用在简单的循环中， 如break/continue，或者控制结构，或者方法调用(它们不产生输出)。这些可以参考XTemplate示例。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'{% if (xindex % 2 === 0) continue; %}',
'{name}',
'{% if (xindex > 100) break; %}',
'</div>',
'</tpl></p>'
);
配置对象可以设定一个或多个规定的成员函数放入XTemplate构造器中完成更多复杂的处理：
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 else>',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate 配置：
disableFormats: true,
// 成员函数:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);
tpl.overwrite(panel.body, data);
是否可编辑 仅仅适用于Ext.Template，XTemplates编辑后， 首先唤醒apply 或者 applyOut。
是否可编辑 仅仅适用于Ext.Template，XTemplates编辑后， 首先唤醒apply 或者 applyOut。
Overrides: Ext.Template.compiled
定义字符或者数组
可选操作。一个声明，或者声明一个数组可以设置vars,
在生成的函数内可被接受。
定义字符或者数组
可选操作。一个声明，或者声明一个数组可以设置vars,
在生成的函数内可被接受。
true在模板中禁用格式化函数。如果模板没有包含格式化函数， 设置disableFormats为true可以减少应用的时间。 默认为false
Defaults to: false
扩展事件
Defaults to: []
true确定这个对象是实例化Template，否则是子类
Defaults to: true
本身
获取当前类的引用，此对象被实例化。不同于 statics,
this.self是依赖范围，它意味着要使用动态继承。
参见 statics 详细对比
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // 依赖 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' 雪豹
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
成员
应用提供的values值到模板，并添加新节点(s)到指定的el。
示例用法参见Ext.Template class docs.
上下文元素
模板值。详情参见applyTemplate。
(可选的)值为true将返回一个Ext.Element。
返回新节点或者元素
返回一个有模板特殊值应用的HTML片段。
模板值。可以是一个数字数组：
var tpl = new Ext.Template('Name: {0}, Age: {1}');
tpl.apply(['John', 25]);
或者一个对象：
var tpl = new Ext.Template('Name: {name}, Age: {age}');
tpl.apply({name: 'John', age: 25});
返回HTML片段
别名apply。
返回一个有模板特殊值应用的HTML片段。
模板值。可以是一个数字数组：
var tpl = new Ext.Template('Name: {0}, Age: {1}');
tpl.apply(['John', 25]);
或者一个对象：
var tpl = new Ext.Template('Name: {name}, Age: {age}');
tpl.apply({name: 'John', age: 25});
返回HTML片段
调用原来的方法，这是以前的override重写
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
This method has been deprecated since 4.1
版本 使用 callParent 代替.
参数的参数，数组或'参数'对象
来自当前方法，例如： this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
这可以用来重写如下:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // 调用原来的My.Derived构造
}
});
var obj = new My.Derived();
alert(obj.x); // 现在提示 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
然后，它也可以重写静态方法。
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // 现在提示 40
这个参数, 通过当前方法得到数组或者 arguments 对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
在XTemplate自动编译后，返回XTemplate对象
this 返回XTemplate对象
Overrides: Ext.Template.compile
通过对象(Ext.define类的实例)获取XTemplate 许多时候，XTemplate起源于基类，在类的结构中配置很高，并且可以被所有的类共享， 由于它的复杂性，这些XTemplate虽然罕见但是确可以配置。
示例：
Ext.define('MyApp.Class', {
someTpl: [
'tpl text here'
]
});
为了更好的共享，XTemplate所有的实例都很清晰， 即使实例的衍生类，直到一些tpl标签被重载。 "upgrade"这个方法使XTemplate实例的配置在适当的位置真正的升级(避免为每个对象创建实例)。
根据参数获得哪一个XTemplate对象 (参数肯定是Ext.define的实例)。
通过name属性获取XTemplate
如果发现就返回XTemplate，否则返回null
这个类的初始化配置。典型例子:
Ext.define('My.awesome.Class', {
// 这是默认配置
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome' 超级棒
配置
mixins 混入原型 键-值对
应用提供的值到模板，并在el后插入新节点(s)。
上下文元素
模板值。详情参见applyTemplate。
(可选的)值为true将返回一个Ext.Element。
返回新节点或者元素
应用提供的值模板，并在el前插入新节点(s)。
上下文元素
模板值。详情参见applyTemplate。
(可选的)值为true将返回一个Ext.Element。
返回新节点或者元素
应用提供的值模板，并插入新节点(s)作为el的第一个孩子节点。
上下文元素
模板值。详情参见applyTemplate。
(可选的)值为true将返回一个Ext.Element。
返回新节点或者元素
应用提供的值到模板，并使用新的节点(s)重写el中的内容。
上下文元素
模板值。详情参见applyTemplate。
(可选的)值为true将返回一个Ext.Element。
返回新节点或者元素
获取从该对象被实例化的类的引用。 请注意不同于 self,
this.statics()是独立的作用域，无论this是否运行，总是返回其中的调用类。
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // 总是等于'Cat'，无论'this'是什么，
// 相当于：My.Cat.speciesName
alert(this.self.speciesName); // 依赖 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // 依赖 'this'
cloned.groupName = this.statics().speciesName; // 相当于: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', 然后提示 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
配置扩展
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
成员
this
这个类的原型借用另一个类的成员
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如：
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
别名新方法的名称，或对象设置多个别名。 参见flexSetter
原来的方法名
通过传递的元素值(display:none textarea, preferred)或者innerHTML创建一个模板对象
返回创建的模板对象
以字符串格式，获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
重写这个类的成员。通过callParent重写的方法可以调用。
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫！"
// alerts "I'm a cat!我是一只猫！"
// alerts "Meeeeoooowwww"
在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
以上完成了相同的结果，但可以由Ext.Loader重写， 其目标类和生成过程中，可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。
This method has been deprecated since 4.1.0
使用 Ext.define 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类