gpt4 book ai didi

javascript - ExtJS : Controller hide button after capturing event

转载 作者:行者123 更新时间:2023-12-03 11:36:35 24 4
gpt4 key购买 nike

我有三个面板,每个面板有三个按钮。当我按下按钮“1”时,我希望每个面板中的其他按钮“1”隐藏。我是 ExtJS 的菜鸟,我不确定应该如何对 Controller 类进行编程。请帮忙。

这是 View 类:

Ext.define('EventButtons.view.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
viewModel: {
type: 'main'
},

layout: {
type: 'border'
},


items: [{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Buttons',

items: [{
title: 'Table1',
id:'panel1',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
id:'1',
name:'1',
width:80,
margin: '10 10 10 10',
listeners: {
click: function () {

this.fireEvent('Name', this.text);
alert(this.name);
},
Name: function(name) {
if(this.text==name){

this.hide();
}
}}
}]


},
{
title: 'Table2',
id:'panel2',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
width:80,
margin: '10 10 10 10',
},{
xtype: 'button',
text: '2',
width:80,
margin: '10 10 10 10',
},{
xtype: 'button',
text: '3',
width:80,
margin: '10 10 10 10',
}]


},
{
title: 'Table3',
id:'panel3',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
width:80,
margin: '10 10 10 10',
},{
xtype: 'button',
text: '2',
width:80,
margin: '10 10 10 10',
},{
xtype: 'button',
text: '3',
width:80,
margin: '10 10 10 10',
}]


},

],


}]
}],

});

有人可以帮助我吗?

最佳答案

为了做到这一点,您需要至少为按钮添加一个 cls,例如按钮 1、按钮 2、按钮 3。每个按钮都有一个指示器将帮助您使用 Ext.ComponentQuery 获取每个按钮。

Ext.define('EventButtons.view.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
viewModel: {
type: 'main'
},

layout: {
type: 'border'
},


items: [{
region: 'center',
xtype: 'tabpanel',
itemId: 'tab-panel-container',
items:[{
title: 'Buttons',

items: [{
title: 'Table1',
id:'panel1',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
id:'1',
name:'1',
width:80,
margin: '10 10 10 10',
listeners: {
click: function () {

this.fireEvent('Name', this.text);
alert(this.name);
},
Name: function(name) {
if(this.text==name){

this.hide();
}
}}
}]


},
{
title: 'Table2',
id:'panel2',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
width:80,
margin: '10 10 10 10',
cls: 'button-1'
},{
xtype: 'button',
text: '2',
width:80,
margin: '10 10 10 10',
cls: 'button-2'
},{
xtype: 'button',
text: '3',
width:80,
margin: '10 10 10 10',
cls: 'button-3'
}]


},
{
title: 'Table3',
id:'panel3',
xtype:'panel',
bodyPadding: 10,
width: 350,
items:[{
xtype: 'button',
text: '1',
width:80,
margin: '10 10 10 10',
cls: 'button-1'

},{
xtype: 'button',
text: '2',
width:80,
margin: '10 10 10 10',
cls: 'button-2'
},{
xtype: 'button',
text: '3',
width:80,
margin: '10 10 10 10',
cls: 'button-3'
}]


},

],


}]
}],

});

在您的 Controller 中,创建一个按钮单击事件并在此处查询其他按钮。

control: {

'#tab-panel-container button' : {
click: function(buttonItSelf){
var tabpanel = buttonItSelf.up('tabpanel'),
buttonCls = "."+ buttonItSelf.getCls(),//assuming there's only one cls as of now
otherButtons = tabpanel.query(buttonCls); // query all buttons with the same cls

Ext.Array.each(otherButtons, function(key, button, arrayItSelf){
if(button != buttonItSelf){
button.hide();
}
})
}

}

}

我还没有测试我的代码,这只是您想要做什么的粗略想法。

关于javascript - ExtJS : Controller hide button after capturing event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26470878/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com