ExtJs Grid 往 FormPanel传值

一个简单的grid 传form 传值，用了click事件，其实用select事件更优雅一点。

Ext.onReady(function () {
    var data = [
        ['rowen', 'hohai', 'basketball', '2004-11-01'],
        ['yyy', 'yizhong', 'football', '2004-01-11'],
        ['ysc', 'jianzhong', 'pingpong', '2004-01-21'],
        ['yww', 'jianxiao', 'pingpong', '2004-01-31']];
    var reader = new Ext.data.ArrayReader({},
    [{
        name: 'name'
    },
    {
        name: 'school'
    },
    {
        name: 'sport'
    },
    {
        name: 'year',
        type: 'date',
        dateFormat: 'Y-m-d'
    },
    {
        name: 'desc'
    }]);
    var store = new Ext.data.Store({
        data: data,
        reader: reader,
        sortInfo: {
            field: 'name',
            direction: 'desc'
        }
    });
    var cm = new Ext.grid.ColumnModel([{
        header: '姓名',
        sortable: true,
        width: 160,
        dataIndex: 'name'
    },
    {
        header: '入学年份',
        sortable: true,
        width: 160,
        dataIndex: 'school',
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    },
    {
        header: '运动爱好',
        sortable: true,
        width: 160,
        dataIndex: 'sport'
    },
    {
        header: '入学年份',
        sortable: true,
        width: 160,
        dataIndex: 'year',
        renderer: Ext.util.Format.dateRenderer('Y-m-d')
    }]);

    grid = new Ext.grid.GridPanel({
        title: 'groupGrid',
        store: store,
        cm: cm,
        width: 600,
        height: 200,
        frame: true,
        //draggable :true,
        enableDragDrop: true,
        viewConfig: {
            forceFit: true
        },
        //animCollapse:true,
        collapsible: true,
        // inline toolbars
        tbar: [{
            text: 'Add Something',
            tooltip: 'Add a new row',
            iconCls: 'add',
            handler: function () {
                alert("Add Something");
            }
        },
        '|', {
            text: 'Options',
            tooltip: 'Blah blah blah blaht',
            iconCls: 'option'
        },
        '|', {
            text: 'Remove Something',
            tooltip: 'Remove the selected item',
            iconCls: 'remove'
        }]
    });
    var form = new Ext.FormPanel({
        autoWidth: true,
        bodyStyle: 'padding:5px 5px 0',
        frame: true,
        height: 400,
        labelAlign: 'right',
        labelWidth: 80,
        title: 'form',
        width: '120',
        items: [{
            layout: 'column',
            border: false,
            items: [{
                columnWidth: 0.50,
                layout: 'form',
                border: false,
                items: [{
                    tabIndex: 1,
                    anchor: '100%',
                    fieldLabel: '姓名',
                    name: 'name',
                    xtype: 'textfield'
                }]
            },
            {
                columnWidth: 0.50,
                layout: 'form',
                border: false,
                items: [{
                    tabIndex: 12,
                    anchor: '100%',
                    fieldLabel: '学校',
                    name: 'school',
                    xtype: 'textfield'
                }]
            },
            {
                columnWidth: 0.50,
                layout: 'form',
                border: false,
                items: [{
                    tabIndex: 13,
                    anchor: '100%',
                    fieldLabel: '运动爱好',
                    name: 'sport',
                    xtype: 'textfield'
                }]
            },
            {
                columnWidth: 0.50,
                layout: 'form',
                border: false,
                items: [{
                    tabIndex: 13,
                    anchor: '100%',
                    fieldLabel: '入学年份',
                    name: 'year',
                    format: 'Y-m-d',
                    xtype: 'datefield'
                }]
            }]
        }]
    });
    var win = new Ext.Window({
        title: 'je test',
        height: 500,
        renderTo: document.body,
        width: 600,
        items: [grid, form]
    });
    win.show();
    grid.on('click', function () {
        var record = grid.getSelectionModel().getSelected()
        form.getForm().findField('name').setValue(record.get('name'));
        form.getForm().findField('school').setValue(record.get('school'));
        form.getForm().findField('sport').setValue(record.get('sport'));
        form.getForm().findField('year').setValue(record.get('year'));
    });
});