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

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 对象保留一个引用或将它们存储在数组中。

解决步骤是：创建displayfield子类和用户自定义函数：

Ext.onReady(function(){
    // Class definition.
    TestDisplayField = Ext.extend(Ext.form.DisplayField, {
        constructor: function(config) {
            TestDisplayField.superclass.constructor.call(this, config);
        },
    });
    Ext.reg('testdisplayfield', TestDisplayField);

    // Global setter function.
    function setTestDisplayFieldValues(container, value, xtype) {
        var items = container.items;
        for (var i = 0; i < items.length; i++) {
            var component = items.get(i);
            if (Ext.isDefined(component.items)) {
                setTestDisplayFieldValues(component, value, xtype)
            } else {
                if (component.xtype == xtype) {
                    component.setValue(value);
                }
            }
        }
    };

    // Components. 
    // Here are 'displayfield' and 'tesdisplayfield' components just for test.
    var row1 = new Ext.form.CompositeField({
        items: [
            {xtype: 'numberfield', width: 50}, {xtype: 'displayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'displayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'testdisplayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'testdisplayfield', value : 'liters', width: 100}
        ]
    });
    var row2 = new Ext.form.CompositeField({
        items: [
            {xtype: 'numberfield', width: 50}, {xtype: 'displayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'displayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'testdisplayfield', value : 'liters', width: 100},
            {xtype: 'numberfield', width: 50}, {xtype: 'testdisplayfield', value : 'liters', width: 100}
        ]
    }); 

    // Form 
    Ext.create(
        {
        xtype: 'form',
        id: 'testform',
        renderTo: Ext.getBody(),
        title: 'Image', 
        width: 600,
        height: 300,
        layout: 'vbox',
        items: [
            row1,
            row2
        ],
        buttons: [
            {
            text: 'Set value',
            handler: function(button) {
                // Change the values of all 'testdisplayfield' components.
                // Here you can use 'displayfield' as xtype if all you components are 'displayfield' and must be changed.
                // In this case it's not necessary to define 'TestDisplayField' class.
                setTestDisplayFieldValues(Ext.getCmp('testform'), 'm^3', 'testdisplayfield');
            }
            }
        ]
    });
});

备注：

使用 ExtJS 3.4 测试

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

ExtJS 3.4 change set same value on multiple DisplayFields at once

javascript

extjs

extjs3