第七章ExtJS-的Grid.ppt

ExtJS的Grid 效果 代码 要显示在Grid中的数据 // 创造要显示在Grid中的JSon对象 var userData = { success: true,// 结果成功标识 results: 2,// 结果记录的总数量 rows: [ { userNumber[微软用户1]?: a, userName: Eric[微软用户2]? },{ userNumber: b, userName: Janet } ] }; ?[微软用户1]数据的属性名称 ?[微软用户2]数据的值 代码 数据存储区 var store = new Ext.data.JsonStore({ data: userData,// 要接收的数据 url: grid/getUserListServ,// 一定要加url，否则报“this.proxy is undefined”错误 totalProperty: results,// 结果总数在JSon数据中对应的属性的名称 root: rows,// 结果数据在JSon数据中的名称 autoLoad:true, fields:[ // 结果数据在JSon对象中的属性名称 { name: user_number[微软用户1]?, mapping: userNumber },// 数据解析模式 { name: user_name, mapping: userName[微软用户2]? } ] }); // 加载数据 store.load(); ?[微软用户1]数据被JsonStore加载后，在JsonStore中的key ?[微软用户2]要加载的数据在JSon对象中的属性名称 代码 Grid： var userGrid = new Ext.grid.GridPanel({ //renderTo: show,// 显示在页面中的div的id title: 测试,// 标题 height: 180, width: 600, columns:[ // 表头设计 { header: 用户编号, dataIndex: user_number[微软用户1]? }, { header: 用户名, dataIndex: user_name } ], store: store }); ?[微软用户1]被表头对应JsonStore中的哪个key下的数据 添加多选按钮和排序功能 效果 添加多选按钮和排序功能 // 表头设计 var columnModel = new Ext.grid.ColumnModel[微软用户1]?([ new Ext.grid.RowNumberer(),// 行号 checkBoxList,// 在表头添加多选按钮 { header: 用户编号, dataIndex: user_number, hidden: true[微软用户2]? }, { header: 用户名, dataIndex: user_name, sortable: true[微软用户3]? , hideable: false[微软用户4]? }//允许排序 ]); ?[微软用户1]这里贺前面不同，将表头与表体分开写，也是可以的 ?[微软用户2]默认时隐藏本列 ?[微软用户3]设定本列可以排序 ?[微软用户4]是否不循序隐藏本列 添加多选按钮和排序功能 // 表体 var userGrid = new Ext.grid.GridPanel({ renderTo: show,// 显示在页面中的div的id title: 测试,// 标题 height: 180, width: 600, cm: columnModel,// 为表体添加表头 sm: checkBoxList,// 在表体添加多选按钮[微软用户1]? store: store }); ?[微软用户1]不要忘记在表体也要添加多选框，否则，多选框会变成单选框 * * *