stateful grid

http://stackoverflow.com/questions/9112124/remember-column-width-position-and-invisible/9112449#comment11447979_9112449

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

CSS

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

JavaScript

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), 
}));
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "change":100  },
        { 'name': 'Bart', "email":"[email protected]", "change":-20  },
        { 'name': 'Homer', "email":"[email protected]",  "change":23   },
        { 'name': 'Marge', "email":"[email protected]", "change":-11   }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    stateId: 'mygrid',
    stateful: true,
    title: 'Simpsons',
    forceFit: true,
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
    ],
    height: 200,
    width: 400,
    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    renderTo: Ext.getBody()
});