ext tabpanel问题 高分回报 - Web 开发 / Ajax
main.js
var addWinfunction addClick(){ if(!addWin) { addWin=new Ext.Window({ title:'tabPanel', width:500, height:400, closable:true, closeAction:'hide', /*listeners:{ 'hide':function(){alert("hide");} //隐藏windows时触发该事件 },*/ items:[tabPanle], buttons:[{ text:'关闭', handler:function(){addWin.hide()} }] }); } addWin.show(this);}var tabPanle=new Ext.TabPanel({ activeTab:0, width:480, height:330, layoutOnTabChange:true, items:[{ title:'tabPanel-Three', autoLoad:{ url:'panel_One.jsp', scripts:true } },{ title:'tabPanel-Three', autoLoad:{ url:'panel_Two.jsp' } }]});
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="<%=basePath%>extjs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="<%=basePath%>extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>extjs/ext-all.js"></script>
</head>
<body>
panel_Two <br>
</body>
</html>
tabpanel默认显示第一个选项卡，
内容能正确显示出来
但是单击第二个选项卡时就报错
内容也不能显示
高手帮忙。。。。。。。。。。。。。。。。
需求效果：
我要做的效果实际上就是通过tabpanel的选项卡显示不同的内容，内容都是另外的一个页面上的内容，
其他页面上可以有ext控件代码，也可以没有ext控件代码，
用ifarme实现也可以
谁要是有例子可以给发下啊
一定非常感谢
高分回报
[解决办法]
贴个 例子
Ext.onReady(function() {
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
// Needed if you want to handle history for multiple components in the same page.
// Should be something that won't be in component ids.
var tokenDelimiter = ':';
var tp = new Ext.TabPanel({
renderTo: Ext.getBody(),
id: 'main-tabs',
height: 300,
width: 600,
activeTab: 0,
items: [{
xtype: 'tabpanel',
title: 'Tab 1',
id: 'tab1',
activeTab: 0,
tabPosition: 'bottom',
items: [{
title: 'Sub-tab 1',
id: 'subtab1'
},{
title: 'Sub-tab 2',
id: 'subtab2'
},{
title: 'Sub-tab 3',
id: 'subtab3'
}],
listeners: {
'tabchange': function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},{
title: 'Tab 2',
id: 'tab2'
},{
title: 'Tab 3',
id: 'tab3'
},{
title: 'Tab 4',
id: 'tab4'
},{
title: 'Tab 5',
id: 'tab5'
}],
listeners: {
'tabchange': function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we're managing history for it also.
// We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
if(tab.id != 'tab1'){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});
// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on('change', function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];
tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// This is the initial default state. Necessary if you navigate starting from the
// page without any existing history token params and go back to the start state.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});
});
[解决办法]
没写过你那样的
嘿嘿
我也学习下..
我一般要实现你所说的效果都是
var testTab = new Ext.TabPanel({ id : 'testTab', layoutOnTabChange : true, frame : true, enableTabScroll : true }); testTab.add({ title : '测试表1', id : 'tab1', closable : false, border : true, layout : 'column', height : 280, items : [{}] }) testTab.add({ title : '测试表2', id : 'tab2', closable : false, border : true, layout : 'column', height : 280, items : [{}] })
[解决办法]
var tabPanle=new Ext.TabPanel({ activeTab:0, width:480, height:330, layoutOnTabChange:true, items:[{ xtype:'panel', title:'tabPanel-Three', html:'<iframe src=login.HTML width=100% height=100%></iframe>' },{ xtype:'panel', title:'tabPanel-Three', html:'<iframe src=test.HTML width=100% height=100%></iframe>' }]});
[解决办法]
用panel直接加载
var tabPanle=new Ext.TabPanel({ activeTab:0, width:480, height:330, layoutOnTabChange:true, items:[{ title : "第一页", closable : false, autoLoad : { url : 'page/page1.jsp', scope : this, scripts : true }},{ title : "第二页", closable : false, autoLoad : { url : 'page/page2.jsp', scope : this, scripts : true }}] });
[解决办法]
如果你是用ext的autoLoad加载 那么载入的页面中不可以再引用ext包， 如果是利用iframe加载，新页面中必须重新引入ext包