Question

我们有ExtJs字段，其中LabelAlign被配置为＆＃39; top＆＃39;，但是当我们点击标签时它会聚焦该字段，如果该字段是复选框，则会产生问题，如点击它检查的复选框标签/取消选中复选框字段。我已经搜索了一些禁用相同的配置，但无法找到。后来我使用了pointer-events：标签上没有CSS属性，但不确定它是否是正确的解决方案。请指导。

Fiddle Example illustrating the above issue

Answer 1

您可以通过从标签中删除for属性来阻止标签上的点击影响复选框。这将破坏标签和复选框之间的关联。要在ExtJS中执行此操作：

Ext.query('label[id^=checkbox]').forEach(function (item) {
    item.removeAttribute('for');
});

这将找到复选框的所有标签并删除for属性，以便标签不再与复选框相关联。

如果您要为所有字段实现此功能，而不仅仅是复选框，请将其更改为搜索所有标签：

Ext.query('label').forEach(function (item) {
    item.removeAttribute('for');
});

此代码应在创建表单后执行。

请参阅更新的小提琴here。

Answer 2

据我所知，没有这样的解决方案，因为它不仅会出现在复选框的每个字段中，而且还有一个解决方法，您可以添加两个xtypes作为标签和字段，并在vbox布局中进行排列并给那个标签一个＆＃39; html＆＃39; config作为下一个字段的fieldlabel。

例如，

{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}

这样，由extjs为checkboxfield制作的容器对于标签和字段将是不同的，所以当你点击标签时，它对它有不同的控制，因此不会检查复选框。

Extjs LabelAlign＆＃39; top＆＃39;点击问题

2 个答案: