ExtJs GridPanel 操作

在代码中已经注释了plugins,因为没注释的话，使用getRowClass改变行的CSS不起作用。
另外想用行扩展的话，把plugins:expander的注释去掉即可,不过这样行的CSS就失效了。

//plugins:expander,

在页面中添加RowExpander.js文件引用，文件见附件。

<script type="text/javascript" src="RowExpander.js"></script>

CSS:

.x-grid-record-red table{  
    background-color: #FF0000; 
	color: #0000FF; 
   } 

JS code:

Ext.onReady(function () {
    Ext.QuickTips.init();
    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 expander = new Ext.grid.RowExpander({
        tpl: new Ext.Template('<p><b>Name:</b> {name}</p><br>', '<p><b>Summary:</b> {desc}</p>')
    });
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([expander, new Ext.grid.RowNumberer(), sm, {
        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: 'Grid',
        store: store,
        cm: cm,
        width: 600,
        height: 500,
        frame: true,
        enableDragDrop: true,
        sm: sm,
        viewConfig: {
            forceFit: true,
            getRowClass: function (record, index, rowParams, store) {
                if ('hohai' == record.get('school')) {
                    return 'x-grid-record-red';
                }
            }
        },
        //plugins:expander,
        collapsible: true,
        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'
        }],
        renderTo: document.body
    });

});
var data = [
    ['rowen', 'hohai', 'basketball', '2004-11-01'],
    ['rowen', 'luoyizhong', 'football', '2000-09-01'],
    ['rowen', 'jianzhong', 'pingpong', '1992-09-01'],
    ['rowen', 'jianxiao', 'pingpong', '1992-09-01']];
for (var i = 0; i < data.length; i++) {
    data[i].push('OMG');
}