200分请教 Ext js TabPanel的问题

[hecaiyun2003]

在一个TabPanel上有“基本”“业务”“检索”三个页签。
点击“检索”页签，进行相关操作之后；
再点击“基本”页签，更新“基本”页面的“公司基本情况”和“基本情况”，
此时“检索”和“业务”也被重新加载了。

原因：更新“基本”的内容时，重新加载了TabPanel。

问题：如何在只更新“基本”页签中的内容时，“检索”的内容不改变呢？

我的解决方案：
1）TabPanel.getItem(tabId).getUpdater().update(url);用TabPanel的getUpdater方法更新它的子页签即“基本”，但是因为子页签中还包含两个Panel，因此没有办法得到它的URL.此方法不行
2）给“基本”页签加上了一个监听，当“基本”页签被选中之后，更新其内容，但是也不行。
我用上边两种方法没有没有解决这个问题。
各位大侠，高人们有什么好的建议，思路或者方法。
若问题解决了，追加100分。


以下是相关代码：

//基本信息
var topBase=new Ext.Panel({
			height : 330,
 			title : "<center><b>公司基本情况</b></center>",
 			html:" <iframe id='dows' src='/common/showtop.jsp'></iframe>", 
		});
		
var bottomBase=new Ext.Panel({
			height : 330,
 			title : "<center><b>基本情况</b></center>",
 			html:" <iframe id='dos'src='/common/showbott.jsp'></iframe>", 
		});		
		

var myBus = new Ext.Panel({
	title : '<center><b>业务信息</b></center>',
	html:" <iframe id='text' src='/common/showbus.jsp'></iframe>",				
});		

//检    索
var search = new Ext.Panel({
	title : '<center><b>检    索</b></center>',
	html:"<iframe id='search' src='/gridareas/search.jsp'></iframe>", 
});	
			
//基本信息
var	baseInfo = new Ext.Panel({
		height : 530,
		items : [topBase,bottomBase]
});
//业务
var mybusInfo = new Ext.Panel({
		height : 530,
		items : [myBus]
});				
//搜索
var searchInfo = new Ext.Panel({
		height : 530,
		items : [search]
});				
	
//总页签
var tabs = new Ext.TabPanel({
			border : false,
			activeTab : 0,
			renderTo : 'SearchNav',
			frame : true,
			height : 580,
			deferredRender : false,
			layoutOnTabChange : true,
			items : [{
						items : baseInfo,
						title : '基本'
					},{
						items : mybusInfo,
						title : '业务'
					},{
						items : searchInfo,
						title : '检索
					}]
 });

[hoojo]

//总页签
var tabs = new Ext.TabPanel({
            border : false,
            activeTab : 0,
            renderTo : 'SearchNav',
            frame : true,
            height : 580,
            deferredRender : false,
            layoutOnTabChange : true,
            items : [{
                        items : baseInfo,//就是执行更新，添加一个id。更新这些组件即可
                        title : '基本'
                    },{
                        items : mybusInfo,
                        title : '业务'
                    },{
                        items : searchInfo,
                        title : '检索
                    }]
 });
你不要更新tabpanel，你更新tabpanel中的items的items就可以了

[wanghao198612]

layoutOnTabChange : true,//这个Config的意思是说当你的Tabtarget改变时，tabPanel执行doLayout()，会将所有的重新布局。你从这个地方着手看看。
另外，你要是做Extjs的开发的话建议你一切以页面的展示效率为重。
//基本信息
var baseInfo = new Ext.Panel({
title : '基本',
height : 530,
items : [topBase,bottomBase]
});
//业务
var mybusInfo = new Ext.Panel({
title : '业务',
height : 530,
items : [myBus]
});
//搜索
var searchInfo = new Ext.Panel({
title : '检索',
height : 530,
items : [search]
});

//总页签
var tabs = new Ext.TabPanel({
border : false,
activeTab : 0,
renderTo : 'SearchNav',
frame : true,
height : 580,
deferredRender : false,
layoutOnTabChange : true,
items : [ baseInfo, mybusInfo,searchInfo]
});
这样少一层Panel的嵌套，效率就会提高很多。

[asdujiayong]

[Quote=引用 3 楼 ibm_hoojo 的回复:]

CSS code

