Hierarchy
Ext.BaseExt.dd.DragDropExt.dd.DDExt.dd.DDProxySubclasses
Files
拖放的实现,把空白的、带边框的div插入到文档,并会伴随着鼠标指针移动。 在点击时,边框div会调整大小到关联html元素的尺寸大小,然后移动到关联元素的位置。 "frame"元素的引用指的是页面上我们创建能够被DDProxy元素拖拽到的地方的单个代理元素。
扩展事件
Defaults to: []
内置的typeof运算符标志
Defaults to: true
可用的 可用属性默认设置为false,直至链接的dom元素可以访问。
Defaults to: false
默认情况下,框架定位拖动元素的确切位置,我们用Ext.dd.DD提供光标偏移 另一种情况仅适用于你没有约束obj,只围绕光标拖动框架。 设置centerFrame为true的效果。
Defaults to: false
设置为true时,应用于横向约束
Defaults to: false
设置为true时,应用于垂直约束
Defaults to: false
提供了默认的约束填充“constrainTo”元素。
Defaults to: {left: 0, right: 0, top: 0, bottom: 0}
将被拖动的元素的id。 默认情况下,这是作为链接的元素,但可以改变到另一个元素。 Ex: Ext.dd.DDProxy
Defaults to: null
这个组定义了相关的DragDrop对象的逻辑集合。只得到实例事件与其他在同一组的DragDrop对象进行交互的时候。 如果我们想定义多个组,使用单一的DragDrop子类,。
对象中的格式 {'group1':true, 'group2':true}
Defaults to: null
启动拖动操作的元素的id。 默认情况下,这是链接的的元素,但可以改变此元素的子元素。 这让我们做的事情像是点击链接的HTML元素内的头元素时才开始拖动。
Defaults to: null
默认情况下,如果在MouseDown链接的元素是在该地区发生,拖动只能被启动。 This is done in part to work around a bug in some browsers that mis-report the mousedown if the previous mouseup happened outside of the window. 这是解决在一些浏览器的bug,错误报告的MouseDown,如果以前的mouseup窗外发生。 如果处理自定义,此属性应设置为true。默认为false。
Defaults to: false
自动忽略 设置为false使DragDrop对象解雇拖动事件同时拖动其自己的元素。 默认为true - DragDrop对象默认情况下不触发拖动事件。
阵列元素的CSS类名被视为无效,拖动处理。
Defaults to: null
确定对象的属性名的元素拖动控被视为无效的id。 非空的属性值确定为无效的ID。例如,以防止被"foo"的元素的ID启动拖动,使用:
{
foo: true
}
Defaults to: null
确定对象的属性名作为拖动控被视为无效的HTML标签。
非空的属性值确定为无效的标签。默认为以下值,以防止被<a>
元素启动拖动操作:
{
A: "A"
}
Defaults to: null
保持偏移 保持偏移时,我们重置约束。 当你想的到它的父元素的相对位置保持不变,设置为true时页面变化 当页面变化希望元素的相对位置与父级保持不变,设置为true
Defaults to: false
配置填充拖放对象,计算放下区域与此对象的交集。
阵列padding包含4个值: [top, right, bottom, left]
Defaults to: null
默认情况下,拖放实例将只响应点击主按钮(右手鼠标左键)。 设置为true,允许拖放,启用鼠标在浏览器上任意散布点击
Defaults to: true
默认情况下,我们调整拖拽框架,使我要拖拽的元素的大小相同(这是要得到的框架效果)。 如果我们想要一个不同的行为,我们可以关掉它。
Defaults to: true
滚动 如果设置为真,在可见区域边界附近拖拖放元素时,系统会自动尝试滚动浏览器窗口。
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'
链接元素的时候绝对的X坐标开始拖动
Defaults to: 0
链接元素的时候绝对的X坐标开始拖动
Defaults to: 0
创建新的 DDProxy 实例。
链接的HTML元素的id
相关的DragDrop对象组
包含配置属性的对象 在DDProxy中的有效属性,另外的属性在DragDrop中:
Overrides: Ext.dd.DD.constructor
拖动初始化时,代理会自动调整到链接元素的尺寸大小,除非resizeFrame是设置为false
成员
设置配置选项,具体到这个类。重写 Ext.dd.DragDrop, 这种方法通过继承链适用于所有的版本
Overrides: Ext.dd.DragDrop.applyConfig
触发onMouseDown事件之前。重写(按下鼠标) Ext.dd.DragDrop.
Overrides: Ext.dd.DragDrop.b4MouseDown
调用原来的方法,这是以前的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)
返回调用父类的方法的结果。
清除应用到该实例的任何约束。 另外清除记号,因为他们可以在这个时候不存在独立的约束。
清除此实例中定义的任何记号间隔
初始化拖放对象的约束,限制某些元素的移动。
用法:
var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
{ dragElId: "existingProxyDiv" });
dd.startDrag = function(){
this.constrainTo("parent-id");
};
你也可以使用初始化 Ext.Element 对象:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
startDrag : function(){
this.constrainTo("parent-id");
}
});
要约束的元素或元素id。
(可选) Pad 提供了一种方法来指定"padding" 的约束,
并可以是对称的填充数(4 个值等于 {left:4, right:4, top:4, bottom:4}
) 或对象其中包含双方的pading。
例如: {right:10, bottom:10}
(可选) 限制在该元素的内容框的拖动 (内侧填充和边框)
创建代理的元素,如果它还不存在
拖动对象是调用的代码
mouseup事件
返回引用到实际元素拖动。默认情况,这是相同的HTML元素, 但它可以被分配到另一个元素。 这样的例子,可以在Ext.dd.DDProxy找到
HTML元素
返回引用到链接的元素
HTML元素
链接元素是可用时执行
这个类的初始化配置。典型例子:
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 混入原型 键-值对
拖动框架元素的初始化。必须在所有子类的构造函数中调用
锁定这个实例
在需要的初始位置被确定后,重写的onAvailable方法。
拖动某一项时,调用在onMouseMove事件的抽象方法 object.
mousemove事件
在此项上放下另一个DragDrop对象,调用的抽象方法
the mouseup event
在POINT模式下,放下元素的id。 在INTERSECT模式下, 阵列或更多的拖放项鼠标不在上面。
当这个元素的指标开始悬停在另一个的DragDrop对象调用这个抽象方法
mousemove事件
在POINT模式下, 这个悬停元素的id。 在INTERSECT模式下, 阵列或更多的拖放项悬停。
当我们不再悬停在元素上的抽象方法调用
mousemove事件
In 在POINT模式下, 这个悬停元素的id。 在INTERSECT模式下, 阵列或更多的拖放项鼠标不在上面
当这个元素悬停在DragDrop对象时,调用的抽象方法
mousemove事件
在POINT模式下, 这个悬停元素的id。 在INTERSECT模式下, 阵列或更多的拖放项悬停。
当这个区域没有放下的目标被丢弃时,调用的抽象方法
mouseup 事件
拖动/放下的对象得到mousedown事件时调用
mousedown事件
拖动/放下的对象得到mouseup事件时调用
the mouseup event
允许你指定子链接的元素应该用来启动拖动操作。 这样的例子是,如果你有一个有内容div包含文本和链接。 在内容区域的任何地方点击,通常会启动拖动操作。 用法 指定元素的内容div里面的元素开始拖动操作。
将用于启动拖动的元素的id。
获取从该对象被实例化的类的引用。 请注意不同于 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
原来的方法名
以字符串格式,获取当前类的名称。
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 当前类