Javascript 在执行mouseover-ExtJs时如何更改面板上的图像？
我试图在执行鼠标悬停和鼠标悬停时更改每个面板的图像 如果我在面板（图像）上执行鼠标悬停操作，则该图像应替换为新图像（任何图像）。例如，具有HTML5图像的第一个面板应更改为新图像，如果我执行mouseleave操作，HTML5图像应再次显示。关于如何实现这一点有什么想法吗？先谢谢你 以下是工作代码：Javascript 在执行mouseover-ExtJs时如何更改面板上的图像？,javascript,extjs,extjs5,Javascript,Extjs,Extjs5,我试图在执行鼠标悬停和鼠标悬停时更改每个面板的图像 如果我在面板（图像）上执行鼠标悬停操作，则该图像应替换为新图像（任何图像）。例如，具有HTML5图像的第一个面板应更改为新图像，如果我执行mouseleave操作，HTML5图像应再次显示。关于如何实现这一点有什么想法吗？先谢谢你 以下是工作代码： 布局：{ 类型：“手风琴”， 标题折叠：错误 }, 项目：[{ 标题：“”， xtype:“面板详细信息” },{ 标题：“”， xtype:“面板详细信息” } .... ..... 注: 为了
布局：{
类型：“手风琴”，
标题折叠：错误
},
项目：[{
标题：“”，
xtype:“面板详细信息”
},{
标题：“”，
xtype:“面板详细信息”
}
....
.....
网格事件中使用和方法
在此中，我使用您的代码创建了一个演示。您可以在此处查看它的工作原理。希望这将帮助您或指导您解决问题或实现您的要求
Ext.create('Ext.data.Store', {
storeId: 'problemListStoreDetails',
fields: ['name', 'email', 'phone'],
data: [{
value1: 'Value 1',
value2: "Active",
value3: "11/2006"
}, {
value1: 'Value2',
value2: "Inactive",
value3: "1/1/1998"
}, {
value1: 'Value3',
value2: "Active",
value3: "5/2017"
}, {
value1: 'Value4',
value2: "pending",
value3: "11/2017"
}, {
value1: 'Value5',
value2: "Historic",
value3: "1/9/2000"
}]
});
Ext.define('MyApp.MyClass', {
extend: 'Ext.grid.Panel',
alias: 'widget.panel-details',
store: Ext.data.StoreManager.lookup('problemListStoreDetails'),
width: 300,
columns: {
defaults: {
sortable: false,
hideable: true,
menuDisabled: true,
draggable: false,
style: {
fontWeight: 'bold'
}
},
items: [{
text: "Column1",
dataIndex: 'value1',
menuDisabled: true
}, {
text: "Column2",
dataIndex: 'value2',
menuDisabled: true,
align: 'center'
}, {
text: 'Column3',
dataIndex: 'value3',
menuDisabled: true,
align: 'center',
flex: 1
}]
},
listeners: {
afterrender: function (cmp) {
var me = this,
header = cmp.getHeader().getEl();
//mouse enter event
header.on('mouseover', function (e) {
var targ = e.target.querySelector('i.x-custom-icons'),
classList = targ ? targ.classList : null;
if (targ) {
switch (targ.getAttribute('index')) {
case "0":
classList.remove('fa-html5')
break;
case "1":
classList.remove('fa-wrench');
break;
case "2":
classList.remove('fa-bar-chart');
break;
case "3":
classList.remove('fa-align-justify');
break;
}
//I have used only one icon, only for demo you can use different icons on basis of your requirement.
classList.add('fa-check');
this.lastTarget = targ;
}
}, me);
//mouseleave event
header.on('mouseleave', function (e) {
if (this.lastTarget) {
var targ = this.lastTarget,
classList = targ.classList;
//remvoe icon on mouse leave
classList.remove('fa-check');
switch (targ.getAttribute('index')) {
case "0":
classList.add('fa-html5')
break;
case "1":
classList.add('fa-wrench');
break;
case "2":
classList.add('fa-bar-chart');
break;
case "3":
classList.add('fa-align-justify');
break;
}
this.lastTarget = null;
}
}, me);
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
autoHeight: true,
fill: false,
layout: {
type: 'accordion',
titleCollapse: false
},
bodyPadding: 10,
defaults: {
xtype: 'panel-details'
},
items: [{
title: '<i index="0" class="fa fa-html5 x-custom-icons" ></i>'
}, {
title: '<i index="1" class="fa fa-wrench x-custom-icons" ></i>'
}, {
title: '<i index="2" class="fa fa-bar-chart x-custom-icons" ></i>',
}, {
title: '<i index="3" class="fa fa-align-justify x-custom-icons"></i>'
}],
renderTo: Ext.getBody()
});
Ext.create（'Ext.data.Store'{
storeId:“problemListStoreDetails”，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：[{
值1:'值1'，
值2：“活动”，
价值3:“11/2006”
}, {
value1:'Value2'，
值2：“不活动”，
价值3:“1/1/1998”
}, {
value1:'Value3'，
值2：“活动”，
价值3：“2017年5月”
}, {
value1:'Value4'，
价值2：“待定”，
价值3：“2017年11月”
}, {
value1:'Value5'，
价值2：“历史性”，
价值3:“1/9/2000”
}]
});
Ext.define（'MyApp.MyClass'{
扩展：“Ext.grid.Panel”，
别名：“widget.panel详细信息”，
存储：Ext.data.StoreManager.lookup（'problemListStoreDetails'），
宽度：300，
栏目：{
默认值：{
可排序：false，
是的，
menuDisabled：没错，
可拖动：错误，
风格：{
fontWeight:“粗体”
}
},
项目：[{
正文：“第1栏”，
dataIndex:'value1'，
menuDisabled：对
}, {
正文：“第2栏”，
dataIndex:'value2'，
menuDisabled：没错，
对齐：“居中”
}, {
文本：“Column3”，
dataIndex:'value3'，
menuDisabled：没错，
对齐：'居中'，
弹性：1
}]
},
听众：{
后渲染：函数（cmp）{
var me=这个，
header=cmp.getHeader（）.getEl（）；
//鼠标进入事件
header.on（'mouseover'，函数（e）{
var targ=e.target.querySelector（'i.x-custom-icons'），
classList=targ？targ.classList:空；
如果（目标）{
开关（target.getAttribute（'index'））{
案例“0”：
classList.remove（'fa-html5'）
打破
案例“1”：
类列表。移除（“fa-扳手”）；
打破
案例“2”：
类列表。删除（'fa-bar-chart'）；
打破
案例“3”：
classList.remove（'fa-align-justify'）；
打破
}
//我只使用了一个图标，仅用于演示，您可以根据需要使用不同的图标。
类列表。添加（'fa-check'）；
this.lastTarget=target；
}
}(我),；
//鼠标移动事件
header.on（'mouseleave'，函数（e）{
if（this.lastTarget）{
var targ=this.lastTarget，
classList=target.classList；
//鼠标左键上的remvoe图标
类列表。删除（'fa-check'）；
开关（target.getAttribute（'index'））{
案例“0”：
添加（'fa-html5'）
打破
案例“1”：
类列表。添加（'fa-扳手'）；
打破
案例“2”：
类列表。添加（'fa-bar-chart'）；
打破
案例“3”：
添加（'fa-align-justify'）；
打破
}
this.lastTarget=null；
}
}(我),；
}
}
});
Ext.create（'Ext.panel.panel'{
标题：“手风琴布局”，
自动高度：正确，
填充：假，
布局：{
类型：“手风琴”，
标题折叠：错误
},
车身衬垫：10，
默认值：{
xtype:“面板详细信息”
},
项目：[{
标题：“”
}, {
标题：“”
}, {
标题：“”，
}, {
标题：“”
}],
renderTo:Ext.getBody（）
});
Ext.create('Ext.data.Store', {
storeId: 'problemListStoreDetails',
fields: ['name', 'email', 'phone'],
data: [{
value1: 'Value 1',
value2: "Active",
value3: "11/2006"
}, {
value1: 'Value2',
value2: "Inactive",
value3: "1/1/1998"
}, {
value1: 'Value3',
value2: "Active",
value3: "5/2017"
}, {
value1: 'Value4',
value2: "pending",
value3: "11/2017"
}, {
value1: 'Value5',
value2: "Historic",
value3: "1/9/2000"
}]
});
Ext.define('MyApp.MyClass', {
extend: 'Ext.grid.Panel',
alias: 'widget.panel-details',
store: Ext.data.StoreManager.lookup('problemListStoreDetails'),
width: 300,
columns: {
defaults: {
sortable: false,
hideable: true,
menuDisabled: true,
draggable: false,
style: {
fontWeight: 'bold'
}
},
items: [{
text: "Column1",
dataIndex: 'value1',
menuDisabled: true
}, {
text: "Column2",
dataIndex: 'value2',
menuDisabled: true,
align: 'center'
}, {
text: 'Column3',
dataIndex: 'value3',
menuDisabled: true,
align: 'center',
flex: 1
}]
},
listeners: {
afterrender: function (cmp) {
var me = this,
header = cmp.getHeader().getEl();
//mouse enter event
header.on('mouseover', function (e) {
var targ = e.target.querySelector('i.x-custom-icons'),
classList = targ ? targ.classList : null;
if (targ) {
switch (targ.getAttribute('index')) {
case "0":
classList.remove('fa-html5')
break;
case "1":
classList.remove('fa-wrench');
break;
case "2":
classList.remove('fa-bar-chart');
break;
case "3":
classList.remove('fa-align-justify');
break;
}
//I have used only one icon, only for demo you can use different icons on basis of your requirement.
classList.add('fa-check');
this.lastTarget = targ;
}
}, me);
//mouseleave event
header.on('mouseleave', function (e) {
if (this.lastTarget) {
var targ = this.lastTarget,
classList = targ.classList;
//remvoe icon on mouse leave
classList.remove('fa-check');
switch (targ.getAttribute('index')) {
case "0":
classList.add('fa-html5')
break;
case "1":
classList.add('fa-wrench');
break;
case "2":
classList.add('fa-bar-chart');
break;
case "3":
classList.add('fa-align-justify');
break;
}
this.lastTarget = null;
}
}, me);
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
autoHeight: true,
fill: false,
layout: {
type: 'accordion',
titleCollapse: false
},
bodyPadding: 10,
defaults: {
xtype: 'panel-details'
},
items: [{
title: '<i index="0" class="fa fa-html5 x-custom-icons" ></i>'
}, {
title: '<i index="1" class="fa fa-wrench x-custom-icons" ></i>'
}, {
title: '<i index="2" class="fa fa-bar-chart x-custom-icons" ></i>',
}, {
title: '<i index="3" class="fa fa-align-justify x-custom-icons"></i>'
}],
renderTo: Ext.getBody()
});