先上图片:
实现的效果是:每个tab页存放的是一个jsp页面,并且根据要求,实现重新加载tab页中的jsp页面。
步骤一:
定义一个form表单(定义form的目的主要是为了实现post提交,为什么要使用post提交,我想大家都知道):
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: ""},
{title: '播种', html: ""},
{title: '出苗情况', html: ""},
{title: '苗床管理', html: ""},
{title: '供苗管理', html: ""}
]
});
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 = "
formU.target = 'tab0'; //将target指定为iframe的name属性值(如果指定为id的值,ie浏览器将没有效果),实现提交返回的jsp放置在iframe中(关键)
formU.submit();//提交
break ;
case '播种':
formU = Ext.getDom('tabD');
formU.reset();
formU.action = "
formU.target = 'tab1';
formU.submit();
break ;
case '出苗情况':
formU = Ext.getDom('tabD');
formU.reset();
formU.action = "
formU.target = 'tab2';
formU.submit();
break ;
case '苗床管理':
formU = Ext.getDom('tabD');
formU.reset();
formU.action = "
formU.target = 'tab3';
formU.submit();
break ;
case '供苗管理':
formU = Ext.getDom('tabD');
formU.reset();
formU.action = "
formU.target = 'tab4';
formU.submit();
break ;
}
}
}