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(); 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.push('OMG');}
页:
[1]