Ext新手一枚,写此文备忘,同时希望对遇到相同问题的人能有所帮助。
完成功能:
1.grid显示第一个action传回的数据:加载的是第一个store存储的数据
2.grid显示第二个action传回的数据:加载的是第二个store存储的数据,此时通过表单提交
涉及关键概念:struct2、store、Ajax、 Json
 
  
  1. var app={};//全局变量  
  2. //定义第一次用到的store  
  3. app.store=new Ext.data.Store({  
  4.         '*.action',// 第一个action
  5.         baseParams:{},  
  6.         //采用Json解析器,这里传回的参数有userid,password  
  7.         reader:new Ext.data.JsonReader({  
  8.             totalProperty:"results",//表示记录的总个数  
  9.             root:"rows",  
  10.             id:"id" 
  11.         },[{{name:'userid'},{name:'password'}]),  
  12.         remoteSort:false 
  13.     });//store定义结束  
  14.  
  15. //定义grid的列  
  16. app.cm = new Ext.grid.ColumnModel([    
  17.         new Ext.grid.RowNumberer(),  
  18.         {id:'userid',  
  19.         header:"用户名",  
  20.         dataIndex:' userid ',  
  21.         sortable:true,  
  22.         width:Ext.grid.GridView.autoFill  
  23.         },  
  24.         {  
  25.             id:'password',  
  26.             header:"密码",  
  27.             dataIndex:'password',  
  28.             sortable:true,  
  29.             width:Ext.grid.GridView.autoFill  
  30. }]);    
  31. //定义分页栏  
  32. app.pageToolbar = new Ext.PagingToolbar({  
  33. pageSize : 50,  
  34.     displayInfo : true,  
  35.      store : app.store,  
  36.      afterPageText: '页,共{0}页',     
  37.      beforePageText: '第',     
  38.      displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',  
  39.      emptyMsg: "没有记录",  
  40.      firstText: '第一页',     
  41.      prevText: '前一页',     
  42.      nextText: '后一页',     
  43.      lastText: '最后一页',     
  44.      refreshText: '刷新',  
  45. });//pagebar  
  46. //定义grid                  
  47. app.grid=new Ext.grid.GridPanel({  
  48.         tbar:app.pageToolbar,  
  49.         style: 'background-color:#DFE8F6;',  
  50.         autoSizeColumns : true,  
  51.         stripeRows:true,  
  52.         store:app.store,  
  53.         clicksToEdit:1,  
  54.         cm:app.cm,  
  55. });  
  56. //提交到first.action,并加载传回的数据。Start和limit参数用于分页显示  
  57. app.store.load({params:{start:0,limit:pageSize}}); 

 

 
  
  1. //第二次提交时,传递表单的参数,将结果返回到grid中   
  2. if(theForm.form.isValid()){ //如果表单数据合法  
  3.         //定义第二次用到的store  
  4.         app.searchStore=new Ext.data.Store({  
  5.                 url:'second.action',//从second.action中取数据    
  6.                 method:'post',  
  7.                 baseParams:theForm.form.getValues(),    //从表单中获取参数        
  8.                 reader:new Ext.data.JsonReader({  
  9.                 totalProperty:"results",//表示记录的总个数  
  10.                 root:"rows",  
  11.                 id:"id" 
  12.                 },[{name:'userid'},{name:'password'}]),  
  13.                 remoteSort:false 
  14.         });//store定义结束  
  15.                   
  16.         //重新配置grid的store  
  17.         app.grid.reconfigure(app.searchStore,app.cm);  
  18.         //重新绑定分页工具栏  
  19.         app.pageToolbar.bind(app.searchStore);  
  20.         app.searchStore.load({params:{start:0,limit:50}});  
  21.         //刷新grid以显示数据  
  22.         app.grid.getView().reflash();                             

 

参考资料:

1.ExtJS的form和grid结合示例

2.ext 动态修改grid 的store 的url地址,如何重现加载grid里的数据