`
wangleide414
  • 浏览: 606744 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

动态修改TabPanel的html(1)

阅读更多

 Ext.TabPanel中的items中可以写html来调用外部的页面。如下:

 

new Ext.TabPanel({
                    id:'tab',
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                     items:[{
                        id:'main',
                        contentEl:'center2',
                        title: '主菜单',
                        html:'<iframe name="mainFrame" id="main" height="100%" frameborder="0" width="100%" marginheight="0" marginwidth="0" scrolling="auto" src="welcome.html"></iframe>',
                        autoScroll:false
                    }]
                })

 但是如果动态修改itmes中的html比较困难,我找了一会找不到解决方法,但是可以这样解决,但是不能用于多个tab的情况,

new Ext.TabPanel({
                    id:'tab',
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    autoLoad :{url:'welcome.html'}
       })

 这样动态修改比较容易:

Ext.getCmp('tab').load({url:'1.html'});

就可以了

0
0
分享到:
评论

相关推荐

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

    在本例中,我们将重点介绍如何在TabPanel中的GridPanel(表格面板)中根据不同条件动态改变行的背景颜色。 #### 三、实现步骤 ##### 1. 在样式文件中添加样式 首先,我们需要定义CSS样式规则来指定不同数值对应的...

    js tabpanel 导航

    1. **HTML 结构**:通常,一个 `tabpanel` 由一个包含所有选项卡的容器和一组内容面板组成。每个选项卡是一个链接或按钮,内容面板则被嵌套在 `&lt;div&gt;` 或其他块级元素中。 2. **CSS 样式**:为了达到美观的效果,...

    TabPanel:一个简单的 chrome 扩展来浏览选项卡

    1. **Chrome 扩展开发**:了解如何使用 Chrome 的 API(如 `chrome.tabs`)来创建扩展,包括编写 manifest.json 文件,设置扩展的权限,以及编写背景脚本和内容脚本。 2. **JavaScript 基础**:理解 JavaScript 的...

    Tab控件(类型于AJAX里的TAB控件)

    3. JavaScript交互:使用JavaScript或jQuery等库,监听用户对标签的点击事件,然后动态修改CSS样式,实现内容的切换。此外,还可以添加动画效果,使切换更平滑。 二、AJAX与Tab控件的结合 AJAX技术允许Web应用在不...

    Extjs4 tab 基本选项卡及增删插入操作

    1. **创建TabPanel** 创建一个TabPanel需要实例化`Ext.tab.Panel`类,并提供一些基本配置,如`items`,它是一个包含选项卡内容的数组。每个元素都是一个包含面板配置的对象。例如: ```javascript var tabPanel =...

    jquery资料 大全

    - title:元素的标题,允许动态修改。 - closeable:是否允许关闭选项卡,缺省值为true。 四、使用示例: 在页面中引入jQuery.js、TabPanel.js、Fader.js和TabPanel.css,然后创建一个新的TabPanel实例,配置其...

    Ext.plugins.TDGi.tabScrollerMenu插件的使用

    在`index.html`文件中,我们可以看到一个包含此插件的示例TabPanel的HTML结构。这个文件通常会引入必要的Ext JS库,如`ext-all.js`或`ext-debug.js`,以及`tabScrollerMenu.css`和`tabmenu.gif`等资源文件。`...

    c# 在webFrom上实现tabcontrol功能(onmouseover事件,onclick事件).zip

    &lt;asp:TabPanel ID="TabPanel1" HeaderText="页面1" runat="server"&gt; &lt;!-- 页面1的内容 --&gt; &lt;/asp:TabPanel&gt; &lt;asp:TabPanel ID="TabPanel2" HeaderText="页面2" runat="server"&gt; &lt;!-- 页面2的内容 --&gt; ...

    TabControl asp.net的(vb)代码事例

    此外,还可能包含了数据绑定、动态添加TabPanel或其他定制行为的代码。 `App_Data`是一个标准的ASP.NET文件夹,用于存放数据库文件,例如SQL Server的`.mdf`文件。在本例中,如果TabControl涉及到数据展示,那么...

    InlineToolbarTabPanel

    它继承自EXTJS的`TabPanel`类,通过扩展并修改其默认行为,实现了内嵌的Toolbar功能。 首先,我们来看`Ext.ux.InlineToolbarTabPanel.js`这个文件,这是实现`InlineToolbarTabPanel`功能的源代码。EXTJS中的`ux`...

    bootstrap 多层tab标签实现

    &lt;div class="tab-pane active" id="parent1" role="tabpanel"&gt; &lt;a class="nav-link active" data-toggle="tab" data-parent="#parent1" href="#child1" role="tab"&gt;Child 1 ...

    javascript 经典tab控件

    1. **HTML结构**:首先,我们需要构建一个基础的HTML结构,包含一组可切换的标签和对应的内容区域。每个标签都是一个链接,而内容区域则隐藏在默认状态下。 2. **CSS样式**:使用CSS来美化标签和内容区域,包括颜色...

    Extjs帮助文档.pdf

    `Ext.XTemplate` 是一个强大的模板引擎,用于动态生成HTML内容。它支持简单的语法和表达式,使得渲染数据到HTML变得十分简单。 示例代码: ```javascript var tpl = new Ext.XTemplate( '&lt;ul&gt;', '&lt;tpl for="."&gt;',...

    Efs c# 帮助文档

    - 复杂的TabPanel容器:支持更多的定制选项,如动态添加或移除页签等。 #### 第七章 Grid 网格容器 - **GridPanel构造**:GridPanel是一种专用于展示表格数据的容器。 - **数据源(Store)**:数据源是GridPanel...

    适用于IE 5.5+开发人员的基于Web的文本编辑器Web HTML Editor-开源

    1. **toolbar.css**:这是编辑器工具栏的样式表文件,定义了工具栏按钮的外观、布局和交互效果。通过CSS,开发人员可以自定义编辑器界面的视觉样式。 2. **menu.css**:菜单系统相关的CSS文件,负责编辑器的下拉...

    ExtJS学习心得

    - 修改窗口配置,添加 `contentEl` 和 `items` 属性。 ```javascript var win = new Ext.Window({ el: 'hello-win', contentEl: 'win-content', layout: 'fit', width: 500, height: 300, closeAction: '...

    dlodlovr(实现tab)

    1. HTML与CSS基础 在网页开发中,HTML(超文本标记语言)用于结构化内容,CSS(层叠样式表)用于美化和布局。实现Tab的基本思路是使用HTML的`&lt;div&gt;`和`&lt;a&gt;`标签创建Tab头,然后使用CSS隐藏或显示相应的Tab内容。例如...

    asp.net多页签页面切换

    在ASP.NET页面中添加此控件,然后为每个页签添加TabPanel,每个TabPanel中放置不同的内容页面。通过设置ActiveTabIndex属性,可以指定默认显示的页签。当用户点击不同的页签时,可以通过JavaScript触发AJAX请求,...

    Bootstrap3弹出拟态框中包含下拉和标签页

    保存更改 ``` 在这个模态框中,我们可以添加下拉菜单(Dropdown)和标签页(Tab)。下拉菜单的HTML代码如下: ```html 下拉菜单 动作1 动作2 动作3 ``` 标签页的实现则需要`nav`、`tab-...

Global site tag (gtag.js) - Google Analytics