//总页签
var tabs = new Ext.TabPanel({
border : false,
activeTab : 0,
renderTo : 'SearchNav',
frame : true,
height : 580,
……
[/Quote]
这个不错.

[zoujp_xyz]

点击“检索”页签，进行相关操作之后；
再点击“基本”页签，更新“基本”页面的“公司基本情况”和“基本情况”，
此时“检索”和“业务” 也被重新加载了。

这段话没明白，每个tab页中都是一个iframe，每个tab内容的更新不会更新别的tab页内容吧

[ssh87]

	    var tabs = new Ext.TabPanel({
     	     renderTo: 'tabAccept',
     	    activeTab:0 ,
	            frame:true,
	         defaults:{autoHeight: true},
	        items:[
	            {contentEl:'acceptanceAccept', title: '受理',status:'0'},
	            {contentEl:'finishAccept', title:'处理',status:'1'},
	            {contentEl:'defeasanceAccept',title:'作废',status:'2'},
	            {contentEl:'allAccept',title:'全部',status:'-1'}
	        ],
	         listeners:{'tabchange':
	                             function(statu,tab)
	                             {
	                                // get status
	                                var stu=tab.status ;
	                                //disable  tbar button
	                               
	                                    store.load({params:{start:0,status:stu}});
	                                   
	                                }
	                                else if(stu==0)
	                                {
	                             
	                                    store.load();
	                                   
	                                }
	                                else if(stu==-1)
	                                {
	                                
					                   store.load({params:{start:0,status:stu,searchKey:searchKeyValue,startTime:startTimeAccept,endTime:endTimeAccept}});
					        
					  	 
	                                }
	       	                     }
	                   }    
    });

Manage code


public Page<AcceptRegistration> getPage(Page<AcceptRegistration> page, String searchKey,int status,Date startTime,Date endTime)
{
// System.out.println(status);
//mark ：状态为0，1，2时按status查询， 为全部是按时间和关键查询
if(status==0||status==1||status==2)
{
cri =Restrictions.eq(AcceptRegistration.Pro_Status,status);
}
else{
//如果时间为空则按关键字查询，否则按三者查询
if(startTime==null && endTime==null)
{
cri=Restrictions.like(AcceptRegistration.Pro_Content, searchKey,MatchMode.ANYWHERE) ;
}
else
{
cri = Restrictions.and(Restrictions.like(AcceptRegistration.Pro_Content, searchKey, MatchMode.ANYWHERE),
Restrictions.between(AcceptRegistration.Pro_ComplainDate, startTime,endTime)) ;
}
}
return acceptRegistrationDao.findPage(page,cri);
}

大概 就是这样，应该跟你要的差不多吧。

[tanzhoujavaeelover]

研究中，遇到了同样的问题，没人回答

[wylp_19]

推荐你学Coolite 封装好的ExtJS 和自带控件用法基本一样

[yxhshuaiman]

listeners: {
'tabchange': function(tb,newtab) {
if(newtab.id='menuinfo')
{
//重新加载 menufm 为iframe的id
document.getElementById('menufm').src=path +'/designer/menu_tree.jsp';
}
}
}

[gouxiongyaya]

   我们这个是这么做的，是因为tabpanel里嵌套太多tabpanel加载太慢
   所以刚开始没设iframe的src，当点击某个页签时再加载。
   items: [{
	            title: '资金链风险',
		    iconCls: 'icon-028',
	            layout: 'fit',
		    border: false,
		    html: '<iframe id="test01" name="test01" height="100%"                  
width="100%"  frameborder="0" src=""></iframe>'
        	},{
	            title: '存量资金风险',
		    iconCls: 'icon-029',
	            layout: 'fit',
				border: false,
				html: '<iframe id="test02" name="test02"    height="100%" width="100%"  frameborder="0" src=""></iframe>'
        	}


listeners: {
             tabchange: function (tab,panel) {
		var title = tab.getActiveTab().title;
		if(title == '资金链风险'){
		    document.getElementById('test01').src = ROOT_PATH+'/pages/monitorwarnning/fundchainwarning/warningdetail/cashflow/cashflow.jsp';
		}else if(title == '存量资金风险'){
		    document.getElementById('test02').src = ROOT_PATH+'/pages/monitorwarnning/fundchainwarning/warningdetail/depositfund/depositfund.jsp';			 
},