Extjs自学笔记--gridpanel
已经关注extjs有一段时间了，今天把gridpanel的学习记录一下，供以后参考。
首先有几个概念:fields,store,CheckboxSelectionModel,columnModel,RowSelectionModel
1、首先你需要数据源
数据的生成这个可以后台生成json格式的数据，然后通过proxy填充到ext.data.store，所以概念中的store就是作为grid的数据源的。fields应该是对应的列名。load就是获取到的数据按照开始行数，每页显示多少行加载到store中了。
var myfields = ["id","name","pwd"]; var mystore = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:"你的数据生成的地址",method:"POST"), reader:new Ext.data.JsonReader({ fields:myfields, root:"data", id:"id", totalProperty:"totalCount" }) ); mystore.load({params:{start:0,limit:pageSize}); var usersm = new Ext.grid.CheckboxSelectionModel({ dataIndex: "id" }); var usercm = new Ext.grid.ColumnModel([ usersm, { header: "工号", dataIndex: "id", tooltip: "工号", sortable: true }, { header: "姓名", dataIndex: "name", tooltip: "姓名", sortable: true }])var userGrid = new Ext.grid.GridPanel({ id: "usergrid", store: UserInfoStore, sm: usersm, cm: usercm, autoHeight: true, autoWidth: true, loadMask: {msg:'正在加载数据，请稍侯……'}, autoScorll: true, viewConfig: { columnsText: "显示/影藏列", sortAscText: "正序排列", sortDescText: "倒序排列", forceFit: true }, tbar: [ { text: "新增", tooltip: "新增员工信息", icolCls: "addicon" //handler:AddUserFn }, "", "|", "", { text: "编辑", tooltip: "编辑员工信息", icolCls: "editicon", handler:EditUserFn }, "", "|", "", { text: "删除", tooltip: "删除员工信息", icolCls: "deleteicon" //handler:DeleteUserFn }, "|", new Ext.Toolbar.Fill() ], listeners: { "contextmenu": function(e) { e.stopEvent(); }, "rowcontextmenu": function(grid, rowIndex, e) { e.stopEvent(); } }, bbar: [ new Ext.PagingToolbar({ store: UserInfoStore, pageSize: pageSize, emptyMsg: "无信息显示", prevText: "上一页", nextText: "下一页", refreshText: "刷新", lastText: "最后页", firstText: "第一页", beforePageText: "当前页", afterPageText: "共{0}页" }), new Ext.Toolbar.Fill() ] });