如何通过类或标签选择器为多个元素设置值

Question

在 JQuery 中，我可以使用类或标签选择器同时为

input

多个元素设置值：

<form action="" id="mainForm">
    <input type="text" name="Phone" class="deftext" value="" > 
    <input type="text" name="Number" class="deftext" value="" >
    <input type="text" name="Name" class="deftext" value="" > 
    <input type="text" name="Lastname" class="deftext" value="" >
    <input type="text" name="Middlename" class="deftext" value="" > 
    <input type="text" name="Age" class="deftext" value="" >
    <input type="text" name="Email" class="deftext" value="" > 
    <input type="text" name="Occupation" class="deftext" value="" >
</form>

---

$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");

我可以在 ExtJS 4 中做同样的事情，将以下代码修改为单行吗？

Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....

Answer 1

您的 JQuery 代码并不真正可读，因为在查看该函数时，您看不到有多个字段受到影响。这就是为什么 ExtJS 不支持这样的语法。要么你用

Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');

或者你使用

Ext.getCmp('mainForm').getForm().setValues({
    Phone: '',
    Number: ''
});

与您的 JQuery 示例不同，这两个示例都是可读的，因为我不必知道哪些类已应用于哪些字段。

如果要将所有字段重置为上次

form.loadRecord

操作期间设置的值，或者在未执行

form.loadRecord

操作的情况下重置为初始值，请使用

form.reset

:

Ext.getCmp('mainForm').getForm().reset();

Answer 2

好吧，如果子组件有一些共同点（例如 xtype），你可以做类似的事情

Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});

但是不行，你不能在组件数组上使用组件方法。