index = Ext.extend(Ext.Viewport,{
center : new Ext.TabPanel({
id : 'mainview',
region : 'center',
activeTab : 0,
width : 600,
height : 250,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
split : true,
layoutOnTabChange:true,
tabPosition : 'top',
resizeTabs:true,
defaults : {autoScroll:true},
plugins : new Ext.ux.TabCloseMenu(),
items :{
id : 'start-panel',
title : 'MainView',
iconCls : 'tabs',
layout : 'fit',
bodyStyle : 'padding:25px',
html : '<img src="../images/bg.jpg"/>'
}
}),
constructor : function(){
//var clock = new Ext.Toolbar.TextItem('');
index.superclass.constructor.call(this,{
layout : 'border',
items : [{
region : 'north',
xtype : 'panel',
height : 25,
layout : 'column',
border : false,
items : [{
columnWidth : 1,
border : false,
layout : 'fit',
items : [{
xtype : 'panel',
id : 'logo-header',
border : false,
tbar : [
{
text : currentUser
},{
text : new Date().format('Y年m月d日')
},'->',{
text:'注销'
,iconCls:'logout'
,handler:function(){
Ext.Msg.show({
title:'注销系统',
msg: '提示:注销系统前请注意保存数据,确定要注销吗?',
buttons: Ext.Msg.YESNO,
fn: function(btn){
if(btn=='yes'){
Ext.Ajax.request({
url : 'logout.action',
success : function() {
location = '../main/index.jsp';
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '退出系统失败!',
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});
}
});
}
}
});
}
}
]
}]
}]
},{
region : 'west',
xtype : 'panel',
layout : 'accordion',
title : '计划排产管理系统',
split : true,
minSize : 200,
maxSize : 250,
//margins : '2 0 5 5',
collapsible : true,
collapseMode:'mini',
width : 200,
layoutConfig : {
animate : true
},
listeners : {
'expand' :{
fn : this.onExpandPanel,
scope : this
},
'collapse' :{
fn : this.onCollapsePanel,
scope : this
}
},
items : [{
title : '导航栏',
iconCls : 'icon-nav',
xtype : 'treepanel',
autoScroll : true,
border : false,
id : 'treepanel',
tools : [{
id : 'refresh',
handler : this.onRefreshTreeNodes,
scope : this
},{
id:'expanded',
tooltip:'展开',
handler:function(){
Ext.getCmp('treepanel').expandAll();
}
}],
loader : new Ext.tree.JsonPluginTreeLoader({
url : 'findTree.action'
}),
root : new Ext.tree.AsyncTreeNode({text : '菜单', expanded:true}),
listeners : {
'click' : {
fn :this.onTreeNodeClick,
scope : this
},
'afterrender':{
fn : this.onExpandAll,
scope : this
}
}
}]
},this.center]
})
},
addTab : function(name,id,css,link){
var tabId = 'tab_'+id;
var tabTitle = name;
var tabLink = link;
var centerPanel = Ext.getCmp('mainview');
var tab =centerPanel.getComponent(tabId);
var subMainId = 'tab_'+id+'_main';
if(!tab){
var newTab = centerPanel.add(new Ext.Panel({
id : tabId,
title : tabTitle,
iconCls : 'tabs',
border : false,
closable : true,
layout : 'fit',
listeners : {
activate : this.onActiveTabSize,
scope : this
}
}));
centerPanel.setActiveTab(newTab);
newTab.load({
url : tabLink,
method : 'post',
params : {
subMainId : subMainId
},
scope : this,
discardUrl : true,
nocache : true, // 不缓存
text : '加载中,请稍候...',
timeout : 3000,
scripts : true
});
}else{
centerPanel.setActiveTab(tab);
}
},
onActiveTabSize : function(){
var w = Ext.getCmp('mainview').getActiveTab().getInnerWidth();
var h = Ext.getCmp('mainview').getActiveTab().getInnerHeight();
var Atab = Ext.getCmp('mainview').getActiveTab().id;
var submain = Ext.getCmp(Atab+'_main');
if(submain){
submain.setWidth(w);
submain.setHeight(h);
}
},
onRefreshTreeNodes : function(){
Ext.getCmp('treepanel').root.reload();
},
onTreeNodeClick : function(_node,_e){
if(_node.isLeaf()){
var _nodeText = _node.attributes.text;
var _nodeLink = _node.attributes.url;
var _nodeId = _node.attributes.id;
this.addTab(_nodeText,_nodeId,'_css',_nodeLink)
}
},
onExpandPanel : function(_nowCmp){
this.onActiveTabSize();
},
onCollapsePanel : function(_nowCmp){
this.onActiveTabSize();
},
onExpandAll : function(){
Ext.getCmp('treepanel').expandAll();
}
})
- 大小: 45.1 KB
分享到：
相关推荐
通过以上步骤，我们能够实现EXTJS 4.x中tabpanel的动态加载功能。这不仅可以提高应用性能，还能使用户界面更加灵活，适应不同的场景需求。记得在实际项目中根据具体需求调整和优化代码，以获得最佳效果。
接下来，我们讨论如何动态添加和删除标签页。添加新的标签页可以通过`add()`方法实现，如下所示： ```javascript var newTab = { title: '新标签', html: '这是新添加的标签页内容' }; tabpanel.add(newTab).show...
如果标签页本身并没有定义`loader`对象，则可以通过动态创建的方式为其添加一个`TreeLoader`实例，以实现数据的加载和刷新。 #### 关闭当前标签页 关闭当前标签页是`TabPanel`常见的需求之一，可以通过如下方式...
你可以通过 `add()` 方法动态添加新的标签页，或者使用 `remove()` 方法移除已存在的标签页。例如： ```javascript // 添加新标签页 tabPanel.add({ title: '角色管理', // 可能对应于roleManager.js中的内容 })...
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架，用于构建丰富互联网应用程序（RIA）。其中，tabpanel是Extjs中一个常用的控件，用于显示多个面板。设置tabpanel当前活动页签的样式是...
在ExtJS中，TabPanel是常用的组件，用于展示多个面板（Panel）并提供标签页切换功能。当用户尝试关闭TabPanel中的某个Panel时，我们可能需要执行一些验证或确认操作，例如弹出对话框询问用户是否真的要关闭当前页面...
### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中，为了提高用户体验并使数据呈现更加直观易懂，开发者常常需要根据数据的不同状态来调整UI元素的样式。例如，在使用...
此外，Tab Panel还支持动态添加和移除Tab，这对于动态内容加载或用户交互场景非常有用。你可以使用`add`方法添加新的Tab，`remove`方法移除已有的Tab。 源码分析可能是博客文章的重点，它可能涵盖了ExtJS Tab Panel...
在ExtJs中，我们可以使用`viewConfig`配置项中的`selType`来定义选择模型，通常是'checkboxmodel'，以便在每行前添加复选框。然后通过`selModel`配置项设置双击时选中复选框的行为。同时，我们可以监听`itemdblclick...
代码如下: var tabIndex = ‘shouye’;... /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param node : 传入的Node节点 */ var loadPanel = function(node) { var
在Ext中，可以通过`addPanel`方法向`TabPanel`中添加面板，如示例代码所示： ```javascript var payCaseTabs = new Ext.TabPanel({ // ... items: [{ title: 'Tab3', id: 'activeTest', contentEl: 'test', ...
Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单（及其验证方法），数据组件： store，model等，讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。
创建TabPanel的基本步骤包括创建一个新的Ext.container.TabPanel实例，然后添加多个Ext.panel.Panel子组件，每个子组件代表一个标签页。例如： ```javascript var tabPanel = Ext.create('Ext.tab.Panel', { ...
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
这在动态调整 Panel 大小或添加/删除子组件后尤为有用。 - 示例代码： ```javascript var panel = new Ext.Panel(); panel.add(new Ext.Button({ text: '按钮' })); panel.layout.layout(); // 强制重新布局 ...
此外，例子中还展示了如何创建和添加TreeNode到TreePanel，虽然这部分内容并非直接与TabPanel布局相关，但它是ExtJS中构建树形结构数据的常见操作。 总的来说，这个例子演示了如何使用ExtJS创建一个复杂的多区域...
4. **动态添加和删除标签**：TabPanel支持在运行时动态添加或移除标签页，这对于构建可扩展的应用非常有用。 5. **自定义Tab样式**：EXTJS允许通过CSS样式对Tab进行定制，包括字体、颜色、背景等，以满足不同的设计...