`

TabPanel 设置标签页布局 setLayout BorderLayout Container

    博客分类:
  • ext
阅读更多
ext版本 3.4

往TabPanel中加入新panel,设置新加入panel的布局,通过获取panel的container,设置layout来实现,经测试发现panel的container属性对象没有setlayout方法,而panel自身有该方法。难道panel本身就是一个container!

panel.ownerCt 获取的是tabPanel的container
panel.refOwner 也不是


大体实现代码:
var tabpanel = new Ext.TabPanel();

var newpanel = new Ext.Panel();
tabpanel.add(newpanel);

var borderly = new Ext.layout.BorderLayout();
newpanel.setLayout(borderly);


newpanel.add(tree);//添加一个树组件
newpanel.add(grid);//添加一个表格组件

newpanel.doLayout();

分享到:
评论

相关推荐

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    ExtJS TabPanel 标签操作

    ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...

    extjs4.2.1 tabPanel刷新及关闭标签

    除了关闭当前标签页之外,有时还需要实现关闭其他所有标签页的功能,这可以通过遍历`TabPanel`的所有子项并逐一判断是否为当前激活的标签页来实现: ```javascript onCloseOthers: function() { // 获取当前激活的...

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip 刚才看到有会员朋友说matlab中控件少,math说ActiveX中多的是啊,于是我也就顺便打开ActiveX看看里面都有什么。突然看到个单词tabbed……难道这就是困扰我多日的...

    treepanel 和 tabpanel 完整

    `TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者结合可以提供一个既具有导航性又具有内容分组的高效布局。 `TreePanel`是Ext JS中的一个控件,它用于展示树形结构的数据。这种数据...

    TabPanel布局

    在ExtJS框架中,TabPanel布局是一种常用的组件布局方式,常用于创建带有多个标签页的应用界面,每个标签页可以承载不同的内容。在这个例子中,开发者使用了Ext3.0版本来构建一个包含多个区域(north, south, east, ...

    ExtJS tabPanel实例

    在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...

    Ext中TabPanel的动态页面加载

    首先,我们需要设置`TabPanel`的`activeTab`属性来指定默认显示的标签页。同时,我们可以设置`tabConfig`属性,为每个`Tab`提供配置,其中`lazy`属性设置为`true`表示该`Tab`的内容会在首次激活时加载。例如: ```...

    TabPanel 加载页面

    4. **模板和数据绑定**:在Web开发中,`TabPanel`的每个标签页可能由模板定义,而模板与数据模型进行绑定。例如,使用Angular或Vue.js时,可以通过数据绑定将JSON对象映射到视图。 5. **源码解析**:在标签中提到了...

    ext的tabpanel的激活与注意事项

    在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且直观的多面板应用。本篇文章将深入探讨EXTJS中tabpanel的激活操作及其注意事项。 首先,我们来看tabpanel的激活操作。在EXTJS...

    [html5技术]基于bootstrap制作的多标签页(tabs)

    2. **创建Nav组件**:接下来,我们需要创建一个`<ul>`元素,并设置类名`.nav`和`.nav-tabs`,这将为Nav组件添加水平布局和标签样式。 ```html ``` 3. **添加Tab项**:在Nav组件中,每个标签页是一个`<li>`元素,...

    带标签页的菜单demo

    在IT行业中,构建用户界面时,菜单和标签页是常见的元素,它们对于提供良好的用户体验至关重要。这个"带标签页的菜单demo"是一个示例项目,旨在展示如何在静态网页上集成这种功能,同时可能考虑了多设备和浏览器的...

    ExtJS扩展:垂直页签tabPanel

    1. **扩展TabPanel类**:创建一个新的类,继承自Ext.TabPanel,并在扩展类中添加或覆盖必要的方法和配置,如`layout`配置项可能需要设置为自定义的垂直布局。 2. **自定义布局**:创建一个新的布局管理器,可能命名...

    如何在MATLAB中做出标签页的效果-tabgui.m

    使用方法是这样:首先建立一个figure,并在其中加入一个Text控件,需要注意的是这个text控件所在的位置就是将来标签页所在的位置,然后将附件中的tabpanel2.6中的文件放到figure同目录下,然后在命令行输入 ...

    ExtJS-3.4.0系列:Ext.TabPanel

    首先,`Ext.TabPanel`是`Ext.container.Container`类的一个子类,它扩展了容器的基本功能,增加了对标签页的支持。在提供的代码片段中,我们看到了一个简单的`Ext.TabPanel`实例的创建过程: ```javascript var ...

    Ext的Tab标签封装

    1. **配置项**:TabPanel有许多配置项,例如`activeTab`用于指定默认激活的标签,`tabBar`用于自定义标签栏,`layout`用于设置标签内部的布局方式,`items`用于添加包含在TabPanel中的组件。 2. **事件处理**:可以...

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

    ExtJS是一款强大的JavaScript框架,用于构建富客户端应用程序,而TreePanel和TabPanel是其核心组件,分别用于展现树形数据结构和实现多标签页界面。 首先,让我们详细了解一下TreePanel。TreePanel是ExtJS中用于...

    用coolite布局,数据库绑定Treepanel,用Tabpanel显示

    在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

Global site tag (gtag.js) - Google Analytics