Javascript - ExtJs - TabPanel组件

示例

Ext.create(‘Ext.tab.Panel‘, {
    width: "100%",
    renderTo: "tabBox",
    items: [
        {
            title: "权限查询",
            items: [
                Ext.getCmp("TbRightPanel") //将组件放进tab
            ]
        },
        {
            title: "配置员工权限",
            items: [
                        
            ]
        }
    ]
});

配置

bodyPadding:number
//内边距

disabled:bool
//禁用

activeTab:index | Ext.Component
//默认激活哪一个选项卡

子项配置

itemId:string
//id

bodyPadding:number
//内边距

hidden:bool
//被隐藏

html:string
//内容

closable: bool
//可关闭

tabIndex:number
//自定索引

方法

setActiveTab(tabId | tabIndex | Ext.Component)
//设置默认激活参数指定的选项卡组件,返回这个选项卡组件

getActiveTab()
//获取被激活的选项卡组件

remove(tabId | tabIndex | Ext.Component)
//移除参数指定的选项卡组件

时间: 2024-10-15 10:53:34

Javascript - ExtJs - TabPanel组件的相关文章

Javascript - ExtJs - 基本组件

与JQuery一样,ExtJs也有一个文档加载完毕的事件. Ext.onReady(function () { }); 基本组件(Basic components) 弹框组件 MessageBox MessageBox是Ext函数的静态函数成员,它提供一些列的弹出框方法. alert(title,suggest) title是标题,suggest是提示信息,弹出一个确定对话框. Ext.onReady(function () { Ext.MessageBox.alert("好吧,成功"

Javascript - ExtJs - GridPanel组件 - 编辑

如果要对表格进行编辑需要完成以下三步 1.将columns中需要编辑的列设为editor并提供编辑列时所要使用的控件. 2.在gridPanel渲染出来之前实例化插件类的子类,一个列编辑器对象. 3.将列编辑器对象绑定到gridPanel里. 4.指示gridPanel的选择模式为列选择模式. 以下仅仅只有配置编辑列的关键代码,代码片段如下: var columns = [ { header: '编号', dataIndex: 'id' }, { header: '性别', dataIndex:

Javascript - ExtJs - Window组件

Ext.create("Ext.window.Window", {    id: "AuthorizationWin",    title: "正在编辑……",    autoShow: true,     modal: true,//设置是否添加遮罩    layout: "anchor",    width:600,    height: 450,    items: [            Ext.getCmp(&qu

Javascript - ExtJs - TreePanel组件

TreePanel组件(Ext.tree.TreePanel) 树与节点 树面板组件的根是源头,从根上拓展出其它的子节点和叶子节点,前者可以继续拓展出子节点,后者因为是叶子,所以不再有子节.Json自身就有树的结构,所以使用Json作为树面板的data是顺理成章的事.节点都来自Ext.data.NodeInterface接口,该接口提供了对节点的创建.删除.替换.查找.获取.插入等操作. 树.配置.config store: Ext.data.store //配置数据存储器.配置root指定节点

Javascript - ExtJs - FormPanel组件

自定义验证 配置字段的vtype属性可以自动开启验证,你也可以替换掉Ext内置的验证程序,替换方式如下所示. //自定义验证 Ext.apply(Ext.form.VTypes, { otherTest1: function () { }, otherText: "", otherTest2: function () { }, otherText: "" }); //替换之后再配置字段时可使用vtype:otherTest指向验证程序 //自定义验证 Ext.app

extjs自定义组件类

在使用extjs开发应用系统时,难免会出现一个js文件内包含数百行甚至上千行代码的情况,例如程序主界面或者复杂一点的界面,下面介绍如何通过自定义组件减少单个extjs javascript代码行数的方法. 下图中的主界面显示了两个统计图: 最初的时候统计图的js代码是写死在tagpanel里面的,通过extjs 自定义组件的方法拆分成单独的类文件以后的代码: Ext.define('app.view.main.Main_Pie_Chart', { extend: 'Ext.panel.Panel

ExtJS4.1 ExtJS TabPanel 双击标签关闭该页

/*总觉得 TabPanel 生成的那个关闭按钮太小关闭的时候不太顺手 感觉不方便 所以想双击关闭tab方便些于是在网上找到下面的代码 URL:http://atian25.iteye.com/blog/413920可是用在我的系统框架上无效,本人用的是ExtJs4.1.不知道是不是我的问题,可是实在找不出错在哪里.于是 自己想了个办法 亲测支持ExtJs4.1 可能有点麻烦 可是没办法 上面那个方法 我实在是找不出问题在哪里*///////////////////---下面是网上找的方法 本人

Extjs获得组件值的方式

 Extjs中找Form,Extjs找组件的方式: 1,Extjs.getCmp 2,通过组件之间的关系,up,down 结论: 1,form.getValues()和form.getForm().getValues()效果是一样的,如gradeCode和gradeCode2 2,form如果取单个值,可以通过先找组件,然后取组件值,如gradeCode3 3,form.getValues()返回的是一个数组,可以通过 . 来取得 在上次Grid选择多行提交的时候,我们获取records的内容是

ExtJs4.2应用:使用ExtJs扩展组件searchfield实现数据搜索功能

ExtJs4.2应用:使用ExtJs扩展组件searchfield 实现数据搜索功能 1.引入searchfield组件 在Ext目录下放入ux目录将searchfield组件放入ux目录下的form文件下,如图所示: 2.在对应Js文件中引入searchfield组件 dockedItems: [{ dock: 'top', /**在顶部显示*/ xtype: 'toolbar', /**以工具栏形式展示*/ items: { width: "25%", fieldLabel: 'L