Question

我有非常基本的属性网格，我试图以编程方式更改其中一个文本框值，并且ui不会显示更改。
当我警告BTW值时，它会显示它已被更改。

看看这里：

  Ext.onReady(function () {

    var Value = Ext.create('Ext.form.TextField', {
        id: 'Value'
    });

    var propGrid = Ext.create('Ext.grid.property.Grid', {
        title: 'Properties Grid',
        width: 400,
        renderTo: Ext.getBody(),
        source: {
            Value: null

        },
        sourceConfig: {
            Value: {
                editor: Value
            }
        }
    });

    //this wont set the value in the ui
    Ext.getCmp("Value").setValue("123456");

    //here you can see that the value was changed, but not in the ui

    Ext.create('Ext.Button', {
        text: 'Show me the value',
        margin: '20px',
        handler: function () {
            Ext.Msg.alert("", "The actual value is <b>" + Ext.getCmp("Value").getValue() + "</b>, but the text box does not show it");
        },
        renderTo: Ext.getBody()
    });


});

Answer 1

您正在采取错误的方法来更改并从属性Grid中获取值。尝试使用getSource().<field>和setProperty(<field>, <value>);

Ext.onReady(function () {
    var propGrid = Ext.create('Ext.grid.property.Grid', {
        title: 'Properties Grid',
        width: 400,
        renderTo: Ext.getBody(),
        source: {
            Value: null
        },
        sourceConfig: {
            Value: {
                editor: {
                    xtype: 'textfield',
                    name: 'value',
                    listeners: {
                        focus : function (field) {
                            field.setValue(10); // Here you can actually use the field.setValue() if you want.
                        }
                    }
                }
            }
        }, listeners : {
            afterrender : function (component) {
                component.setProperty('Value', '10101010'); // This will update your Value field.
            }
        }
    });



    //here you can see that the value was changed, but not in the ui

    Ext.create('Ext.Button', {
        text: 'Show me the value',
        margin : '20px',
        handler: function () {
           // This is the correct way of getting your field value.
           Ext.Msg.alert("Value", "The actual value is <b>" + propGrid.getSource().Value);
        }, 
        renderTo: Ext.getBody()
    });  
});

Extjs简单的propertygrid文本框值未以编程方式更改

1 个答案: