Extjs的CheckboxSelectionModel,ColumnModel,值回显

有三个方面的内容，一个是远程获取数据，一个是页面跳转回来FORM表单值保留，一个是自动选中复选框，这是在工作中经常用到的，看完保证不会在遇到这类问题了。  附件是工程截图

 

 <form action="<%=basePath%>/app/step2kettle_new.jsp" method="post" id="kettle" name="kettle">  
  <input type="hidden" id="folder1" name="folder1"></input>
  <input type="hidden" id="wfName" name="wfName"></input>
  <input type="hidden" id="folder1Id" name="folder1Id"></input>
 </form>
 <table align="center">
  <tr>
   <td>
    <div id="grid"></div>
   </td>
  </tr>
 </table>
 <div id="subform"></div>
 <div id="add-win" class="x-hidden">
  <div class="x-window-header">
   节点维护
  </div>
  <div id="add">
  </div>
 </div>
<SCRIPT LANGUAGE="JavaScript">

 var flag = '1';//标志位，第一次进页面可以选中默认项，第二次加载数据不再选中默认行
 var folderValue = "<%=v.getFolderId()%>";
 var sysID = '<%=v.getSysID()%>';
 var modID = '<%=v.getModID()%>';
 var typeID = '<%=v.getJobTypeID()%>';
 var nodeID = '<%=v.getNodeID()%>';
 var policyID = '<%=v.getPolicyID()%>';
 var typeName = '<%=v.getJobTypeName()%>';
 
  function jsonDecode(data){
   return new Function("return"+data)();
  }
  function mes(){
   Ext.MessageBox.alert("信息","该节点配置的数据源无任务，请查看数据源配置并修改调度节点信息");
  }
 var folderStore  = new Ext.data.JsonStore({
  url: '<%=basePath%>/getFolder.di?nodeID='+nodeID+'&typeID='+typeID,
  fields: ['folderID', 'folderName']
 });
 
 folderStore.on("loadexception",mes);
 //-2011.11.8,add by zxg
 folderStore.on("load",function(store,record,opts){
  if(folderValue!='null'){
   Ext.getCmp("folder").setValue(folderValue);//回显
   getWorkFlows();//复选框内容显示
   }
 });
 //
 folderStore.load();
 
 var folder = new Ext.form.ComboBox({
    fieldLabel: 'KETTLE任务类型<span style="color: red">*</span>',
  store: folderStore,
  id:'folder',
  name:'folder',
    displayField:'folderName',
  valueField:'folderID',       
    typeAhead: true,
    mode: 'local',
  triggerAction: 'all',
  forceSelection :true,
    selectOnFocus:true,
  width : 200
    }); 
 function getWorkFlows(){
    ds.load({params:{kettleType:folder.getValue()},callback: setBackValue});
 } 
 folder.on('select',getWorkFlows);
 
 var Plant = Ext.data.Record.create([{name:'wf',mapping:'wf'}]);
 var ds = new Ext.data.GroupingStore({
   proxy: new Ext.data.HttpProxy({url:'<%=basePath%>/getWokflowByFolderAndNode.di?nodeID='+nodeID+'&typeID='+typeID}),
      reader: new Ext.data.JsonReader({}, Plant)
  });
  /*
 var bar = new Ext.PagingToolbar({
        pageSize: 20,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录",
    firstText:"首页",
    prevText:"上一页",
    nextText:"下一页",
    lastText:"尾页",
    refreshText:"刷新",
    beforePageText :"当前页",
    afterPageText:"共{0}页"
     }); 
    */
 var sm = new Ext.grid.CheckboxSelectionModel();   
 var cm = new Ext.grid.ColumnModel([
    sm,
   {header:'Kettle任务名称',dataIndex:'wf',sortable:true} 
  ]);
 //设置选中的复选框内容
 function setBackValue(){
  var baV="<%=v.getWfName()%>".split(",");//要回显的所有主键
  var records=[];//存放选中记录
  for(var i=0;i<baV.length;i++){
   ds.each(function(record){
    if(baV[i]==record.get("wf")){//根据后台数据判断那些记录默认选中  
      records.push(record);
     }
   });
  }
   sm.selectRecords(records);//执行选中记录
 }
 function nextStep(){
  var tt =sm.getSelections();
  
  if (tt.length<1)
  {
   Ext.MessageBox.alert("信息","请选择一条记录");
  }else{
   document.all.item("folder1Id").value=folder.getValue();
   //getRawValue();文本值
   for(var i=0;i<tt.length;i++){
    document.all.item("wfName").value += tt[i].data.wf+",";
   }
   document.forms["kettle"].submit();
  }
 }

 function back(){
  location.href = '<%=basePath%>/app/step1.jsp?sysID='+sysID+'&modID='+modID+'&policyID='+policyID+'&nodeID='+nodeID+'&jobTypeName='+typeName+'&jobTypeID='+typeID;
 }
 Ext.onReady(function() {
 Ext.QuickTips.init();
 Ext.MessageBox.buttonText.ok = "确定";
 var modField = new Ext.form.TextField({name:'id',value:''});
 var processform=new Ext.FormPanel({applyTo:'subform',items:[modField]});
   processform.hide();
 var grid = new Ext.grid.GridPanel({
     id: 'nodegrid',
     loadMask: {msg:'正在加载数据，请稍侯…'},
     store:ds,
     cm:cm,
     sm:sm,
     viewConfig: { forceFit:true},
         tbar:[
      {text:'上一步',iconCls:'edit',handler:back},'-',
      {text:'下一步', iconCls:'add',iconAlign: 'right' ,handler:nextStep},'-'
     ],
     //bbar: bar,
     width:730,
         height:340,
         frame:false,
     collapsible: false,
         animCollapse: false,
         iconCls:'icon-grid'
       }); 

    var ct = new Ext.Panel({
     applyTo: 'grid',
     frame: true,
     title: 'Kettle任务列表',
         defaultType: 'textfield',
     tbar: ['KETTLE任务类型  :', folder],
     items: [grid]
  });
});

 </SCRIPT>