You need to define this in the Launch function of your application or init of controller. Its critical to use expires when using state provider.
init : function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires : new Date(Ext.Date.now() + (1000*60*60*24*90)) // 90 days
}));
}
Then based on what components state you are trying to save set its stateful property to true, alternatively giving it a stateId.
Below is example to save state of grid:
Ext.define('MyApp.view.Users', {
extend: 'Ext.grid.Panel',
alias: 'widget.users_grid',
title: 'Users',
stateful:true,
stateId:'users_grid_stid',
store:{
data:[
{
first_name:'Joe',
last_name:'Blogs'
}
]
},
columns: {
items: [
{
xtype: 'gridcolumn',
dataIndex: 'first_name',
text: 'First Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'last_name',
text: 'Last Name',
width: 200
}
]
}
});
You can test this by modifying the width of one of the columns on this grid and then that column will be hold the modified width when you next load the page, even after browser restart.
Check F12 Console -> Application Cookies for saved component states.