Extjs simple propertygrid textbox value wont changed programatically

Question

http://jsfiddle.net/nvr5uzy7/4

I have very basic property grid and I am trying to change one of its text boxes value programmatically and the ui wont show the change.
When I alert the value BTW, it shoows that it was changed.

have a look here:

  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

You are taking the wrong approach to change and get values from a property Grid. Try using getSource().<field> and 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()
    });  
});