editable treegrid

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

var store = Ext.create('Ext.data.TreeStore', {
    fields:['text','Value', 'Type'],
    root: {
        text: 'Root',
        expanded: true,
        children: [
            {
                text: 'state',
                Value:'AZ',
                leaf: true
            },
            {
                text: 'state',
                Value:'AR',
                leaf: true
            },
            {
                text: 'annualMileage',
                Type:'',
                leaf: false,
                children: [
                	 {
                      text: 'Child 2',
                      Value:'2012-07-20',
                      leaf: true
                  }
                
                ]
            }
           
        ]
    }
});

Ext.define('TreePanel1', {
    extend: 'Ext.tree.Panel',

    height: 250,
    title: 'Product catalog data ',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            store: store,
            plugins:[
            Ext.create('Ext.grid.plugin.CellEditing')
            ],
            columns: [
                {
                    xtype: 'treecolumn',
                    dataIndex: 'text',
                    flex: 1,
                    text: 'Nodes',
                    editor:'textfield'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Value',
                    text: 'Value',
                    editor:'combobox'
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'Type',
                    text: 'Type',
                    editor:'datefield'
                }
            ]
        });

        me.callParent(arguments);
    }
});

var tp = new TreePanel1({renderTo:Ext.getBody()});