Ext新手一枚,写此文备忘,同时希望对遇到相同问题的人能有所帮助。
完成功能:
1.grid显示第一个action传回的数据:加载的是第一个store存储的数据
2.grid显示第二个action传回的数据:加载的是第二个store存储的数据,此时通过表单提交
涉及关键概念:struct2、store、Ajax、 Json
- var app={};//全局变量
- //定义第一次用到的store
- app.store=new Ext.data.Store({
- '*.action',// 第一个action
- baseParams:{},
- //采用Json解析器,这里传回的参数有userid,password
- reader:new Ext.data.JsonReader({
- totalProperty:"results",//表示记录的总个数
- root:"rows",
- id:"id"
- },[{{name:'userid'},{name:'password'}]),
- remoteSort:false
- });//store定义结束
- //定义grid的列
- app.cm = new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),
- {id:'userid',
- header:"用户名",
- dataIndex:' userid ',
- sortable:true,
- width:Ext.grid.GridView.autoFill
- },
- {
- id:'password',
- header:"密码",
- dataIndex:'password',
- sortable:true,
- width:Ext.grid.GridView.autoFill
- }]);
- //定义分页栏
- app.pageToolbar = new Ext.PagingToolbar({
- pageSize : 50,
- displayInfo : true,
- store : app.store,
- afterPageText: '页,共{0}页',
- beforePageText: '第',
- displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
- emptyMsg: "没有记录",
- firstText: '第一页',
- prevText: '前一页',
- nextText: '后一页',
- lastText: '最后一页',
- refreshText: '刷新',
- });//pagebar
- //定义grid
- app.grid=new Ext.grid.GridPanel({
- tbar:app.pageToolbar,
- style: 'background-color:#DFE8F6;',
- autoSizeColumns : true,
- stripeRows:true,
- store:app.store,
- clicksToEdit:1,
- cm:app.cm,
- });
- //提交到first.action,并加载传回的数据。Start和limit参数用于分页显示
- app.store.load({params:{start:0,limit:pageSize}});
- //第二次提交时,传递表单的参数,将结果返回到grid中
- if(theForm.form.isValid()){ //如果表单数据合法
- //定义第二次用到的store
- app.searchStore=new Ext.data.Store({
- url:'second.action',//从second.action中取数据
- method:'post',
- baseParams:theForm.form.getValues(), //从表单中获取参数
- reader:new Ext.data.JsonReader({
- totalProperty:"results",//表示记录的总个数
- root:"rows",
- id:"id"
- },[{name:'userid'},{name:'password'}]),
- remoteSort:false
- });//store定义结束
- //重新配置grid的store
- app.grid.reconfigure(app.searchStore,app.cm);
- //重新绑定分页工具栏
- app.pageToolbar.bind(app.searchStore);
- app.searchStore.load({params:{start:0,limit:50}});
- //刷新grid以显示数据
- app.grid.getView().reflash();
- }
参考资料:
转载于:https://blog.51cto.com/luliang1024/991827