前几天看到iteye上,有人需要实现“把菜单中的项拖到TAB页就多一个TAB的功能”,就闲时写个简单实现。
先上效果图:
图1
图2
<script type="text/javascript">
Ext.onReady(function(){
//主要思路是用Ext.dd实现,定义一个TreePanel开启enableDrag允许拖动
var treePanel = new Ext.tree.TreePanel({
enableDrag : true,
ddGroup : 'dd',
region:'west',
title:'菜单',
root : new Ext.tree.AsyncTreeNode({
id : 'root',
text:'系统管理',
expanded : true,
children:[
{id:'c1',text:'用户管理',leaf:true},
{id:'c2',text:'账户管理',leaf:true},
{id:'c3',text:'日志管理',leaf:true}
]
}),
width : 150,
height:200
});
//
var tabPanel = new Ext.TabPanel({
region:'center',
activeTab : 0,
width:500,
height:200,
items:[
{title:'我的首页',html:'My HomePage'}
]
});
new Ext.Viewport({
layout:'border',
items:[treePanel,tabPanel]
});
//保证拖放到tabPanel容器中
var ddTargetEl = tabPanel.body.dom;
//以ddTargetEl,新建DropTarget,ddGroup同TreePanel的保存一致,
//以保证TreePanel中的拖放节点能够放到容器中
var tabPanelDropTarget = new Ext.dd.DropTarget(ddTargetEl, {
ddGroup : 'dd',
//notifyOver : 当拖动节点经过目标容器时触发执行
notifyOver : function(ddSource, e, data){
//如果被拖动节点不是叶子节点,则经过容器时,该被拖动元素样式指定为不允许 见图2所示
//通过使用样式[dropNotAlowed,dropAllowed]给用户很直观的感受:哪些拖动节点可以允许拖动
if(!data.node.isLeaf())
return this.dropNotAllowed;
return this.dropAllowed;
},
//notifyDrop : 当在目标容器,释放拖动元素时触发执行
//如果return false;表示当前拖动不可行;反之,可行
notifyDrop : function(ddSource, e, data){
//如果被拖动节点不是叶子节点,则拖动不可行,返回false
if(!data.node.isLeaf()) return false;
//判断检查targetPanel目标组件中是否存在相同id的tab
//如果有,则setActiveTab显示该tab
//否则新增tab,并显示
var n = this.targetPanel.getComponent(data.node.id);
var c = {
'id':data.node.id,
'title':data.node.text,
'html':'Welcome to '+data.node.text,
closable:true
};
if(n){
this.targetPanel.setActiveTab(data.node.id);
}else{
n = this.targetPanel.add(c);
n.show().doLayout();
}
return(true);
}
});
//新建属性targetPanel用于指代目标TabPanel
Ext.apply(tabPanelDropTarget,{targetPanel : tabPanel});
});
</script>
分享到:
相关推荐
var tabPanel = Ext.getCmp('myTabPanel'); // 获取tabpanel实例 var desiredTab = Ext.getCmp('myDesiredTab'); // 获取目标选项卡实例 tabPanel.setActiveTab(desiredTab); // 激活目标选项卡 ``` 在这个例子中,...
在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...
在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...
Ext 的 TabPanel 提供了美观的样式和易于操作的API,使得在Web应用中实现这样的功能变得简单。 在 Tapestry 4.02 中封装 Ext 的 TabPanel,意味着开发者可以利用 Tapestry 的强类型、事件驱动和组件模型,结合 Ext ...
3. **实现方式**: 要实现`Ext.TabPanel`的拖放功能,开发者通常需要集成EXT JS的拖放插件,如`Ext.dd.DD`或`Ext.dd.DDProxy`。这些插件提供必要的事件监听和处理,以响应用户的拖放操作。同时,可能还需要自定义事件...
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...
在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...
除了关闭当前标签页之外,有时还需要实现关闭其他所有标签页的功能,这可以通过遍历`TabPanel`的所有子项并逐一判断是否为当前激活的标签页来实现: ```javascript onCloseOthers: function() { // 获取当前激活的...
TabPanel的使用,添加tab,加载页面,添加事件
var tabPanel = Ext.create('Ext.tab.Panel', { width: 600, height: 300, items: [ { title: 'Value Table', layout: 'fit', items: Ext.create('MyApp.view.MyGrid') } ] }).render(Ext.getBody()); })...
在实现"可拖动tab标签"的功能时,开发者首先需要对TabPanel进行配置,启用拖放功能,并指定拖放行为。这可以通过在TabPanel的配置项中设置`draggableTabs: true`来完成。接着,需要为每个Tab实例化DD对象,并定义...
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序...开发者可以使用CSS样式表或Extjs的JavaScript API来实现这一功能,从而提高应用程序的可用性和美观性。
竖向标签TabPanel-------------------------------------------------
ExtJs是一个基于JavaScript的框架,用于构建前端交互式的Web应用程序。...学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法,可以帮助我们更好地设计和实现富有交互性和视觉吸引力的Web应用程序界面。
然而,仅仅阻止`beforeremove`事件并不足以实现关闭确认对话框,因为TabPanel的Panel还有一个`beforeclose`事件,这是在Panel的关闭操作开始之前触发的。通常,我们会在`beforeclose`事件中弹出确认对话框,并根据...
总结起来,"ext tab"这个主题涉及EXT JS库中的TabPanel组件,可能涵盖如何使用EXT JS创建选项卡式界面,源码分析,以及如何结合后端工具(如`vmcontrol.jsp`)来实现一个功能完整的Web应用。如果你想要深入了解EXT ...
在本文中,我们将深入探讨如何使用Ext.TabPanel创建和管理选项卡,包括基本的使用方法、内容引入方式以及如何实现选项卡的嵌套。 1. **引入Ext库** 在使用Ext.TabPanel之前,首先需要引入ExtJS库。这通常通过引入`...