Ext.onReady(function(){
var panel;
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:60
},{
region:'west',
id:'west',
title:'',
split:true,
width: 150,
minSize: 175,
maxSize: 400,
collapsible: false,
margins:'0 0 0 2',
layout:'accordion',
layoutConfig:{
animate:true
},
items:westItems
},{
region:'center',
title:'',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: false,
margins:'0 0 0 2',
layout:'accordion',
layoutConfig:{
animate:true
},
items:tabPanel
} ]
})
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.get("center"),
layout:'table',
layoutConfig: {columns:2},
defaults: {frame:true, width:395, height: 300}
});
});
var tabPanel=new Ext.TabPanel({
id:"tabPanel",
region:'center',
deferredRender:false,
iconCls: 'tabs',
items:[{
contentEl:'center',
autoScroll:true
}]
});
function onClickMenuItem(el){
updateTab(el.id,el.innerHTML,el.href);
}
function addTab(id,tabTitle, targetUrl){
tabPanel.add({
id:id,
title: tabTitle,
iconCls: 'tabs',
autoLoad: {url: "tabFrame.jsp?url="+targetUrl},
closable:true
}).show();
}
function updateTab(id,title, url) {
var tab = tabPanel.getItem(id);
if(tab){
tabPanel.remove(tab);
}
tab = addTab(id,title,url);
tabPanel.setActiveTab(tab);
}
分享到:
相关推荐
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
在上述代码中,我们创建了一个全屏的TabPanel,并添加了两个初始的标签页。 接下来,我们讨论如何动态添加和删除标签页。添加新的标签页可以通过`add()`方法实现,如下所示: ```javascript var newTab = { title...
这两个文件可能是主入口文件或临时脚本,它们可能包含了初始化 `tabPanel`、处理数据交互或其他辅助功能的代码。例如,`index.js` 可能负责整个页面的布局和组件的实例化,而 `temp.js` 可能包含一些通用的函数或者...
首先,我们看到有两个JavaScript文件,TabPanel.js和TabPanel2.js。TabPanel.js可能是基础的TabPanel类,而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中,扩展通常用于添加新功能或改变现有组件的行为。...
在大多数编程框架中,`TabPanel`由两个主要部分组成:一个容器(通常是一个面板)和一组选项卡。容器用来承载各个选项卡内容,而每个选项卡则代表一个独立的视图或子面板。当用户点击一个选项卡时,对应的视图将被...
总的来说,`tabpanel`和`portal`是前端开发中的两个关键工具,它们帮助开发者构建更加高效、灵活的用户界面。理解并熟练运用这两个概念,对于提升用户体验和优化应用程序性能至关重要。如果你想要进一步了解或实践...
在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...
这个事件提供了两个参数:`ct`(Container,即TabPanel本身)和`component`(即将被移除的Panel)。通过返回`false`,我们可以阻止默认的移除行为,这样就可以在用户确认关闭前进行必要的操作。 例如,在上述代码中...
接着,我们向`TabPanel`添加了两个面板(`items`): ```javascript tabs.add({ title: '标题 1', html: '内容 1' }); tabs.add({ id: Ext.id(), title: '标题 2', html: '内容 2', closable: true }); ``` ...
在本文中,我们将深入探讨ExtJS库中的两个关键组件——TreePanel和TabPanel,并了解如何将它们有效地结合在一起,以实现更丰富的用户界面。ExtJS是一个强大的JavaScript框架,用于构建富客户端应用程序,提供了多种...
首先,我们需要创建一个tabpanel实例,并配置其属性,如`activeTab`(默认激活的标签页)和`layout`(布局方式,通常为`card`)。 ```javascript Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // ...
这是用于 MATLAB 的 TabPanel 的完整实现,它为内置的 MATLAB UI 对象提供了一致的外观和感觉。 实现了两种类型的标签面板。 第一种类型是通常的标签面板,标签位于相对于可见面板的左侧/中间/右侧顶部/底部。 第二...
- **初始化**: 在jQuery插件内部定义了一个`tabpanel`方法,该方法接受一个配置对象作为参数。 - **HTML结构动态生成**: 根据传入的配置对象动态生成选项卡和内容区域。 - **绑定事件**: 为每个选项卡绑定点击事件,...
在EXTJS 3.0框架中,`tree`和`...通过灵活运用这两个组件及其联动机制,可以极大地提升用户体验。在文件名为`ext3.0TreeAndTabPanel`的压缩包中,可能包含了实现这一功能的示例代码和资源,可以作为学习和参考的素材。
在这个例子中,我们创建了一个全屏的TabPanel,并添加了两个Tab,分别带有'首页'和'关于'的标题。 接下来是工具栏(Toolbars)。在Sencha Touch中,工具栏是显示在屏幕顶部或底部的一行操作按钮,用于提供快捷功能...
这意味着你可以在一个TabPanel的`items`配置中直接创建另一个TabPanel。这种嵌套可以实现多层级的标签页结构,为用户提供更丰富的交互体验。例如,你可以创建一个主TabPanel,然后在其中一个标签页中添加一个新的...
这通常通过引入`ext-base.js`和`ext-all.js`文件来完成,这两个文件分别包含了Ext的基础功能和所有组件。同时,为了样式美观,还需要引入`ext-all.css`文件来设置样式。确保引用路径正确,以便JavaScript能够找到...
这段代码会在当前图形窗口中创建一个TabPanel,包含两个选项卡,分别名为"Tab 1"和"Tab 2"。 4. **回调函数与数据交互** 在MATLAB GUI中,你可以为每个选项卡设置回调函数,当用户点击选项卡时,对应的函数会被...
在这个场景中,`TreePanel` 和 `TabPanel` 是两个关键的组件。 `TreePanel` 是EXT JS中的一个树形视图组件,它能够展示层次结构的数据,通常用于文件系统、组织结构或者导航菜单等。用户可以通过点击`TreePanel`中...