Ext.Template

Hierarchy

Ext.Base
Ext.Template

Requires

Subclasses

Files

代表一个HTML片段模板。Templates将precompiled提供更好的性能。

这个类的实例可能是由传递给构造函数的一个单一参数,或多个参数

单一参数:String/Array

单一参数可以是一个String或者一个Array

  • String:

    var t = new Ext.Template("<div>Hello {0}.</div>");
    t.append('some-element', ['foo']);
    
  • Array:

    一个数组可以结合join('')使用。

    var t = new Ext.Template([
        '<div name="{id}">',
            '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
        '</div>',
    ]);
    t.compile();
    t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
    

多个参数:String,Object,Array,...

多个参数可以结合join('')使用。

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}</span>',
    '</div>',
    // 一个配置对象:
    {
        compiled: true,      // compile compiled值为true立即被编译
    }
);

注释

  • 对于一系列可用的格式功能,参见Ext.util.Format
  • 当格式化不是必须的时候,disableFormats可以减少apply的时间。
Defined By

Config options

Ext.Template
: Boolean

true 将立刻编译模板。 默认值false

Ext.Template
: Boolean
true在模板中禁用格式化函数。如果模板没有包含格式化函数, 设置disableFormats为true可以减少应用的时间。 ...

true在模板中禁用格式化函数。如果模板没有包含格式化函数, 设置disableFormats为true可以减少应用的时间。 默认为false

Defaults to: false

Defined By

Properties

扩展事件

Defaults to: []

Ext.Template
: Boolean

true确定这个对象是实例化Template,否则是子类

Defaults to: true

本身 获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 ...

本身

获取当前类的引用,此对象被实例化。不同于 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'

Methods

Defined By

Instance Methods

Ext.Template
new( String... html, Object config ) : Object

创建新的模板。

Parameters

  • html : String...

    连接成模板所需参数的字符串。 也可以选择一个数组来传递参数,但是没有配置对象。

  • config : Object

    (可选的)配置对象

Returns

( Object config )private

添加配置

Parameters

Parameters

( Object name, Object member )private

Parameters

( Object xtype )private

添加 Xtype

Parameters

Ext.Template
( String/HTMLElement/Ext.Element el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element

应用提供的values值到模板,并添加新节点(s)到指定的el。

示例用法参见Ext.Template class docs.

Parameters

Returns

Ext.Template
( Object/Array values ) : String

返回一个有模板特殊值应用的HTML片段。

Parameters

  • values : Object/Array

    模板值。可以是一个数字数组:

    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});
    

Returns

Ext.Template
( Object/Array values, Array out ) : Array

追加的结果提供模板输出数组。

Parameters

Returns

  • Array

    返回输出的数组。

Ext.Template
( Object/Array values ) : String

别名apply

返回一个有模板特殊值应用的HTML片段。

Parameters

  • values : Object/Array

    模板值。可以是一个数字数组:

    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});
    

Returns

( Array/Arguments ) : Objectdeprecatedprotected
调用原来的方法,这是以前的override重写 Ext.define('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); ...

调用原来的方法,这是以前的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 代替.

Parameters

  • : Array/Arguments

    参数的参数,数组或'参数'对象 来自当前方法,例如: this.callOverridden(arguments)

Returns

  • Object

    返回调用重写方法的结果。

( Array/Arguments args ) : Objectprotected

所谓的"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

Parameters

  • args : Array/Arguments

    这个参数, 通过当前方法得到数组或者 arguments 对象, 例如: this.callParent(arguments)

Returns

  • Object

    返回调用父类的方法的结果。

Ext.Template
( ) : Ext.Template

编译模板到一个内部函数,消除正则表达式的限制。

Returns

( Object config )private

拓展

Parameters

( Object name )private

得到配置项

Parameters

得到初始化配置项

Parameters

( Object config )private

根据名称判断配置项是否存在

Parameters

( Object config ) : Objectprotected
这个类的初始化配置。典型例子: Ext.define('My.awesome.Class', { // 这是默认配置 config: { name: 'Awesome', isAwes...

这个类的初始化配置。典型例子:

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' 超级棒

Parameters

Returns

  • Object

    mixins 混入原型 键-值对

Ext.Template
( String/HTMLElement/Ext.Element el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element

应用提供的值到模板,并在el后插入新节点(s)。

Parameters

Returns

Ext.Template
( String/HTMLElement/Ext.Element el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element

应用提供的值模板,并在el前插入新节点(s)。

Parameters

Returns

Ext.Template
( String/HTMLElement/Ext.Element el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element

应用提供的值模板,并插入新节点(s)作为el的第一个孩子节点。

Parameters

Returns

( Object name, Object mixinClass )private

内部使用混入预处理器(mixins pre-processor)

Parameters

( Object names, Object callback, Object scope )private

更新配置项

Parameters

( Object fn, Object scope )private

扩展事件

Parameters

Ext.Template
( String/HTMLElement/Ext.Element el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element

应用提供的值到模板,并使用新的节点(s)重写el中的内容。

Parameters

Returns

Ext.Template
( String html, Boolean compile ) : Ext.Template

把HTML当作模板使用,并任意的编辑它。

Parameters

Returns

( Object config, Object applyIfNotSet )private

设置配置项

Parameters

获取从该对象被实例化的类的引用。 请注意不同于 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

Returns

配置扩展

Defined By

Static Methods

( Object members )static

方法/属性添加到这个类的原型。

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Parameters

添加/重写这个类的静态属性。

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() { ... };
});

Parameters

Returns

( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
这个类的原型借用另一个类的成员 Ext.define('Bank', { money: '$$$', printMoney: function() { alert('$$$$$$$'); } ...

这个类的原型借用另一个类的成员

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 '$$$$$$$'

Parameters

Returns

创建这个类的新实例。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

所有参数传递至类的构造。

Returns

创建现有的原型方法的别名。例如: Ext.define('My.cool.Class', { method1: function() { ... ...

创建现有的原型方法的别名。例如:

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()

Parameters

Ext.Template
( String/HTMLElement el, Object config ) : Ext.Templatestatic

通过传递的元素值(display:none textarea, preferred)或者innerHTML创建一个模板对象

Parameters

  • el : String/HTMLElement

    一个DOM元素或者元素的id

  • config : Object

    (可选的)配置对象

Returns

以字符串格式,获取当前类的名称。

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Returns

( Object members ) : Ext.Basedeprecatedstatic

重写这个类的成员。通过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 代替

Parameters

  • members : Object

    添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。

Returns