`
gaochun556
  • 浏览: 1164 次
  • 性别: Icon_minigender_2
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

为什么那个总是有两个 tabpanel了、、

阅读更多
   
      
  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 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    ExtJS TabPanel 标签操作

    在上述代码中,我们创建了一个全屏的TabPanel,并添加了两个初始的标签页。 接下来,我们讨论如何动态添加和删除标签页。添加新的标签页可以通过`add()`方法实现,如下所示: ```javascript var newTab = { title...

    ExtJS tabPanel实例

    这两个文件可能是主入口文件或临时脚本,它们可能包含了初始化 `tabPanel`、处理数据交互或其他辅助功能的代码。例如,`index.js` 可能负责整个页面的布局和组件的实例化,而 `temp.js` 可能包含一些通用的函数或者...

    ExtJS扩展:垂直页签tabPanel

    首先,我们看到有两个JavaScript文件,TabPanel.js和TabPanel2.js。TabPanel.js可能是基础的TabPanel类,而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中,扩展通常用于添加新功能或改变现有组件的行为。...

    TabPanel

    在大多数编程框架中,`TabPanel`由两个主要部分组成:一个容器(通常是一个面板)和一组选项卡。容器用来承载各个选项卡内容,而每个选项卡则代表一个独立的视图或子面板。当用户点击一个选项卡时,对应的视图将被...

    tabpanel中添加portal

    总的来说,`tabpanel`和`portal`是前端开发中的两个关键工具,它们帮助开发者构建更加高效、灵活的用户界面。理解并熟练运用这两个概念,对于提升用户体验和优化应用程序性能至关重要。如果你想要进一步了解或实践...

    Ext中的tabpanel关闭后再打开不显示的问题

    在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新打开该标签页,则可能会出现无法正常显示的情况...

    ExtJS TabPanel beforeremove beforeclose使用说明

    这个事件提供了两个参数:`ct`(Container,即TabPanel本身)和`component`(即将被移除的Panel)。通过返回`false`,我们可以阻止默认的移除行为,这样就可以在用户确认关闭前进行必要的操作。 例如,在上述代码中...

    ExtJS-3.4.0系列:Ext.TabPanel

    接着,我们向`TabPanel`添加了两个面板(`items`): ```javascript tabs.add({ title: '标题 1', html: '内容 1' }); tabs.add({ id: Ext.id(), title: '标题 2', html: '内容 2', closable: true }); ``` ...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在本文中,我们将深入探讨ExtJS库中的两个关键组件——TreePanel和TabPanel,并了解如何将它们有效地结合在一起,以实现更丰富的用户界面。ExtJS是一个强大的JavaScript框架,用于构建富客户端应用程序,提供了多种...

    extjs4.x tabpanel 动态加载panel和html例子

    首先,我们需要创建一个tabpanel实例,并配置其属性,如`activeTab`(默认激活的标签页)和`layout`(布局方式,通常为`card`)。 ```javascript Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // ...

    uitabpanel:TabPanel for MATLAB 的完整实现-matlab开发

    这是用于 MATLAB 的 TabPanel 的完整实现,它为内置的 MATLAB UI 对象提供了一致的外观和感觉。 实现了两种类型的标签面板。 第一种类型是通常的标签面板,标签位于相对于可见面板的左侧/中间/右侧顶部/底部。 第二...

    用jQuery打造TabPanel效果代码

    - **初始化**: 在jQuery插件内部定义了一个`tabpanel`方法,该方法接受一个配置对象作为参数。 - **HTML结构动态生成**: 根据传入的配置对象动态生成选项卡和内容区域。 - **绑定事件**: 为每个选项卡绑定点击事件,...

    ext3.0 treeandtabPanel

    在EXTJS 3.0框架中,`tree`和`...通过灵活运用这两个组件及其联动机制,可以极大地提升用户体验。在文件名为`ext3.0TreeAndTabPanel`的压缩包中,可能包含了实现这一功能的示例代码和资源,可以作为学习和参考的素材。

    sencha touch 例子 Tabs 和 Toolbars 使用

    在这个例子中,我们创建了一个全屏的TabPanel,并添加了两个Tab,分别带有'首页'和'关于'的标题。 接下来是工具栏(Toolbars)。在Sencha Touch中,工具栏是显示在屏幕顶部或底部的一行操作按钮,用于提供快捷功能...

    ExtTabPanel文档tab嵌套tab.pdf

    这意味着你可以在一个TabPanel的`items`配置中直接创建另一个TabPanel。这种嵌套可以实现多层级的标签页结构,为用户提供更丰富的交互体验。例如,你可以创建一个主TabPanel,然后在其中一个标签页中添加一个新的...

    课程ExtTabPanel文档tab嵌套tab.pdf

    这通常通过引入`ext-base.js`和`ext-all.js`文件来完成,这两个文件分别包含了Ext的基础功能和所有组件。同时,为了样式美观,还需要引入`ext-all.css`文件来设置样式。确保引用路径正确,以便JavaScript能够找到...

    MATLAB例子-TabPannel.rar

    这段代码会在当前图形窗口中创建一个TabPanel,包含两个选项卡,分别名为"Tab 1"和"Tab 2"。 4. **回调函数与数据交互** 在MATLAB GUI中,你可以为每个选项卡设置回调函数,当用户点击选项卡时,对应的函数会被...

    点击添加标签

    在这个场景中,`TreePanel` 和 `TabPanel` 是两个关键的组件。 `TreePanel` 是EXT JS中的一个树形视图组件,它能够展示层次结构的数据,通常用于文件系统、组织结构或者导航菜单等。用户可以通过点击`TreePanel`中...

Global site tag (gtag.js) - Google Analytics