ExtJS4.2旋转木马不使用ExtJS5
我需要在我的一个项目中使用旋转木马。最近，我们从ExtJS4.2.1迁移到ExtJS5。所示的示例在ExtJS4.2.1中运行得非常好，但当我将其与ExtJS5一起使用时，它给出了一个错误：“Ext.util.Observable#addEvents”已被弃用。” 有人能更新代码或指出错误吗？以下是代码：ExtJS4.2旋转木马不使用ExtJS5,extjs,extjs4.2,extjs5,Extjs,Extjs4.2,Extjs5,我需要在我的一个项目中使用旋转木马。最近，我们从ExtJS4.2.1迁移到ExtJS5。所示的示例在ExtJS4.2.1中运行得非常好，但当我将其与ExtJS5一起使用时，它给出了一个错误：“Ext.util.Observable#addEvents”已被弃用。” 有人能更新代码或指出错误吗？以下是代码： Ext.onReady(function () { Ext.define('carouselContainer', { extend: 'Ext.container.C
Ext.onReady(function () {
Ext.define('carouselContainer', {
extend: 'Ext.container.Container'
, alias: 'widget.carousel'
, layout: {
type: 'hbox'
, align: 'stretch'
}
, defaults: { flex: 1 }
, style: {
background: 'url(http://3.bp.blogspot.com/-kanvyoXSOSs/Tsi0W496bzI/AAAAAAAAAG8/-Bq53wJqaqM/s320/carbonfibre.png)'
}
, initComponent: function () {
var me = this;
me.addEvents('carouselchange');
me.callParent(arguments);
}
, onDocMouseup: function () {
var me = this;
me.drag = false;
var children = me.items.items;
var parentLeft = me.ownerCt.el.getLeft();
var rule = 1000000;
var target;
Ext.each(children, function (div, i) {
l = Math.abs(div.el.getLeft() - parentLeft);
if (l < rule) {
rule = l;
target = div;
};
});
me.showChild(target);
}
, onMousedown: function (e) {
e.stopEvent(); // prevents selecting the underlying text and whatnot
var me = this;
me.drag = true;
me.startX = e.getX();
var par = me.el.first();
par.on({
mousemove: function (e) {
e.stopEvent(); // prevents selecting the underlying text and whatnot
if (me.drag) {
var rate = 1;
if (par.getLeft() > me.ownerCt.el.getLeft() || par.getRight() < me.ownerCt.el.getRight()) {
rate = 2;
}
par.move('l', (me.startX - e.getX()) / rate, false);
me.startX = e.getX();
}
}
});
}
, syncSizeToOwner: function () {
var me = this;
if (me.ownerCt) {
me.setSize(me.ownerCt.el.getWidth() * me.items.items.length, me.ownerCt.el.getHeight());
}
}
, showChild: function (item) {
var me = this
, left = item.el.getLeft() - me.el.getLeft();
me.el.first().move('l', left, true);
me.currentItem = item;
me.fireEvent('carouselchange', me, item);
}
, nextChild: function () {
var me = this;
var next = me.currentItem.nextSibling();
me.showChild(next || me.items.items[0]);
}
, previousChild: function () {
var me = this;
var next = me.currentItem.previousSibling();
me.showChild(next || me.items.items[me.items.items.length - 1]);
}
, onRender: function () {
var me = this;
me.currentItem = me.items.items[0];
if (me.ownerCt) {
me.relayEvents(me.ownerCt, ['resize'], 'owner');
me.on({
ownerresize: me.syncSizeToOwner
});
}
me.mon(Ext.getBody(), 'mouseup', me.onDocMouseup, me);
me.mon(Ext.fly(me.el.dom), 'mousedown', me.onMousedown, me);
me.callParent(arguments);
}
});
Ext.define('carouselTb', {
extend: 'Ext.toolbar.Toolbar'
, alias: 'widget.carouseltb'
, directionals: true
, initComponent: function () {
var me = this;
me.items = [{
xtype: 'tbfill'
}, {
xtype: 'tbfill'
}]
me.callParent(arguments);
}
, handleCarouselEvents: function (carousel) {
var me = this;
me.relayEvents(carousel, ['carouselchange']);
me.on('carouselchange', me.onCarouselChange, me, {buffer: 20});
}
, onCarouselChange: function (carousel, item) {
var me = this;
console.log(me);
var navSprites = me.down('draw').surface.getGroup('carousel');
navSprites.setAttributes({opacity: 0.2}, true);
var i = carousel.items.indexOf(item);
navSprites.each(function (s) {
if (s.index == i) {
s.animate({
to: {
opacity: 0.7
}
});
}
});
}
, onRender: function () {
var me = this;
var prev = {
text: '<'
, handler: function () {
me.ownerCt.down('carousel').previousChild();
}
};
var next = {
text: '>'
, handler: function () {
me.ownerCt.down('carousel').nextChild();
}
};
Ext.suspendLayouts();
if (me.directionals) {
me.insert(0, prev);
me.insert(me.items.items.length, next);
}
var index = me.items.indexOf(me.down('tbfill'));
var circles = [];
var x = 0;
var i = 0;
Ext.each(me.ownerCt.down('carousel').items.items, function (item) {
var config = {
type: 'circle'
, x: x
, y: 0
, index: i
, radius: 1
, fill: 'black'
, opacity: i == 0 ? 0.7 : 0.2
, group: 'carousel'
}
circles.push(config);
x += 3;
i++;
});
me.insert(index + 1, {
xtype: 'draw'
, height: 12
, items: circles
});
Ext.resumeLayouts();
Ext.defer(function () {
var c = me.down('draw').surface.getGroup('carousel');
c.each(function (s) {
s.on({
click: function (s) {
c.setAttributes({opacity: 0.2}, true);
var carousel = me.ownerCt.down('carousel');
carousel.showChild(carousel.items.items[s.index]);
}
});
});
}, 2);
var carousel = me.ownerCt.down('carousel');
if (carousel) {
me.handleCarouselEvents(carousel);
}
me.callParent(arguments);
}
});
Ext.widget('viewport', {
layout: 'fit'
, items: [{
xtype: 'panel'
, items: [{
xtype: 'carousel'
, items: [{
xtype: 'panel'
, title: '1'
, html: 'testing'
}, {
xtype: 'gridpanel'
, title: '2'
, columns: [{
text: 'Label'
, dataIndex: 'label'
}]
, store: {
fields: ['label']
, data: [{
label: 'a'
}, {
label: 'b'
}, {
label: 'c'
}, {
label: 'd'
}, {
label: 'e'
}, {
label: 'f'
}, {
label: 'g'
}, {
label: 'h'
}, {
label: 'i'
}, {
label: 'j'
}, {
label: 'k'
}, {
label: 'l'
}, {
label: 'm'
}, {
label: 'n'
}, {
label: 'o'
}, {
label: 'p'
}, {
label: 'q'
}, {
label: 'r'
}, {
label: 's'
}, {
label: 't'
}, {
label: 'u'
}, {
label: 'v'
}, {
label: 'w'
}, {
label: 'x'
}, {
label: 'y'
}, {
label: 'z'
}, {
label: 'a'
}, {
label: 'b'
}, {
label: 'c'
}, {
label: 'd'
}, {
label: 'e'
}, {
label: 'f'
}, {
label: 'g'
}, {
label: 'h'
}, {
label: 'i'
}, {
label: 'j'
}, {
label: 'k'
}, {
label: 'l'
}, {
label: 'm'
}, {
label: 'n'
}, {
label: 'o'
}, {
label: 'p'
}, {
label: 'q'
}, {
label: 'r'
}, {
label: 's'
}, {
label: 't'
}, {
label: 'u'
}, {
label: 'v'
}, {
label: 'w'
}, {
label: 'x'
}, {
label: 'y'
}, {
label: 'z'
}]
}
}, {
xtype: 'panel'
, title: '3'
, html: 'One last panel'
}]
}]
, dockedItems: [{
xtype: 'carouseltb'
, dock: 'top'
}]
}]
});
});
Ext.onReady（函数（）{
Ext.define（'carouselContainer'{
扩展：“Ext.container.container”
，别名：“widget.carousel”
，布局：{
类型：“hbox”
，对齐：“拉伸”
}
，默认值：{flex:1}
，款式：{
背景：“url”(http://3.bp.blogspot.com/-kanvyoXSOSs/Tsi0W496bzI/AAAAAAAAAG8/-Bq53wJqaqM/s320/carbonfibre.png)'
}
，initComponent:function（）{
var me=这个；
me.addEvents（“旋转木马更改”）；
me.callParent（参数）；
}
，onDocMouseup:function（）{
var me=这个；
me.drag=false；
var children=me.items.items；
var parentLeft=me.ownerCt.el.getLeft（）；
var规则=1000000；
var目标；
Ext.each（子项、功能（第一部分）{
l=Math.abs（div.el.getLeft（）-parentLeft）；
if（l<规则）{
规则=l；
目标=div；
};
});
me.showChild（target）；
}
，onMousedown:function（e）{
e、 stopEvent（）；//防止选择基础文本等
var me=这个；
me.drag=true；
me.startX=e.getX（）；
var PAR＝Me.E.F1（）；
在（上）
mousemove:function（e）{
e、 stopEvent（）；//防止选择基础文本等
如果（我拖动）{
var率=1；
如果（PAR.GETFELT（））。
比率=2；
}
移动（“L”，（MeistXX-E.GETX（））/速率，false）；
me.startX=e.getX（）；
}
}
});
}
，SyncSizeTowner:函数（）{
var me=这个；
如果（我的所有者）{
me.setSize（me.ownerCt.el.getWidth（）*me.items.items.length，me.ownerCt.el.getHeight（））；
}
}
，showChild:函数（项）{
var me=这个
，left=item.el.getLeft（）-me.el.getLeft（）；
me.el.first（）移动（'l'，左，真）；
me.currentItem=项目；
me.fireEvent（'carouselchange'，me，item）；
}
，nextChild:function（）{
var me=这个；
var next=me.currentItem.nextSibling（）；
me.showChild（next | | me.items.items[0]）；
}
，previousChild:函数（）{
var me=这个；
var next=me.currentItem.previousSibling（）；
me.showChild（下一个| | me.items.items[me.items.items.length-1]）；
}
，onRender:function（）{
var me=这个；
me.currentItem=me.items.items[0]；
如果（我的所有者）{
me.relayEvents（me.ownerCt，['resize']，'owner'）；
我({
ownerresize:me.syncSizeToOwner
});
}
me.mon（Ext.getBody（），'mouseup'，me.onDocMouseup，me）；
me.mon（Ext.fly（me.el.dom），'mousedown'，me.onMousedown，me）；
me.callParent（参数）；
}
});
Ext.define（'carouselTb'{
扩展：“Ext.toolbar.toolbar”
，别名：“widget.carouseltb”
，方向：正确
，initComponent:function（）{
var me=这个；
me.items=[{
xtype:'tbfill'
}, {
xtype:'tbfill'
}]
me.callParent（参数）；
}
，handleCarouselEvents:功能（旋转木马）{
var me=这个；
中继事件（carousel，['carouselchange']）；
me.on（'carouselchange'，me.onCarouselChange，me，{buffer:20}）；
}
，onCarouseChange:功能（旋转木马，项目）{
var me=这个；
console.log（me）；
var navSprites=me.down（'draw'）.surface.getGroup（'carousel'）；
setAttributes（{opacity:0.2}，true）；
var i=转盘项目索引（项目）；
导航精灵。每个功能{
如果（s.index==i）{
s、 生动活泼({
致：{
不透明度：0.7
}
});
}
});
}
，onRender:function（）{
var me=这个；
var prev={
文本：“”
，处理程序：函数（）{
me.ownerCt.down（'carousel'）.nextChild（）；
}
};
Ext.suspendLayouts（）；
如果（me.方向）{
me.插入（0，上一页）；
me.insert（me.items.items.length，下一步）；
}
var index=me.items.indexOf（me.down（'tbfill'）；
var循环=[]；
var x=0；
var i=0；
Ext.each（me.ownerCt.down（'carousel'）。items.items，function（item）{
变量配置={
类型：“圆圈”
，x:x
，y:0
，索引：i
，半径：1
，填充：“黑色”
，不透明度：i==0？0.7:0.2
，组：'旋转木马'
}
推送（配置）；
x+=3；
i++；
});
内瑟
me.addEvents('carouselchange');