Hierarchy
Ext.BaseExt.chart.series.SeriesExt.chart.series.GaugeInherited mixins
Files
创建一个仪表图。仪表图被用在多变量的情况下显示过程的进展。有2种使用仪表图的方式。
一种是在仪表图中设置一个store元素，再从store中选择需要使用的字段。
另一种是先实例化对象，然后通过setValue方法对你需要的值进行校正。
An example of Gauge visualization:
var store = Ext.create('Ext.data.JsonStore', {
fields: ['data'],
data: [
{ 'value':80 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 250,
animate: true,
insetPadding: 30,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 10
}],
series: [{
type: 'gauge',
field: 'value',
donut: 30,
colorSet: ['#F49D10', '#ddd']
}]
});
Ext.widget("button", {
renderTo: Ext.getBody(),
text: "Refresh",
handler: function() {
store.getAt(0).set('value', Math.round(Math.random()*100));
}
});
这个例子中我们创建了一个特殊的仪表坐标轴, 同时我们设置 maximum, minimum和steps等坐标轴的配置选项。这个仪表的series配置包含要用来显示的store字段 并设置要使用的颜色。
store记录中被用来表示图各个角的字段名。 这个字段的值必须是正数。
Defaults to: false
如果设置为真，当鼠标移动到上面时，markers或者series高亮。
这个属性也可以为一个与你能接受一个Ext.draw.Sprite带有相同风格
属性的对象来作为允许标记和系列的习惯样式。
仪表图中扇形突出效果动画的持续时间。
Defaults to: 150
该对象包含以下属性:
display : String
指定饼图标签的位置。包括"rotate", "middle", "insideStart", "insideEnd", "outside", "over", "under", 或者 "none"可以用来渲染标签。 Default value: 'none'.
color : String
标签文本的颜色 默认值是: '#000' (黑色).
contrast : Boolean
设置为true时，渲染标签的颜色为背景色的对比色。 默认值是: false.
field : String
标签要展示的字段的名称。 默认值是: 'name'.
minMargin : Number
指定标签和可见的组件间的最小距离。 这个参数在PieSeries宽度可变时将很有用。 默认值是: 50.
font : String
标签的字体 默认值是: "11px Helvetica, sans-serif".
orientation : String
"horizontal" 或者 "vertical". 默认值是: "horizontal".
renderer : Function
可选的函数，为标签提供一个可见的格式化的值。 默认值是: function(v) { return v; }
一个（可选的）带有事件回调的对象。所有回调事件取得目标元素作为第一个参数。 回调函数有:
Overrides: Ext.util.Observable.listeners
一个可被重写的用来为每个rendered元素设置通用样式属性函数。 为函数传入（sprite, record, attributes, index, store）。
一个带有阴影参数的数组
Defaults to: null
为可视化标记添加工具栏。栏的参数与Ext.tip.ToolTip使用的配置相同。 例如:
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
扩展事件
Defaults to: []
本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置， 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发，它的值是真的， 如果没有必要，就是假的。
本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次，这尤其有用。 用法:
if (this.hasListeners.foo) {
this.fireEvent('foo', this, arg1);
}
在本类中设置为true将一个对象标识为实例化的Observable或其子类。
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'
成员
向本对象添加一个事件处理函数，例如:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许传递单个参数，参数为一个 包含指定多个事件的属性的配置对象。例如:
myGridPanel.on({
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
你也能为每个事件处理函数单独指定选项：
myGridPanel.on({
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
也能使用在特定作用域的方法名。注意
必须指定scope:
myGridPanel.on({
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
被监听的事件名。 也可以是属性名字是事件名字的对象。
事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。
会被调用，
参数为fireEvent的参数加上下述options参数。
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
包含事件处理函数配置的对象。
注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。
这个对象可能包含以下任何一个属性:
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
事件触发后，调用事件处理函数延时毫秒数。
设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。
使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。
只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数
这个选项只对绑定在Components上的监听器有效。 Component的一个属性名，这个属性引用一个待添加监听器的元素
这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:
new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
组合选项
使用options参数, 可以组合不同类型的监听器：
一个延时的一次性监听器：
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
调用原来的方法，这是以前的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)
返回调用父类的方法的结果。
移除本对象的包括受管理的监听器在内的所有监听器
移除本对象的所有受管理的监听器
为当前的图表绘制图形（series）。
通过调用this.getBubbleTarget()（如果存在）允许本Observable对象触发的事件沿着继承体系起泡
在Observable基类中没有实现类。
这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。
使用范例:
Ext.override(Ext.form.field.Base, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
使用传递过来的参数(去掉事件名，加上传递给addListener的options对象
)触发指定的事件。
通过调用enableBubble，一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。
如果任何一个事件处理函数返回false，就返回false，否则返回true。
Gets the bubbling parent for an Observable
The bubble parent. null is returned if no bubble target exists
为一个给定的相对平面位置的X/Y点，从这个系列中找到一个相应的对象，如果有的话。
一个描述元素的对象，或者如果没有匹配元素时为null。
这个对象的确切内容将通过一系列类型而异，但是应该经常包含如下：
这个系列对象属于哪个对象
元素数据点的值
这个数据元素相对于一个单点的图标矿的坐标 它可以用作例如工具提示锚点。
该项目的渲染雪碧。
返回图形的颜色(作为该图形在图例项目中展示的颜色)。
{Object} item信息; 和#getItemForPoint的返回值具有相同的格式。
Overrides: Ext.chart.series.Series.getLegendColor
返回显示在当前系列中的记录数。 默认返回存储的记录数； 个别系列实现能重写以提供习惯性绑定。
隐藏系列内的所有元素。
这个类的初始化配置。典型例子:
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 混入原型 键-值对
addManagedListener的简写方法
向任何Observable对象（或者Ext.Element）添加监听器， 当组件被销毁时，监听器自动被移除
添加监听器的目标项。
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
(可选的)如果ename参数是事件名,
这就是addListener的选项。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
addListener的简写方法
向本对象添加一个事件处理函数，例如:
myGridPanel.on("mouseover", this.onMouseOver, this);
这个方法也允许传递单个参数，参数为一个 包含指定多个事件的属性的配置对象。例如:
myGridPanel.on({
cellClick: this.onCellClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
你也能为每个事件处理函数单独指定选项：
myGridPanel.on({
cellClick: {fn: this.onCellClick, scope: this, single: true},
mouseover: {fn: panel.onMouseOver, scope: panel}
});
也能使用在特定作用域的方法名。注意
必须指定scope:
myGridPanel.on({
cellClick: {fn: 'onCellClick', scope: this, single: true},
mouseover: {fn: 'onMouseOver', scope: panel}
});
被监听的事件名。 也可以是属性名字是事件名字的对象。
事件调用的方法, 或者如果指定了scope，在指定scope的方法名*。
会被调用，
参数为fireEvent的参数加上下述options参数。
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
包含事件处理函数配置的对象。
注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。
这个对象可能包含以下任何一个属性:
事件处理函数执行的作用域(this应用的上下文)
如果省略, 默认为触发事件的对象。
事件触发后，调用事件处理函数延时毫秒数。
设置为true添加一个事件处理函数，只处理下一次触发的事件, 然后移除这个函数。
使事件处理函数在Ext.util.DelayedTask中调度运行， 延时指定的毫秒数。如果事件在这段事件再次触发， 原先的事件处理函数不再调用, 新的事件处理函数接替。
只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的，不会调用事件处理函数
这个选项只对绑定在Components上的监听器有效。 Component的一个属性名，这个属性引用一个待添加监听器的元素
这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:
new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
组合选项
使用options参数, 可以组合不同类型的监听器：
一个延时的一次性监听器：
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
从指定的Observable接替选定的事件就好像事件是this触发的。
例如，如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:
this.relayEvents(this.getStore(), ['load']);
grid实例将会有一个observable的'load'事件，
这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数
可以使用this访问grid。
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
移除通过mon方法添加的监听器。
待移除监听器的项
事件名或者包含的事件名属性的对象。
(可选的) 如果ename参数是事件名, 这就是一个事件处理函数。
(可选的) 如果ename参数是事件名, 这就是(this引用的上下文)
事件处理函数执行的作用域。
继续事件的触发(见suspendEvents)。
如果事件被使用queueSuspended参数挂起, 那么所有
在事件挂起期间触发的事件将会被发送到任意监听器。
显示系列内的所有元素。
获取从该对象被实例化的类的引用。 请注意不同于 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
挂起所有事件的触发。(见resumeEvents)
传true，让挂起的事件排队而不是丢弃所有挂起的事件， 这些事件将会在调用resumeEvents之后触发。
配置扩展
removeListener的简写方法
移除事件处理函数。
事件处理函数关联的事件类型
待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。
(可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的，否者监听器将会被移除。
Un-highlight any existing highlights
方法/属性添加到这个类的原型。
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
原来的方法名
以字符串格式，获取当前类的名称。
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 当前类
当通过setTitle改变系列标题时触发。
新的标题值
在标题列表中的索引
The options object passed to Ext.util.Observable.addListener.