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 完整记录列表
})
分享到:
相关推荐
一个关于TABS组件的EXT实例,帮助大家学习TAB控件和JS语言。。。
【标题】:“纵向Tab ---ext”指的是在网页或者应用程序中使用的一种特殊布局方式,将传统的水平排列的Tab标签改为垂直方向展示。这种设计通常用于解决屏幕空间有限或需要清晰展示大量Tab标签的情况,使得用户可以更...
在文件名"ext_tab_demo"中,我们可以推测这是一个示例或者演示,展示了如何使用ExtJS创建TabPanel的实例。在实际的应用中,这个文件可能包含了HTML、JavaScript和CSS代码,展示了如何定义TabPanel的配置选项,如添加...
EXT Designer让你可以轻松地添加、删除或排列Tab,设置标签文本、图标、关闭按钮等特性。 在“exampleProjects”这个压缩包文件中,可能包含了EXT Designer创建的这些实例项目的源代码和设计文件。通过研究这些示例...
在拖动Tab标签的场景中,通常会为每个Tab实例化一个DD对象,然后通过监听拖动事件来处理位置变化。 在实现"可拖动tab标签"的功能时,开发者首先需要对TabPanel进行配置,启用拖放功能,并指定拖放行为。这可以通过...
如果标签页本身并没有定义`loader`对象,则可以通过动态创建的方式为其添加一个`TreeLoader`实例,以实现数据的加载和刷新。 #### 关闭当前标签页 关闭当前标签页是`TabPanel`常见的需求之一,可以通过如下方式...
2. **组件系统**:EXT3.0的核心是其组件模型,包括Grid面板、Form表单、Tree视图、Tab面板等多种组件。这些组件具有高度可配置性和可扩展性,可以满足各种复杂的用户界面需求。 3. **数据绑定**:EXT3.0支持数据...
创建一个Tab Panel首先要实例化`Ext.tab.Panel`对象,并在配置项中指定各个Tab。例如: ```javascript var tabPanel = Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // 将Tab Panel渲染到页面主体 ...
在这个例子中,`setActiveTab()`方法接收一个选项卡组件作为参数,这个组件通常是我们通过`Ext.getCmp()`或者其他方式获取的。调用这个方法后,tabpanel会切换到指定的选项卡,并将其设为活动状态。 然而,在实际...
手册中包含大量示例代码,覆盖了各种组件的使用、事件处理、数据操作等,通过实例学习可以帮助开发者更好地理解和运用Ext 3.0。 七、常见问题解答 这部分包含了开发者在使用Ext 3.0过程中可能遇到的问题及其解决...
每个面板是一个`Ext.container.Panel`实例,它们可以包含不同的组件,如按钮、文本、图像等。面板可以通过配置属性调整大小、位置,甚至可以实现动态添加和删除。 2. **Portlets(portlet)** Portlet是门户中的可...
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 视图与选择模型...
2. **EXT Tab(选项卡)**: EXT Tab Panel 允许在一个区域内组织多个视图,每个视图作为一个独立的选项卡。这在构建多面板界面时非常有用。描述中提到的 "TAB" 实例可能展示了如何创建和管理这些选项卡。 3. **...
创建一个TabPanel需要实例化`Ext.tab.Panel`类,并提供一些基本配置,如`items`,它是一个包含选项卡内容的数组。每个元素都是一个包含面板配置的对象。例如: ```javascript var tabPanel = Ext.create('Ext.tab...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
**创建Tab控制逻辑**: 编写JavaScript代码控制Tab的显示和切换。 #### 8. EXT源码概述 - **源代码结构**: 介绍了EXT源码的基本结构,包括核心模块、适配器等。 - **核心模块**: - **适配器(Adapters)**: 提供不同...
这里,`new Ext.TabPanel()`创建了一个新的`TabPanel`实例,`renderTo`属性指定了渲染的位置,这里是页面的主体部分(`Ext.getBody()`)。`width`和`height`分别定义了组件的宽度和高度。 接着,我们向`TabPanel`...
总的来说,这个EXT版的DRP分销系统界面原型是学习EXT框架和理解DRP系统设计思路的良好实例。通过研究这个原型,开发者不仅可以深入理解EXT的组件和API,还能学习如何将这些技术应用于实际的业务场景中,从而提升自己...