sencha extjs4.1 ext.tab.panel activetab
Posted
技术标签:
【中文标题】sencha extjs4.1 ext.tab.panel activetab【英文标题】： 【发布时间】：2015-07-17 14:44:50 【问题描述】：如何在 tab.panel 中将 setactivetab 用于网格？ 我需要我的加载按钮/网格留在它激活的选项卡面板中。 当我单击第二个选项卡中的按钮时，我希望设置第二个选项卡。相反，它返回到第一个选项卡。下面是我的基本代码，因为我去掉了使用 setactivetab 的尝试：
<script type="text/javascript">
//begin menu bar
Ext.define('MainNavBar.view.ui.MainNavPanel',
extend: 'Ext.tab.Panel',
height: 170,
width: 1000,
activeTab: 0,
initComponent: function()
var me = this;
me.items = [
xtype: 'panel',
height: 145,
width: 684,
title: 'Bus Data',
dockedItems: [
xtype: 'toolbar',
height: 145,
width: 938,
dock: 'top',
items: [
xtype: 'buttongroup',
height: 140,
title: 'Bid',
columns: 2,
layout:
columns: 2,
type: 'table'
,
items: [
xtype: 'button',
text: 'Bid Doc',
handler: function()window.location = '/biddoc/';
,
]
,
]
]
,
xtype: 'panel',
height: 115,
title: 'Reporting',
dockedItems: [
xtype: 'toolbar',
height: 140,
dock: 'top',
items: [
xtype: 'buttongroup',
height: 140,
title: 'Sales Data',
columns: 2,
layout:
columns: 2,
type: 'table'
,
items: [
xtype: 'button',
text: 'Batch',
handler: function()window.location = '/salesdatabatch/';
]
]
]
,
];
me.callParent(arguments);
);
Ext.define('MainNavBar.view.MainNavPanel',
extend: 'MainNavBar.view.ui.MainNavPanel',
initComponent: function()
var me = this;
me.callParent(arguments);
);
Ext.Loader.setConfig(
enabled: true
);
Ext.application(
name: 'MainNavBar',
launch: function()
Ext.QuickTips.init();
var cmp1 = Ext.create('MainNavBar.view.MainNavPanel',
renderTo: menu
);
cmp1.show();
);
//end menu bar
</script>
【问题讨论】：
你打算用代码来做这个吗：handler: function()window.location = '/biddoc/'; ? 尝试为您的MainNavBar.view.ui.MainNavPanel 添加 xtype: mainNavPanel。使用处理函数执行以下操作： this.up('mainNavPanel).setActiveTab(0 or 1); 用于适当的索引
好的，所以我在第 3 行将 xtype: mainNavPanel 添加到 MainNavBar.view.ui.MainNavPanel，如下所示： Ext.define('MainNavBar.view.ui.MainNavPanel', xtype: mainNavPanel, Now处理程序，我如何添加 this.up('mainNavPanel).setActiveTab(0 or 1); 到处理程序： function()window.location = '/biddoc/'; ？
一些好消息。我能够使用您的建议从“biddoc”按钮触发“报告”标签。但在“报告”选项卡（第二个选项卡）闪烁后，页面会返回到选项卡 0。我用于触发器的代码是这样的： handler: function()window.location = '/biddoc/';this.up('mainNavPanel').setActiveTab(1);
所以 setActiveTab(1) 似乎工作了一秒钟，然后返回到默认选项卡 (0)。有什么想法吗？
【参考方案1】：
让我们编译我们在这里讨论的所有内容并做出正确的答案。
@Lorenz Meyer 的观点很好。你有架构问题，你可以通过Ext.Ajax.request(/** code here **/); 来解决这个问题。所以没有重定向。
如果您需要如何做到这一点的好例子，请参考：Extjs - Servlets
但是你没有问架构问题所以这是我的答案。
所以经过一番思考，我只是对您的代码进行了一些更正。请看一下，如果您喜欢它，请将其标记为已回答：
Ext.define('MainNavBar.view.ui.MainNavPanel',
extend: 'Ext.tab.Panel',
height: 170,
width: 1000,
activeTab: 0,
initComponent: function()
var me = this;
me.items = [
xtype: 'panel',
height: 145,
width: 684,
title: 'Bus Data',
dockedItems: [
xtype: 'toolbar',
height: 145,
width: 938,
dock: 'top',
items: [
xtype: 'buttongroup',
height: 140,
title: 'Bid',
columns: 2,
layout:
columns: 2,
type: 'table'
,
items: [
xtype: 'button',
text: 'Bid Doc',
handler: function()window.location = '/biddoc/';
,
]
,
]
]
,
xtype: 'panel',
height: 115,
title: 'Reporting',
dockedItems: [
xtype: 'toolbar',
height: 140,
dock: 'top',
items: [
xtype: 'buttongroup',
height: 140,
title: 'Sales Data',
columns: 2,
layout:
columns: 2,
type: 'table'
,
items: [
xtype: 'button',
text: 'Batch',
handler: function()window.location = '/salesdatabatch/';
]
]
]
],
listeners:
afterrender: function(component, eOpts)
var urlInfo = document.location.href;
if(urlInfo.contains('salesdatabatch'))
component.setActiveTab(1);
if(urlInfo.contains('biddoc'))
component.setActiveTab(0);
,
me.callParent(arguments);
);
【讨论】：
以上是关于sencha extjs4.1 ext.tab.panel activetab的主要内容，如果未能解决你的问题，请参考以下文章
Sencha CMD 构建过程应用于现有的 ExtJs 4.1 应用程序