ExtJS 3.4一次更改在多个DisplayField上设置相同的值

Question

在ExtJS 3.4中工作，我需要在多行（表单布局）上显示一些值。每行显示如下：

<label> <field> <unit of measure>

其中<unit of measure>是一个DisplayField，带有一个非手动编辑的文本，表示一个度量单位（例如升，米，......）。

我需要添加一种机制来在度量单位之间切换，例如一个按钮。理想情况下，我想单击此按钮，更改一个值（或只调用一个setter方法），并在我的界面的<unit of measure>部分查看新值。换句话说，我不想保留和循环一系列对多个DisplayField对象的引用。

到目前为止，我已经尝试实例化并保持对一个DisplayField的引用并将其插入多行，以便我可以调用field.setValue(...)，如下所示：

var dispF = new Ext.form.DisplayField({
    value:'liters'
});
var row1 = new Ext.form.CompositeField({
    ...
    items: [<some numberfield 1>, dispF]
    ...
});
var row2 = new Ext.form.CompositeField({
    ...
    items: [<some numberfield 2>, dispF]
    ...
});
//Calling this by some means
dispF.setValue('m^3');

但是，dispF只会在使用它的最后一个实例化元素上呈现（在本例中为row2）。

我也尝试过以下方法：

var t = 'liters';
var dispF = {
    xtype:'displayfield',
    value:t
};
var row1 = new Ext.form.CompositeField({
    ...
    items: [<some numberfield 1>, dispF]
    ...
});
var row2 = new Ext.form.CompositeField({
    ...
    items: [<some numberfield 2>, dispF]
    ...
});
...
//Calling this by some means
t='m^3';

在这种情况下，'liters'会被渲染到所有行的正确位置，但它不会更改为'm ^ 3'。

我不想在这个问题上使用网格。

手动处理每个字段可能有点要求，因为行很多，并且实际上可能包含多个字段和度量单位组，而将它们存储在数组中会使代码更难以读取到之后的任何人（代码）必须考虑可读性，这里）。

有没有办法通过只执行一个操作（例如赋值，调用setValue（），...）来更新每一行中的DisplayField，而不是为每一行声明和实例化一个DisplayField，然后在每个行上调用setValue（）他们？

Answer 1

下一个解决方案可以帮到你这里的不同之处在于，使用一个用户定义的函数调用更改值，而不是使用一个操作。但是使用此解决方案，您无需为每个displayfield对象保留引用或将它们存储在数组中。

解决方案中的步骤是：创建qazxsw poi子类和用户定义的函数：

displayfield

笔记：

使用ExtJS 3.4进行测试