HTML设置：
head--->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <!-- JS文件的引用 --> <script type="text/javascript" src="../../examples/ux/RowExpander.js"></script> <script type="text/javascript" src="GridWithPlugins.js"></script> <style type="text/css"> body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(../../examples/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(../../examples/shared/icons/fam/add.gif) !important; } .option { background-image:url(../../examples/shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(../../examples/shared/icons/fam/delete.gif) !important; } .save { background-image:url(../../examples/shared/icons/save.gif) !important; } </style>
JS--->
/** * 2011_04_15 */ Ext.onReady(function() { Ext.QuickTips.init(); var xg = Ext.grid; //简称 //ArrayReader var reader = new Ext.data.ArrayReader({},[ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, {name: 'industry'}, {name: 'desc'} ]); //Grid1_rowExpander 行内容扩展 var expander = new Ext.ux.grid.RowExpander({ tpl: new Ext.Template( '<p><b>Company:</b> {company}</p><br>', '<p><b>Summany:</b> {desc}</p>' ) }); //第一个grid：带有行内容扩展的。 var grid1 = new xg.GridPanel({ store: new Ext.data.Store({ //store配置参数 reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel({ //cm_ColumnModel模型的添加 defaults: { width: 20, sortable: true }, columns: [ //列 expander, //添加行内容扩展 {id: 'company', header: 'Company', width: 40, dataIndex: 'company'}, {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', dataIndex: 'change'}, {header: '% Change', dataIdnex: 'pctChange'}, {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ] }), viewConfig: { //grid视图的配置 forceFit: true }, width: 600, //height: 300, //说明：当设置autoHeight属性时，height就起不到作用 autoHeight: true, plugins: expander, //扩展组件 collapsible: true, animCollapse: false, title: 'GridWithExpanderRows', iconCls: 'icon-grid', renderTo: document.body }); //grid2_CheckboxSelectionModel var sm = new xg.CheckboxSelectionModel(); var grid2 = new xg.GridPanel({ store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel({ defaults: { width: 120, sortable: true }, columns: [ sm, {id: 'company', header: 'Company', width: 200, dataIndex: 'company'}, {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', dataIndex: 'change'}, {header: '% Change', dataIndex: 'pctChange'}, {header: 'Last Updated', width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ] }), sm: sm, columnLines: true, //true to add css for column separation lines. Default is false. width: 600, //height: 300, autoHeight: true, frame: true, title: 'GridWithCheckboxSelection', iconCls: 'icon-grid', renderTo: document.body }); //grid3 var grid3 = new xg.GridPanel({ store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ new xg.RowNumberer(), {id: 'company', header: 'Company', width: 40, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', width: 20, sortable: true, dataIndex: 'change'}, {header: '% Change', width: 20, sortable: true,dataIndex: 'pctChange'}, {header: 'Last Updated', width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ]), viewConfig: { forceFit: true }, columnLines: true, //为grid添加样式：方格 width: 600, //height: 300, autoHeight: true, title: 'GridWithNumberedRows', iconCls: 'icon-grid', renderTo: document.body });//end of grid3 //grid4 var sm4 = new xg.CheckboxSelectionModel({ listeners: { selectionchange: function(sm) { //当行选择发送改变时触发 if(sm.getCount()) { //如果选择了行 grid4.removeButton.enable(); //显示removeButton } else { grid4.removeButton.disable(); } } } }); var grid4 = new xg.GridPanel({ id: 'button-grid', store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ sm4, {id: 'company', header: 'Company', width: 40, sortable: true, dataIndex: 'company'}, {header: 'Price', width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', width: 20, sortable: true, dataIndex: 'change'}, {header: '% Change', width:20, sortable: true, dataIndex: 'pctChange'}, {header: 'Last Updated', width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ]), sm: sm4, viewConfig: { forceFit: true }, columnLines: true, buttons: [{text: 'Save'}, {text:'Cancel'}], buttonAlign: 'center', tbar: [{//顶部工具栏 text: 'AddSomething', tooltip: 'Add a new row', //提示信息 iconCls: 'add', handler: function() { alert("这是添加按钮单击事件"); } }, '-', { text: 'Options', tooltip: '选项', iconCls: 'option' }, '-', { text: 'Remove Something', tooltip: 'Remove the selected item', iconCls: 'remove', ref: '../../examples/removeButton', disabled: true //开始时不可见 }], width: 600, //height: 300, autoHeight: true, frame: true, title: 'Support for standard Panel features such as framing,buttons and toolbars', iconCls: 'icon-grid', renderTo: document.body });//end of grid4 }); //数据 Ext.grid.dummyData = [ //说明：至于描述列的数据，在后面添加。 ['大唐人制造业1',99.98,0.11,0.23,'9/1 12:00am', '制造业'], ['大唐人制造业2',99.98,-0.11,-0.23,'9/1 12:00am', '制造业'], ['大唐人金融1',99.98,0.11,0.23,'9/1 12:00am', '金融'], ['大唐人金融2',99.98,-0.11,-0.23,'9/1 12:00am', '金融'] ]; for(var i = 0;i < Ext.grid.dummyData.length; i++) { Ext.grid.dummyData[i].push(String.format("第{0}条描述信息!")) }
