JavaScript
Run Code
Open in Fiddle
Ext.define('MyApp.store.MyStore', { extend: 'Ext.data.Store', requires: [ 'Ext.data.field.Integer', 'Ext.data.field.Date', 'Ext.data.field.Boolean' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ storeId: 'MyStore', data: [ { string: 'aut', number: 1, bool: false }, { string: 'veniam', number: 2, bool: true }, { string: 'ut', number: -1, bool: true }, { string: 'temporibus', number: -2, bool: false }, { string: 'corrupti', number: 5, bool: false } ], fields: [ { name: 'string' }, { type: 'int', name: 'number' }, { type: 'date', name: 'date' }, { type: 'boolean', name: 'bool' } ] }, cfg)]); } }); Ext.define('MyApp.view.MyGridPanel', { extend: 'Ext.grid.Panel', alias: 'widget.mygridpanel', requires: [ 'Ext.grid.column.Column', 'Ext.view.Table' ], height: 250, width: 400, title: 'My Grid Panel', store: 'MyStore', columns: [ { xtype: 'gridcolumn', flex: 2, dataIndex: 'string', text: 'String' }, { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { if(parseInt(value) > 0) { metaData.style = "color:green;"; // 文字を緑に } else { metaData.style = "color:red;background-color:yellow;"; // 文字を赤に、背景を黄色に } return value; }, flex: 1, dataIndex: 'number', text: 'Number' }, { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { if (value === false) { metaData.style = "font-weight:bold;font-size:2em;"; // フォントを太字で大きく } return value; }, flex: 1, dataIndex: 'bool', text: 'Boolean' } ] }); Ext.application({ stores: [ 'MyStore' ], views: [ 'MyGridPanel' ], name: 'MyApp', launch: function() { Ext.create('MyApp.view.MyGridPanel', {renderTo: Ext.getBody()}); } });