日期:2014-05-16  浏览次数:20413 次

通过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