`
prothi
  • 浏览: 60916 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext tabPanel加载静态页面等需要注意的问题

    博客分类:
  • Ext
阅读更多

Ext tabpanel...

先来看示例1:

html页面:

<div id="my-tabs">
</div>
<div id="tab1" class="x-hide-display">
            A simple tab
</div>
<div id="tab2" class="x-hide-display">
            Another one
</div>

 对应js脚本:

Ext.onReady(function() {
			var tabs = new Ext.TabPanel({
						renderTo : 'my-tabs',
						activeTab : 0,
						width : 300,
						items : [{
									contentEl : 'tab1',
									title : 'Tab 1'
								}, {
									contentEl : 'tab2',
									title : 'Tab 2'
								}]
					});
		})

 生成的界面:

正常显示的tab页

下面来该一个属性:

将html页面的代码改为:

<div id="my-tabs">
</div>
<div id="tab1">
            A simple tab
</div>
<div id="tab2">
            Another one
</div>

 JS代码不变,再来看一下效果:

发现问题了吧,试一下点击tab2,发现another one又回到tabpanel里面了。

分析一下原因其实道理还是很简单的:

tabpanel的一个很重要的属性是deferredRender,该属性用于设置tab页的加载时机。默认为true,也就是说tabpanel默认是当你点击了tab页的标签才加载此tab页,这也就是为什么another one会跑到tabpanel的外面,因为没有设置deferredRender,只有当你点击tab2时才加载,也是出现了当你点击tab2时页面又恢复了正常。那么现在你将tabpanel加上那个属性deferredRender:false,这回问题就被解决了。

那为什么开始的那个例子没出现问题,因为加上了class="x-hide-display"就是将Another one所在的那个div隐藏了。

可以再ext中找到这个css的定义:

.x-hide-display{display:none!important;}

 这一下上面的示例没有什么要说的了。

示例2:

html页面

<div id="my-tabs">
    <div class="x-tab" title="Tab 1">A simple tab</div>
    <div class="x-tab" title="Tab 2">Another one</div>
</div>

 js代码:

Ext.onReady(function() {
			var tabs = new Ext.TabPanel({
						applyTo : 'my-tabs',
						activeTab : 0,
						width : 300,
						deferredRender : false,
						autoTabs : true
					});

		})

 试一下也没有什么问题:

这里就要提到tabpanel的另一个重要的属性:autoTabs这个属性用于说明,是否将tabpanel所在的div的内部的class为x-tab的div加载到tabpanel中。当然这里也使用了deferredRender:false,不然也不好用。

这里注意一下:示例1和示例2的markup(即html的标签的结构)是不同的,autoTabs要求markup必须是良构的,并且只能够将class="x-tab"的div加载。这就是以上两个例子的区别所在。

 

另外这里注意那个contentEl属性,有没有很奇怪,在示例1中那tab页根本就没有在tabpanel所在的div中,但是竟然也被加载到tabpanel里面了,这个就是contentEl的作用,它的作用相当于“抢”,就是将他所指向的dom抢过来,加载它所在的位置,如示例1中tab页在tabpanel的items中,所以它可以将tabpane外的内容放到tabpanel里面来。

 

以上就是我对与使用tabpanel时注意问题的一个小小总结,希望对其他学习extjs的人有所帮助,Thanks!

(以后会陆续增加其他ext widget的使用时注意问题的总结)

  • 大小: 2.1 KB
  • 大小: 2.5 KB
3
0
分享到:
评论
1 楼 zzhyq 2012-09-07  
写的很好。让我明白了autotabs 的用法

相关推荐

    EXT教程EXT用大量的实例演示Ext实例

    在Ext使用过程中,可能遇到各种问题,如Ext的收费问题、API文档的查看、在页面中引用Ext、Ext是中文乱码问题、TabPanel的autoLoad属性使用问题等。这些问题的答案在教程中也有详细解答,帮助开发者克服使用中的难题...

    Ext的Tab标签封装

    5. **内容加载**:每个标签页可以包含任何ExtJS组件,如表格、表单、图表等,也可以使用`html`或`contentEl`属性加载静态HTML或现有DOM元素。 6. **TabPanel的行为**:可以配置是否允许用户关闭标签,或者设置标签...

    EXT 中文手册

    - **作用域问题**:处理函数默认使用当前对象作为作用域,需要注意作用域问题。 - **传递参数**:可以向事件处理函数传递额外的参数,用于处理更复杂的逻辑。 #### 十七、类设计 - **对象创建**:EXT支持面向对象的...

    ext+js深入浅出

    - **Ext.TabPanel**:选项卡面板,允许用户在不同的面板之间进行切换。 #### 三、表格控件 表格(Grid)是**EXTJS**中最常用也是最强大的组件之一,广泛应用于数据展示和管理。 ##### 3.1 Grid的特性简介 Grid...

    Ext20110222

    - **延迟加载**:配置了 `deferred` 属性,表示面板在需要时才会加载。 ### 样式配置 文件中还定义了一些自定义 CSS 样式,例如: - `.settings`:背景图标的 URL 为 `../shared/icons/fam/folder_wrench.png`。 -...

    老师整理的extjs学习笔记

    2. **初始化**: 定义 `Ext.onReady` 函数来确保页面 DOM 完全加载后再运行 JavaScript 代码。 3. **创建组件**: 使用 ExtJS 提供的 API 创建 UI 组件,如面板、表格等。 4. **绑定数据**: 通过数据存储(Store)将...

    sencha_的所有xtype类型

    在深入探讨Sencha框架中的`xtype`类型之前,我们首先需要理解`xtype`的基本概念。`xtype`是Sencha框架(如Ext JS和Sencha Touch)中用于组件类型的扩展名,它允许开发者通过一个简短的字符串来创建各种组件。这种...

Global site tag (gtag.js) - Google Analytics