`

ext tab实例

    博客分类:
  • ext
阅读更多

ext tab实例

 

//装载tab
var nlSemantics = {completeLoad:0}
Ext.onReady(function (){
	var items = [{//装载 新增TabPanel
	 	   id : "tabPanel1",
	 	   title:'新建模板SQL',
	 	   contentEl : 'nlNewSemantics'
	},{//装载 完整TabPanel
		 id : "tabPanel2",
		 title: "模板SQL",
		 contentEl : 'nlCompleteSemantics'
	}];
	
	//生成tab
	var tab = Ext.createWidget('tabpanel',{
		renderTo  : 'nlSemanticsPanel',
		activeTab : 0,
		width: document.body.offsetWidth-20,
		height: 800,
		plain: true,
		enableTabScroll:true,
		defaults:{autoScroll:true},
		//closable:false
		items:items
	});
	var tabchangeShow = function(){
		if(nlSemantics.completeLoad == 0){
			nlSemantics.completeLoad = 1;
			showSemanticsList(2,'complete_list');
		}
	}
	tab.addListener("tabchange",tabchangeShow);
	//装载新增TabPanel 新增button
	var addButtonItem = new Ext.create('Ext.Button',{
		text:'新建模板',
		renderTo:'new_button',
		handler : function(){showItemEditPage(1)}//showAddSemanticsPanel
	});
	//新增记录列表
	showSemanticsList(1,'new_list');
	//装载完整TabPanel 完整记录列表
})
 
分享到:
评论

相关推荐

    一个EXTJS的TAB组件实例

    一个关于TABS组件的EXT实例,帮助大家学习TAB控件和JS语言。。。

    纵向Tab ---ext

    【标题】:“纵向Tab ---ext”指的是在网页或者应用程序中使用的一种特殊布局方式,将传统的水平排列的Tab标签改为垂直方向展示。这种设计通常用于解决屏幕空间有限或需要清晰展示大量Tab标签的情况,使得用户可以更...

    Ext的Tab标签封装

    在文件名"ext_tab_demo"中,我们可以推测这是一个示例或者演示,展示了如何使用ExtJS创建TabPanel的实例。在实际的应用中,这个文件可能包含了HTML、JavaScript和CSS代码,展示了如何定义TabPanel的配置选项,如添加...

    ext designer 设计实例

    EXT Designer让你可以轻松地添加、删除或排列Tab,设置标签文本、图标、关闭按钮等特性。 在“exampleProjects”这个压缩包文件中,可能包含了EXT Designer创建的这些实例项目的源代码和设计文件。通过研究这些示例...

    ext.js拖动3.4版本插件

    在拖动Tab标签的场景中,通常会为每个Tab实例化一个DD对象,然后通过监听拖动事件来处理位置变化。 在实现"可拖动tab标签"的功能时,开发者首先需要对TabPanel进行配置,启用拖放功能,并指定拖放行为。这可以通过...

    extjs4.2.1 tabPanel刷新及关闭标签

    如果标签页本身并没有定义`loader`对象,则可以通过动态创建的方式为其添加一个`TreeLoader`实例,以实现数据的加载和刷新。 #### 关闭当前标签页 关闭当前标签页是`TabPanel`常见的需求之一,可以通过如下方式...

    EXT3.0中文API文档

    2. **组件系统**:EXT3.0的核心是其组件模型,包括Grid面板、Form表单、Tree视图、Tab面板等多种组件。这些组件具有高度可配置性和可扩展性,可以满足各种复杂的用户界面需求。 3. **数据绑定**:EXT3.0支持数据...

    extjs tab panel

    创建一个Tab Panel首先要实例化`Ext.tab.Panel`对象,并在配置项中指定各个Tab。例如: ```javascript var tabPanel = Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // 将Tab Panel渲染到页面主体 ...

    ext的tabpanel的激活与注意事项

    在这个例子中,`setActiveTab()`方法接收一个选项卡组件作为参数,这个组件通常是我们通过`Ext.getCmp()`或者其他方式获取的。调用这个方法后,tabpanel会切换到指定的选项卡,并将其设为活动状态。 然而,在实际...

    Ext 3.0中文手册及帮助文档

    手册中包含大量示例代码,覆盖了各种组件的使用、事件处理、数据操作等,通过实例学习可以帮助开发者更好地理解和运用Ext 3.0。 七、常见问题解答 这部分包含了开发者在使用Ext 3.0过程中可能遇到的问题及其解决...

    Ext portal例子

    每个面板是一个`Ext.container.Panel`实例,它们可以包含不同的组件,如按钮、文本、图像等。面板可以通过配置属性调整大小、位置,甚至可以实现动态添加和删除。 2. **Portlets(portlet)** Portlet是门户中的可...

    Ext Js权威指南(.zip.001

    9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...

    一个使用 ext 编写的类似于 Windows 系统的操作页面

    2. **EXT Tab(选项卡)**: EXT Tab Panel 允许在一个区域内组织多个视图,每个视图作为一个独立的选项卡。这在构建多面板界面时非常有用。描述中提到的 "TAB" 实例可能展示了如何创建和管理这些选项卡。 3. **...

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

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

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    EXT最新使用手册

    **创建Tab控制逻辑**: 编写JavaScript代码控制Tab的显示和切换。 #### 8. EXT源码概述 - **源代码结构**: 介绍了EXT源码的基本结构,包括核心模块、适配器等。 - **核心模块**: - **适配器(Adapters)**: 提供不同...

    ExtJS-3.4.0系列:Ext.TabPanel

    这里,`new Ext.TabPanel()`创建了一个新的`TabPanel`实例,`renderTo`属性指定了渲染的位置,这里是页面的主体部分(`Ext.getBody()`)。`width`和`height`分别定义了组件的宽度和高度。 接着,我们向`TabPanel`...

    DRP分销系统界面原型(EXT版)

    总的来说,这个EXT版的DRP分销系统界面原型是学习EXT框架和理解DRP系统设计思路的良好实例。通过研究这个原型,开发者不仅可以深入理解EXT的组件和API,还能学习如何将这些技术应用于实际的业务场景中,从而提升自己...

Global site tag (gtag.js) - Google Analytics