ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧
生活随笔
收集整理的這篇文章主要介紹了
ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這里藏的配置確實(shí)多。。
慢慢實(shí)踐吧。
<!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='查看詳細(xì)信息' οnclick='alert(\"" +"這個(gè)單元格的值為: " + value + "\\n" +"這個(gè)單元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +"這個(gè)單元格對(duì)應(yīng)的record是： " + record + ", 一行里的數(shù)據(jù)都在里邊\\n" +"這是第" + rowIndex + "行\(zhòng)\n" +"這是第" + columnIndex + "列\(zhòng)\n" +"這個(gè)表格對(duì)應(yīng)的Ext.data.Store在這里： " + store + "， 隨便用吧." +"\")'>"return str;}var sm = new Ext.selection.CheckboxModel({stringSelect: true});var columns =[new Ext.grid.RowNumberer(),{header: '編號(hào)', 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: '沒(méi)有記錄'})});store.load();var grid2 = new Ext.grid.PropertyGrid({title: '屬性表格',autoHeight: true,width:300,renderTo: 'grid2',viewConfig: {forceFit: true},source: {'名字': '不告訴你','創(chuàng)建時(shí)間': new Date(),'是否有效': false,'版本號(hào)': .01,'描述': '嗯，我也沒(méi)啥可描述的'}});});</script> </head> <body style="margin: 20px"><div id='grid' style="width: 800px"></div><div id='grid2' style="width: 800px"></div> </body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/aguncn/p/5339067.html
總結(jié)
以上是生活随笔為你收集整理的ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Eclipse 创建web项目后没有 J
- 下一篇： 20135320赵瀚青LINUX第十八章