EXTJS 5 - 标记字段或组合框 - 显示和隐藏表单字段
-
21-12-2019 - |
题
我想根据多选组合框(标记字段)中选择的项目动态显示和隐藏表单中的字段。
组合框中选择的每个项目都有几个关联的隐藏表单字段(待显示)。
这些字段具有属性“hidden:true”;
我可以显示字段,但当我从组合框字段或标记字段中删除项目时,无法隐藏它们。
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var field = Ext.ComponentQuery.query('#A')[0];
var field1 =Ext.ComponentQuery.query('#B')[0];
var field2 =Ext.ComponentQuery.query('#C')[0];
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
console.log(records) 提供以下结果:
展示:
["itemone"]
["itemone", "itemtwo" ]
["itemone", "itemtwo", "itemthree"]
隐藏:
["itemone", "itemtwo"]
["itemone"]
您能给我纠正代码的建议吗?
笔记:抱歉,之前的下一篇文章发错了地方
我尝试实施你的建议,但没有成功(初学者的困难)。
我的代码:
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var fields = Ext.ComponentQuery.query('[autoHideTag]');
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 );
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
萤火虫 说:
类型错误:fields.setVisible 不是一个函数
请您帮忙提供更多建议。
谢谢。
解决方案
事实上,您的代码存在逻辑缺陷。您使所有字段可见,但是当您删除第三个标签时,会发生什么?您循环组合中当前选定的标签,并且当您显示它时,您已经 ["itemone", "itemtwo"]
, ,那里没有“第三项”。所以你的最后一种情况,可以隐藏第三个字段的情况是注释执行的。第二个和第一个标签依此类推。
我要做的是循环遍历每个字段,如果选择了标签则显示它,如果没有选择则隐藏它。您可以使用 records.indexOf('itemone') !== -1
例如,测试标签是否被选择。
另一个提示,我将使用一个具有独特字段名称的自定义属性,这样既可以简化组件查询,又可以无意识地知道要针对所选标签进行测试的标签。
这就是我的意思...如果您这样定义字段:
{
xtype: 'textfield'
,autoHideTag: 'itemone' // custom marker
}
您可以在一个查询中获取所有字段:
// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');
如果需要并且适用的话,您可以使查询更加具体,例如“textfield[autoHideTag]”或“field[autoHideTag]”。
最后,您将知道要测试该字段的标签:
// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );
瞧。与 Ext 一起玩得开心!
不隶属于 StackOverflow