通过Iframe 来实现tab页存放jsp页面，并实现动态指定Url（ExtJs）

先上图片：

<!--StartFragment -->

   
  实现的效果是：每个tab页存放的是一个jsp页面，并且根据要求，实现重新加载tab页中的jsp页面。
  步骤一：
    定义一个form表单（定义form的目的主要是为了实现post提交，为什么要使用post提交，我想大家都知道）：
  <form name="tabD"   method="post" id="tabD"></form>
  
  PS：参数并不一定需要存放在form表单定义的文本框，可以直接构造带参数的url
   
 定义一个tabPanel ：
   var tabs = growRecord.tabs = new Ext.TabPanel({
  region:'center',
  forceLayout:true,
  margins:'0 5 5 0',
        width:'100%',
        activeTab: 0,
        items:[
            {title: '基本信息',  html: "<iframe name ='tab0', id ='tab0',scripts=true,scrolling='auto' frameborder='0' width='100%' height='100%' src=' '/>"},
            {title: '播种',      html: "<iframe name ='tab1', id ='tab1',scripts=true,scrolling='auto' frameborder='0' width='100%' height='100%' src=' '/>"},
   {title: '出苗情况',  html: "<iframe name ='tab2', id ='tab2',scripts=true,scrolling='auto' frameborder='0' width='100%' height='100%' src=' '/>"},
   {title: '苗床管理',  html: "<iframe name ='tab3', id ='tab3',scripts=true,scrolling='auto' frameborder='0' width='100%' height='100%' src=' '/>"},
   {title: '供苗管理',  html: "<iframe name ='tab4', id ='tab4',scripts=true,scrolling='auto' frameborder='0' width='100%' height='100%' src=' '/>"}
        ]
    });
 tab页中的html属性中定义一个iframe，其中name 是非常重要的（下文将提到）。
 growRecord.tabs.on('tabchange',function(tabOld, tab){
   growRecord.tabChanceF(tab);//此事件主要是实现url的构造（动态改变Url）
  });
 
 最关键的方法就是growRecord.tabChanceF了：
   //url的制定
     Url0 = "tpGrowPoints.do?method=getTpGrowPointAndBigCanopy";//基本信息
     Url1 = "tpGrowPoints.do?method=getTpFeedingBZ";//播种
     Url2 = "ynPlantTasks.do?method=growTask";//出苗情况
     Url3 = "ynPlantTasks.do?method=growTask";//苗床管理
     Url4 = "ynPlantTasks.do?method=growTask";//供苗管理
   growRecord.tabChanceF = function(tab){
    //参数的动态变化
 growRecord.urlP = '&grow_point_id='+growRecord.growId + '&grow_point_cd='+growRecord.growCd + '&business_year='+growRecord.bussinessYear+'&is_time_out='+ growRecord.isTimeOut+'&is_archiving='+growRecord.isArchiving+'&user_name='+growRecord.userName+'&user_uuid='+growRecord.userId+'&plan_begin_date='+growRecord.plantBeginDate+'&plan_begin_date='+growRecord.plantEndDate+'&login_org_cd='+growRecord.orgCd+'&remark1='+growRecord.remark1+'&remark2='+growRecord.remark2+'&remark3='+growRecord.remark3+'&remark4='+growRecord.remark4;
 if(growRecord.growId != null){
  switch(tab.title){
  case '基本信息':
   formU = Ext.getDom('tabD');//获取定义的form
   formU.reset();
   formU.action = "<c:url value='" + Url0 + growRecord.urlP +"'/>"; //指定url
   formU.target = 'tab0'; //将target指定为iframe的name属性值（如果指定为id的值，ie浏览器将没有效果），实现提交返回的jsp放置在iframe中（关键）
   formU.submit();//提交
            break ;
  case '播种':
   formU = Ext.getDom('tabD');
   formU.reset();
   formU.action = "<c:url value='" + Url1 + growRecord.urlP +"'/>";
   formU.target = 'tab1';
   formU.submit();
            break ;
  case '出苗情况':
    formU = Ext.getDom('tabD');
    formU.reset();
    formU.action = "<c:url value='" + Url2 + growRecord.urlP +"'/>";
    formU.target = 'tab2';
    formU.submit();
             break ;
  case '苗床管理':
   formU = Ext.getDom('tabD');
   formU.reset();
   formU.action = "<c:url value='" + Url3 + growRecord.urlP +"'/>";
   formU.target = 'tab3';
   formU.submit();
             break ;
  case '供苗管理':
   formU = Ext.getDom('tabD');
   formU.reset();
   formU.action = "<c:url value='" + Url4 + growRecord.urlP +"'/>";
   formU.target = 'tab4';
   formU.submit();
            break ;
           }
     }
} 
 

评论

1 楼 luosb 2011-12-01  

经过测试，发现这样提交url还是会出现过长的问题。带参数的url直接赋值给action，url就已经过长了。
最终的解决办法 还是在form表单中添加<input type="hidden" name ="XX">的东西来存参数。