stateful textfields

I am not sure if i am doing this right.

I wanted to have a textfield that is stateful (using cookieprovider).

below is a snippet of code i am using - and i am expecting the textfield to initialize its value from it's state but it doesnt seem to do that.

Code:

Ext.onReady(function() {
   
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.state.Manager.set("field1", "Value #1");
    
    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        
        
        items: [{
            xtype: 'textfield',
            stateful: true,
            stateId: 'field1',
            fieldLabel: "Field #1"
        }]
    });
    
    
});

Any ideas?