`

Ext的xtype:"tabpanel"

EXTJavaScriptCSSHTML 
阅读更多

 

 

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext/ext-all.js"></script>

	</head>

	<body>

		<script type="text/javascript">
			Ext.onReady(function() {
				var viewport = new Ext.Viewport({
					layout:'border',
					items:[{
						title:'west',
						region:'west',
						width:300,
						split:true,
						collapsible:true,
						layout: 'accordion',
						layoutConfig:{
							animate:true
						},
						items: [{
							title:'test',
							html:'<a target="center" href="http://www.baidu.com">baidu</a>'
						},{
							title:'hello',
							html:'hello'
						}]

					},{
						title:'center',
						region:'center',
						xtype:"tabpanel",
						items:[{title:"面板1",html:'<h1>面板1内容</h1>'},
							{title:"面板2",html:'<h1>面板2内容</h1>'},
							{title:"面板3",html:'<h1>面板3内容</h1>'}]
						
					}]
				});
			});
		</script>
	</body>
</html>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| Ext.Viewport的border布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext中xtype和vtype.

    * tabpanel：一个标签面板组件，用于显示多个页面。 * treepanel：一个树形面板组件，用于显示树形结构的数据。 * viewport：一个视口组件，用于定义应用程序的视口。 * window：一个窗口组件，用于显示某些信息。 ...

    extjs的xtype class对照表

    7. **选项卡（TabPanel）** - `xtype: 'tabpanel'` 对应的类是 `Ext.tab.Panel`。选项卡组件用于展示多个页面内容，每个页面是一个单独的选项卡。 8. **树（Tree）** - `xtype: 'tree'` 对应的类是 `Ext.tree....

    ExtJS的xtype列表

    - `tabpanel`: 包含多个选项卡的面板，每个选项卡可以是独立的面板。 - `treepanel`: 展示树形结构数据的组件，支持展开、折叠等操作。 - `flash`: 显示Flash内容的组件。 3. **工具栏组件**： - `paging`: ...

    Ext中TabPanel的动态页面加载

    在EXT JS这个强大的JavaScript库中，`TabPanel`是一个核心组件，用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载，这在构建可扩展且高效的Web应用时非常关键。通过动态加载，...

    ExtJS TabPanel 标签操作

    创建一个基本的TabPanel需要指定` xtype: 'tabpanel' `，并可以通过`items`属性来添加初始的面板。例如： ```javascript Ext.application({ name: 'MyApp', launch: function () { Ext.create('Ext.container....

    extjs xtype

    16. `tabpanel` - `Ext.TabPanel`：选项卡面板，用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`：树形面板，展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`：视口组件，用于填充...

    Ext组件描述，各个组件含义

    **2.11 Tab Panel (Ext.TabPanel)** - **xtype**: `tabpanel` - **功能描述**：Tab Panel 是一个包含多个选项卡的容器。 - **主要用途**：用于展示多个相关的数据集或功能模块，每个选项卡代表一个不同的页面。 **...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版）

    &lt;ext:TabPanel runat="server"&gt; &lt;ext:Tab runat="server" Title="Tab 1" /&gt; Example (New) &lt;ext:TabPanel runat="server"&gt; &lt;ext:Panel runat="server" Title="Tab 1" /&gt; 55. Removed &lt;ext:...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    xtype:'tabpanel', plain:true, activeTab: 0, height:350, //defaults:{bodyStyle:'padding:10px'}, items:[{ title : 'editor_office2003', layout : 'fit', items : { xtype : '...

    Extjs xtype集合

    - **`Class`**: `Ext.TabPanel` - **描述**: 选项卡面板，用于组织多个页面。 8. **`treepanel`:** - **`xtype`**: `treepanel` - **`Class`**: `Ext.tree.TreePanel` - **描述**: 树形结构的面板，用于展示...

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

    当tabpanel的`items`配置包含`xtype`时，EXTJS会在需要时动态创建对应的组件。 ```javascript var tabsConfig = [ { xtype: 'myDynamicPanel', title: '动态Panel' }, { xtype: 'myHtmlPanel', title: '动态...

    EXT制作的布局，使用border layout, 稍做改动即可添加到自己的项目里， 简单实用。让你感受EXT的强大

    xtype: 'tabpanel', items: [/* TabPanel items here */] }] }); } }); ``` 在上述代码中，我们创建了一个全屏的Viewport容器，设置了Border Layout，并分别在north、south、west和center区域添加了组件。West...

    extjs6.5快速开始.pdf

    - **TabPanel配置**: 通过设置`xtype`为`tabpanel`将面板转换为选项卡面板。 - **Items数组**: 用于添加子组件到容器，如`[ { xtype: 'panel', title: 'Tab 1', iconCls: 'fa-home' }, { xtype: 'panel', title: '...

    extjs4.0技术

    { xtype: 'tabpanel', region: 'center' }, { xtype: 'toolbar', docked: 'bottom' } ] }); ``` 通过上述内容的学习，你应该能够掌握Extjs4.0的基本使用方法，包括环境搭建、基础操作、元素获取与操作、事件...

    ExtJs_xtype一览

    - `tabpanel`：`Ext.TabPanel`，分页容器，每个页签代表一个单独的面板。 - `treepanel`：`Ext.tree.TreePanel`，显示树形结构的数据。 - `flash`：`Ext.FlashComponent`，自3.0版本起支持展示Flash内容的组件。 ...

    extjs实践大量实例讲解

    xtype: 'tabpanel', activeTab: 0, items: [ { title: 'Page 1', html: 'Content for Page 1' }, { title: 'Page 2', html: 'Content for Page 2' } ] } ] }); ``` 在这个例子中，我们创建了一个带有...

    ExtJs xtype一览

    - **`tabpanel` (Ext.TabPanel)**: 选项卡面板组件，可以展示多个选项卡。 - **`treepanel` (Ext.tree.TreePanel)**: 树型面板组件，用于展示层次结构的数据。 - **`flash` (Ext.FlashComponent)**: 自3.0版本开始...

    sencha touch 模仿tabpanel导航栏TabBar的实例代码

    代码如下:/**模仿tabpanel导航栏*/Ext.define(‘ux.TabBar’, { alternateClassName: ‘tabBar’, extend: ‘Ext.Toolbar’, xtype: ‘tabBar’, config: { docked: ‘bottom’, cls: ‘navToolbar’, ...

    extJs xtype 类型

    7. **`tabpanel`:** 选项卡面板组件，用于实现选项卡界面，通过`Ext.TabPanel`类实现。 8. **`treepanel`:** 树型面板组件，用于展示层次结构的数据，通过`Ext.tree.TreePanel`类实现。 9. **`flash`:** Flash组件...

    Ext布局类的介绍与使用的例程

    xtype: 'tabpanel', // 使用tabpanel作为中心区域 items: [/*...tabs here...*/] }] }); } }); ``` 在上面的代码中，我们创建了一个全屏的视图容器，并设置了`borderlayout`。每个子组件通过`region`属性指定...

Magicbox
Global site tag (gtag.js) - Google Analytics