Extjs simple propertygrid文本框值不会以编程方式更改

我有非常基本的属性网格，我试图以编程方式更改其中一个文本框的值，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()
    });


});

Ext.onReady（函数（）{
var Value=Ext.create（'Ext.form.TextField'{
id:'值'
});
var propGrid=Ext.create（'Ext.grid.property.grid'{
标题：“属性网格”，
宽度：400，
renderTo:Ext.getBody（），
资料来源：{
值：null
},
sourceConfig：{
价值：{
编者：价值观
}
}
});
//这不会在ui中设置值
Ext.getCmp（“值”）.setValue（“123456”）；
//在这里，您可以看到值已更改，但在ui中没有更改
Ext.create（'Ext.Button'{
文本：“显示值”，
保证金：“20px”，
处理程序：函数（）{
Ext.Msg.alert（“，”实际值为“+Ext.getCmp（“value”）.getValue（）+”，但文本框不显示“）；
},
renderTo:Ext.getBody（）
});
});

您从属性网格中更改和获取值的方法是错误的。尝试使用

getSource（）。

和

setProperty（，）

Ext.onReady（函数（）{
var propGrid=Ext.create（'Ext.grid.property.grid'{
标题：“属性网格”，
宽度：400，
renderTo:Ext.getBody（），
资料来源：{
值：null
},
sourceConfig：{
价值：{
编辑:{
xtype:'textfield'，
名称：“值”，
听众：{
焦点：功能（字段）{
field.setValue（10）；//如果需要，可以在这里实际使用field.setValue（）。
}
}
}
}
}，听众：{
afterrender:函数（组件）{
setProperty（'Value'，'10101010'）；//这将更新您的值字段。
}
}
});
//在这里，您可以看到值已更改，但在ui中没有更改
Ext.create（'Ext.Button'{
文本：“显示值”，
保证金：“20px”，
处理程序：函数（）{
//这是获取字段值的正确方法。
Ext.Msg.alert（“值”，“实际值为”+propGrid.getSource（）.Value）；
}, 
renderTo:Ext.getBody（）
});  
});

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()
    });  
});