ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧相关的知识，希望对你有一定的参考价值。
这里藏的配置确实多。。
慢慢实践吧。
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script type="text/javascript" src="ExtJs/bootstrap.js"></script> <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <style type="text/css"> #uses the following css: .red-row{ background-color: #F5C0C0 !important; } .yellow-row{ background-color: #FBF8BF !important; } .green-row{ background-color: #99CC99 !important; } </style> <script type="text/javascript"> Ext.onReady(function(){ function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){ var str = "<input type=‘button‘ value=‘查看详细信息‘ onclick=‘alert(\"" + "这个单元格的值为: " + value + "\\n" + "这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" + "这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" + "这是第" + rowIndex + "行\\n" + "这是第" + columnIndex + "列\\n" + "这个表格对应的Ext.data.Store在这里： " + store + "， 随便用吧." + "\")‘>" return str; } var sm = new Ext.selection.CheckboxModel({stringSelect: true}); var columns =[ new Ext.grid.RowNumberer(), {header: ‘编号‘, dataIndex: ‘id‘, width:80, sortable: false}, {header: ‘名称‘, dataIndex: ‘name‘, editor: {allowBlank: false}, width:180}, {header: ‘描述‘, dataIndex: ‘descn‘, renderer: rendererDescn, width:200}, ]; var store = new Ext.data.ArrayStore({ proxy: { type: ‘ajax‘, url: ‘source.html‘, reader: { type: ‘json‘, totalProperty: ‘totalProperty‘, root: ‘root‘, idProperty: ‘id‘ } }, groupField: ‘id‘, sorter: [{property: ‘id‘, direction: ‘ASC‘}], fields: [ {name: ‘id‘}, {name: ‘name‘}, {name: ‘descn‘} ] }); var grid = new Ext.grid.GridPanel({ enableColumnMove: false, enableColumnResize: true, stripeRows: true, autoHeight: true, loadMask:true, forceFit: true, renderTo: ‘grid‘, store: store, columns: columns, selModel: sm, features: [{ftype: ‘grouping‘}], plugins: [ Ext.create(‘Ext.grid.plugin.CellEditing‘, { clicksToEdit: 1 }) ], tbar: [‘-‘,{ text: ‘增加一行‘, handler: function(){ var p = { id: ‘‘, name: ‘‘, descn: ‘‘, }; store.insert(0, p); } }, ‘-‘, { text: ‘删除一行‘, handler: function() { Ext.Msg.confirm(‘notice‘, ‘are you sure delete?‘, function(btn){ if(btn == ‘yes‘){ var sm = grid.getSelectionModel(); var record = sm.getSelection()[0]; store.remove(record); } }); } }, ‘-‘], bbar: new Ext.PagingToolbar({ pageSize: 30, store: store, displayInfo: true, displayMsg: ‘显示第{0} 条到 {1}条记录， 一共{2}条‘, emptyMsg: ‘没有记录‘ }) }); store.load(); var grid2 = new Ext.grid.PropertyGrid({ title: ‘属性表格‘, autoHeight: true, width:300, renderTo: ‘grid2‘, viewConfig: { forceFit: true }, source: { ‘名字‘: ‘不告诉你‘, ‘创建时间‘: new Date(), ‘是否有效‘: false, ‘版本号‘: .01, ‘描述‘: ‘嗯，我也没啥可描述的‘ } }); }); </script> </head> <body style="margin: 20px"> <div id=‘grid‘ style="width: 800px"></div> <div id=‘grid2‘ style="width: 800px"></div> </body> </html>
以上是关于ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧的主要内容，如果未能解决你的问题，请参考以下文章