zoukankan      html  css  js  c++  java
  • ExtJs控件属性配置详细

    序言:

       1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善)。

    Ext.form.TimeField:

      配置项: 
               maxValue:列表中允许的最大时间 
               maxText:当时间大于最大值时的错误提示信息 
               minValue:列表中允许的最小时间 
               minText:当时间小于最小值时的错误提示信息 
               increment:两个相邻选项间的时间间隔,默认为15分钟 
               format:显示格式,默认为“g:i A”。一般使用“H:i:s” 
                    H:带前缀0的24小时 
                     i:带前缀0的分钟 
                    s:带前缀0的秒 
               invalidText:当时间值非法时显示的提示信息 
               altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割

    Ext.form.FieldSet

        animCollapse:动画折叠,默认为false 
               checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false 
               checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效 
               labelWidth:字段标签的宽度,可以级联到子容器 
               layout:布局,默认为form

    Ext.form.DateFied

        maxValue:允许选择的最大日期 
               maxText:当日期大于最大值时的错误提示信息 
               minValue:允许选择的最小时间 
               minText:当日期小于最小值时的错误提示信息 
               format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d” 
                   Y:四位年份 
                   m:带前缀0的月份 
                   d:带前缀0的日期 
                   y:两位年份 
                   n:不带前缀0的月份 
                   j:不带前缀0的日期 
                   w:星期的数字,0表示星期日,1代表星期一 
               showToday:是否显示今天按钮,默认为true 
               altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d' 
               disabledDates:禁止选择的日期组成的数组 
               disabledDatesText:选择禁选日期时显示的提示信息 
               disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一 
               disabledDaysText:选择禁选星期时显示的提示信息 
               invalidText:当日期值非法时显示的提示信息 
         方法: 
               getValue():取得日期值

    Ext.form.ComboBox

        displayField:被显示在下拉框中的字段名 
               editable:是否可编辑,默认为true 
               forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。 
               hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值 
               listWidth:下拉列表的宽度 
               minListWidth:下拉列表的最小宽度,默认为70像素 
               loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效 
               maxHeight:下拉列表框的最大高度,默认为300像素 
               minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0 
               mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据 
               pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效 
               queryParam:查询的名字,默认为'query',将被传递到查询字符串中 
               allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串'' 
               selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效 
               store:列表框绑定的数据源 
               transform:将页面中已存在的元素转换为组合框 
               lazyInit:延时初始化下拉列表,默认为true 
               lazyRender:延时渲染,默认为false 
               triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询 
               typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false 
               value:初始化组合框中的值 
               valueField:组合框的值字段 
               valueNotFoundText:值不存在时的提示信息 
               tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式 
         方法: 
               clearValue():清空字段当前值 
               doQuery( String query, Boolean forceAll ): 
               getValue(): 
               getStore(): 
               setValue( String value ):

    Ext.from.RadioGroup

        allowBlank: 
               blankText:

    Ext.form.Radio;

        getGroupValue(): 
               setValue( value {String/Boolean} ):

    Ext.form.CheckboxGroup

         allowBlank:是否允许不选择,默认为true 
               blankText: 
               columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数) 
               items:对象数组 
               vertical:是否垂直方向显示对象,默认为false

    Ext.form.Checkbox

      boxLabel:复选框的文字描述 
               checked:复选框是否被选择,默认为false 
               handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked 
               inputValue: 
         方法: 
               getValue():返回复选框的checked状态 
               setValue( Boolean/String checked ):

    Ext.form.NumberField

          allowDecimals:是否允许输入小数,默认为true 
               allowNegative:是否允许输入负数,默认为true 
               baseChars:输入的有效数字集合,默认为'0123456789' 
               decimalPrecision:数字的精度,默认保留小数点后2位 
               decimalSeparator:十进制分隔符,默认为'.' 
               maxValue:允许输入的最大数值 
               maxText:超过最大值之后的提示信息 
               minValue:允许输入的最小数值 
               minText:超过最小值之后的提示信息 
               nanText:输入非有效数值之后的提示信息

    Ext.form.TextArea

        preventScrollbars:是否禁止出现滚动条,默认为false

    Ext.form.TextField

        allowBlank:是否允许为空,默认为true 
              blankText:空验证失败后显示的提示信息 
              emptyText:在一个空字段中默认显示的信息 
              grow:字段是否自动伸展和收缩,默认为false 
              growMin:收缩的最小宽度 
              growMax:伸展的最大宽度 
              inputType:字段类型:默认为text 
              maskRe:用于过滤不匹配字符输入的正则表达式 
              maxLength:字段允许输入的最大长度 
              maxLengthText:最大长度验证失败后显示的提示信息 
              minLength:字段允许输入的最小长度 
              minLengthText:最小长度验证失败后显示的提示信息 
              regex:正则表达式 
              regexText:正则表达式验证失败后显示的提示信息 
              vtype:验证类型的名字 
                   alpha:限制只能输入字母 
                   alphanum:限制只能输入字母和数字 
                   email 
                   url 
              vtypeText:验证失败时的提示信息 
              validator:自定义验证函数 
              selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false

    Ext.form.Field

        name:字段名 
              value:字段的初始化值 
              disabled:字段是否不可用,默认为false 
              fieldLabel:字段标签说明 
              hideLabel:隐藏字段标签,默认为false 
              labelSeparator:字段标签与字段之间的分隔符,默认为':' 
              labelStyle:字段标签样式 
              inputType:默认为text 
              invalidClass:默认为x-form-invalid 
              invalidText:字段非法文本提示 
              msgTarget:错误信息显示的位置,默认为qtip 
                  qtip:显示一个浮动的提示信息 
                  title:显示一个浏览器的浮动提示信息 
                  under:在字段下方显示一个提示信息 
                  side:在字段右边显示一个提示信息 
              readOnly:字段是否只读,默认为false 
              validateOnBlur:字段在失去焦点时被验证,默认为true 
         方法: 
              clearInvalid(): 
              getRawValue() 
              setRawValue( Mixed value ) 
              getValue() 
              setValue( Mixed value ) 
              isDirty():字段值在装载后是否被修改过 
              isValid( Boolean preventMark ):当前字段值是否合法 
              markInvalid( [String msg] ) 
              validate() 
              reset()

    Ext.form.FormPanel

    items:一个元素或元素数组 
              buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中 
              buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center 
              labelWidth:表单标签的宽度 
              labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left 
              labelSeparator:字段标签与字段之间的分隔符,默认为':' 
              minButtonWidth:按钮的最小宽度,默认为75 
         方法: 
              getForm() : Ext.form.BasicForm 
              load( Object options ) 
              startMonitoring() 
              stopMonitoring()

    Ext.form.BaseicForm

        baseParams:传递到请求中的参数 
              method:表单的提交方式,有效值包括GET、POST 
              url:表单默认的提交路径 
              fileUpload:表单是否进行文件上传 
              timeout:表单动作的超时时间,默认为30秒 
              trackResetOnLoad:是否在表单初次创建时清楚数据 
        方法: 
              doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括: 
                  url:动作提交的路径 
                  method:表单的提交方式,有效值包括GET、POST 
                  params:传递到请求中的参数 
                  headers: 
                  success:执行成功后回调的函数,包括两个参数:form和action 
                  failure:执行失败后回调的函数,包括两个参数:form和action 
                  clientValidation:是否客户端验证 
              clearInvalid():清除表单中所有的无效验证信息 
              findField( String id ):查找表单字段 
              getValues( [Boolean asString] ): 
              isDirty():表单数据是否被更改过 
              isValid():客户端验证是否成功 
              load( Object options ):执行表单读取动作 
              loadRecord( Record record ):从一个数据记录中读取数据到表单中 
              markInvalid( Array/Object errors ):成批设置表单字段为验证无效 
              reset():重置表单 
              setValues( Array/Object values ):成批设置表单字段值 
              submit( Object options ):执行表单提交动作 
              updateRecord( Record record ):持久化表单数据到记录集中

    Ext.form.Action

        success:执行成功后回调的函数,包括两个参数:form和action 
              failure:执行失败后回调的函数,包括两个参数:form和action 
              method:表单的提交方式,有效值包括GET、POST 
              params:传递到请求中的参数 
              url:动作提交的路径 
              waitMsg:动作执行时显示的等待信息 
         属性: 
              Action.CLIENT_INVALID:客户端验证错误 
              Action.CONNECT_FAILURE:通信错误 
              Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回 
              Action.SERVER_INVALID:服务端验证错误 
              failureType:错误类型 
              result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'} 
              type:动作类型,可选值有submit和load 
                   Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性 
                   Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性

    Ext.grid.EditorGridPanel

        clicksToEdit:设置点击单元格进入编辑模式的点击次数,默认为2 
                autoEncode:是否自动编码/解码HTML内容,默认为false 
                selModel:默认为Ext.grid.CellSelectionModel 
      
          主要方法: 
                startEditing( Number rowIndex, Number colIndex ):开始编辑指定单元格 
                stopEditing( [Boolean cancel] ):结束编辑操作

    Ext.grid.GroupinView

        enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true 
                groupByText:表头菜单中分组控制的菜单文字,默认为'Group By This Field' 
      
                enableNoGroups:是否允许用户关闭分组功能,默认为true 
                showGroupsText:在表头菜单中启用分组和禁用分组的菜单文字,默认为'Show in Groups' 
      
                groupTextTpl:用于渲染分组信息的模板,默认为'{text}',常用的可选值有: 
                      text:列标题:组字段值 
                      gvalue:组字段的值 
                      startRow:组行索引 
      
                enableGrouping:是否对数据分组,默认为true 
                hideGroupedColumn:是否隐藏分组列,默认为false 
                ignoreAdd:在向表格中添加数据时是否刷新表格,默认为false 
                showGroupName:是否在分组行上显示分组字段的名字,默认为true 
                startCollapsed:初次显示时分组是否处于收缩状态,默认为false 
      
          主要方法: 
                collapseAllGroups():收缩所有分组行 
                expandAllGroups():展开所有分组行 
                getGroupId( String value ):根据分组字段值取得组id 
                toggleAllGroups( [Boolean expanded] ):切换所有分组行的展开或收缩状态 
                toggleGroup( String groupId, [Boolean expanded] ):切换指定分组行的展开或收缩状态 


    2、Ext.data.GroupingStore 
          groupField:分组字段 

          groupOnSort:是否在分组字段上排序,默认为false 
          remoteGroup:是否远程分组数据,默认为false。如果是远程分组数据,则通过groupBy参数发送分组字段名 

    3、范例源码 

    复制代码
    var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];   
                   
    var person = Ext.data.Record.create([   
        {name: "personId", mapping: 0},   
        {name: "personName", mapping: 1},   
        {name: "personAge", mapping: 2},   
        {name: "personGender", mapping: 3},   
        {name: "personBirth", mapping: 4}   
    ]);   
      
    var grid = new Ext.grid.GridPanel({   
        title: "GroupingView实例",   
        renderTo: "div1",   
         500,   
        height: 300,   
        frame: true,   
        tbar: [   
            {   
                text: "展开/收缩",   
                iconCls: "search",   
                handler: function(){   
                    var view = grid.getView();   
                    //var groupId = view.getGroupId("男");   
                    //view.toggleGroup(groupId);   
                    view.toggleAllGroups();   
                }   
            }   
        ],   
           
        store: new Ext.data.GroupingStore({   
            reader: new Ext.data.ArrayReader({id:0}, person),   
            data: datas,   
            sortInfo: {field:"personId", direction:"ASC"}, //数据排序   
            groupField: "personGender" //分组字段   
        }),   
        view: new Ext.grid.GroupingView({   
            sortAscText: "升序",   
            sortDescText: "降序",   
            columnsText: "表格字段",   
            groupByText: "使用当前字段进行分组",   
            showGroupsText: "表格分组",   
            groupTextTpl: "{text}(共{[values.rs.length]}条)"  
        }),   
           
        columns: [   
            {id:"personId", header:"编号", 50, dataIndex:"personId"},   
            {id:"personName", header:"姓名", 70, dataIndex:"personName"},   
            {id:"personAge", header:"年龄", 45, dataIndex:"personAge"},   
            {id:"personGender", header:"性别", 45, dataIndex:"personGender"},   
            {id:"personBirth", header:"出生日期", 120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}   
        ]   
    }); 
    复制代码

    Ext.grid.GridPanel:

        store:表格的数据集 
              columns:表格列模式的配置数组,可自动创建ColumnModel列模式 
              autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 
              stripeRows:表格是否隔行换色,默认为false 
      
              cm、colModel:表格的列模式,渲染表格时必须设置该配置项 
              sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel 
              enableHdMenu:是否显示表头的上下文菜单,默认为true 
              enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true 
              loadMask:是否在加载数据时显示遮罩效果,默认为false 
              view:表格视图,默认为Ext.grid.GridView 
              viewConfig:表格视图的配置对象 
      
              autoExpandMax:自动扩充列的最大宽度,默认为1000 
              autoExpandMin:自动扩充列的最小宽度,默认为50 
              columnLines:是否显示列分割线,默认为false 
              disableSelection:是否禁止行选择,默认为false 
              enableColumnMove:是否允许拖放列,默认为true 
              enableColumnResize:是否允许改变列宽,默认为true 
              hideHeaders:是否隐藏表头,默认为false 
              maxHeight:最大高度 
              minColumnWidth:最小列宽,默认为25 
              trackMouseOver:是否高亮显示鼠标所在的行,默认为true 
      
          主要方法: 
              getColumnModel():取得列模式 
              getSelectionModel():取得选择模式 
              getStore():取得数据集 
              getView():取得视图对象 
              reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件 

    2、Ext.grid.Column 
          主要配置项: 
              id:列id 
              header:表头文字 
              dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应 
              width:列宽 
              align:列数据的对齐方式 
      
              hidden:是否隐藏列,默认为false 
              fixed:是否固定列宽,默认为false 
              menuDisabled:是否禁用列的上下文菜单,默认为false 
              resizable:是否允许改变列宽,默认为true 
              sortable:是否允许排序,默认为true 
              renderer:设置列的自定义单元格渲染函数 
                    传入函数的参数有: 
                        value:数据的原始值 
                        metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有: 
                              css:应用到单元格TD元素上的样式名称 
                              attr:一个HTML属性定义字符串,例如'style="color:blue"' 
                        record:当前数据记录对象 
                        rowIndex:单元格的行索引 
                        colIndex:单元格的列索引 
                        store:数据集对象 
        
              xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等 
      
              editable:是否可编辑,默认为true 
              editor:编辑器 
      
              groupName: 
              emptyGroupText: 
              groupable: 

    3、Ext.grid.ColumnModel 
          主要配置项: 
              columns:字段数组 
              defaultSortable:是否进行默认排序,默认为false 
              defaultWidth:默认宽度 
      
          主要方法: 
              findColumnIndex( String col ):根据给定的dataIndex查找列索引 
              getColumnById( String id ):取得指定id对应的列 
              getColumnCount( Boolean visibleOnly ):取得列总数 
              getColumnHeader( Number col ):取得列的表头 
              getColumnId( Number index ):取得列id 
              getDataIndex( Number col ):取得列对应的数据字段名 
              getIndexById( String id ):取得列索引 
              getTotalWidth( Boolean includeHidden ) 
              isCellEditable( Number colIndex, Number rowIndex ) 
              isFixed() 
              isHidden( Number colIndex ) 
              setColumnHeader( Number col, String header ) 
              setColumnWidth( Number col, Number width, Boolean suppressEvent ) 
              setDataIndex( Number col, String dataIndex ) 
              setEditable( Number col, Boolean editable ) 
              setEditor( Number col, Object editor ) 
              setHidden( Number colIndex, Boolean hidden ) 
              setRenderer( Number col, Function fn ) 
    4、Ext.grid.AbstractSelectionModel 
          主要方法: 
                lock():锁定选择区域 
                unlock():解锁选择区域 
                isLocked():当前选择区域是否被锁定 
    5、Ext.grid.CellSelectionModel 
          主要方法: 
                clearSelections( Boolean preventNotify ):清除选择区域 
                getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex] 
                hasSelection():当前是否有选择区域 
                select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格 
    6、Ext.grid.RowSelectionModel 
          主要配置项: 
                singleSelect:是否单选模式,默认为false,即可以选择多条数据 

          主要方法: 
                clearSelections( [Boolean fast] ):清除所有选择区域 
                deselectRange( Number startRow, Number endRow ):取消范围内的行选择 
                deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的选择状态 
                each( Function fn, [Object scope] ):遍历所有选择行,并调用指定函数。当前被选行将传入该函数中 
                getCount():得到选择的总行数 
                getSelected():得到第一个被选记录 
                getSelections():得到所有被选记录的数组 
                hasNext():判断当前被选行之后是否还有记录可以选择 
                hasPrevious():判断当前被选行之前是否还有记录可以选择 
                hasSelection():是否已选择了数据 
                isIdSelected( String id ):判断指定id的记录是否被选择 
                isSelected( Number/Record index ):判断指定记录或记录索引的数据是否被选择 
                selectAll():选择所有行 
                selectFirstRow():选择第一行 
                selectLastRow( [Boolean keepExisting] ):选择最后行 
                      keepExisting:是否保持已有的选择 
                selectNext( [Boolean keepExisting] ):选择当前选择行的下一行 
                selectPrevious( [Boolean keepExisting] ):选择当前选择行的上一行 
                selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):选择范围内的所有行 
                selectRecords( Array records, [Boolean keepExisting] ):选择一组指定记录 
                selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):选择一行 
                      row:行索引 
                selectRows( Array rows, [Boolean keepExisting] ):选择多行 
                      rows:行索引数组 
    7、Ext.grid.CheckboxSelectionModel 
          主要配置项: 
                singleSelect:是否单选模式,默认为false,即可以选择多条数据 
                checkOnly:是否只能通过点击checkbox列进行选择,默认为false 
                sortable:是否允许checkbox列排序,默认为false 
                width:checkbox列的宽度,默认为20 
    8、Ext.grid.RowNumberer 
          主要配置项: 
                header:行号列表头显示的内容 
                width:列宽,默认为23
    9、Ext.grid.GridView 
          主要配置项: 
                enableRowBody:是否包含行体 
                sortAscText:表格标题菜单中升序的文字描述 
                sortDescText:表格标题菜单中降序的文字描述 
                columnsText:表格标题菜单中列对应的文字描述 
                autoFill:是否自动扩展列以充满整个表格,默认为false 
                forceFit:是否强制调整表格列宽以适用表格的整体宽度,防止出现水平滚动条,默认为false 

          主要方法: 
                focusCell( Number row, Number col ):将焦点移到指定单元格 
                focusRow( Number row ):将焦点移动指定行 
                getCell( Number row, Number col ):取得指定单元格对应的td元素 
                getHeaderCell( Number index ):取得指定表头对应的td元素 
                getRow( Number index ):取得指定行对应的tr元素 
                getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的样式名 
                      record:当前行的数据记录对象 
                      index:当前行的索引 
                      rowParams:渲染时传入到行模板中的配置对象,通过它可以为行体定制样式,该对象只在enableRowBody为true时才生效,可能的属性如下: 
                            body:渲染到行体中的HTML代码片段 
                            bodyStyle:应用到行体tr元素style属性的字符串 
                            cols:应用到行体td元素colspan属性的值,默认为总列数 
                      store:表格数据集 
                refresh( [Boolean headersToo] ):刷新表格组件 
                scrollToTop():滚动表格到顶端

    Ext.TabPanel:

      activeTab:初始激活的tab,索引或者id值,默认为none 
          autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。 
                当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。 
          deferredRender:是否延迟渲染,默认为true。 
          autoTabSelector:默认为'div.x-tab'。 

          resizeTabs:是否可以改变tab的尺寸,默认为false。 
          minTabWidth:tab的最小宽度,默认为30。 
          tabWidth:每个新增加的tab宽度,默认为120。 
          tabTip:tab的提示信息 

          tabPosition:tab位置,可选值有top、bottom,默认为top。 
          enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。 
          closable:tab是否可关闭,默认为false 

          scrollDuration:每次的滚动时长,默认为0.35毫秒。 
          scrollIncrement:每次的滚动步长,默认为100像素。 
          wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。 
    2、主要方法: 
          activate( String/Panel tab ) 
          getActiveTab():获取当前活动的tab 
          get( String/Number key ):根据组件id或者索引获取组件 
          getItem(String id):根据tab id获取tab 
          setActiveTab( String/Number item ) 
          remove( Component/String component, [Boolean autoDestroy] ) 
          removeAll( [Boolean autoDestroy] ) 
    3、范例 

    复制代码
    new Ext.TabPanel({   
        id: "mainTab",   
        renderTo: "div1",   
         500,   
        height: 300,   
        activeTab: 0,   
        defaults: {   
            autoScroll: true,   
            autoHeight:true,   
            style: "padding:5"  
        },   
        items:[   
            {title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},   
            {title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},   
            {title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},   
            {title:"event", iconCls:"save", listeners:{activate:activateHandler}}   
        ],   
        enableTabScroll: true  
    });   
      
    function activateHandler(tab){   
        //alert(tab.title);   
    }   
      
    var index = 0;   
    function addTab(){   
        var tabs = Ext.getCmp("mainTab");   
           
        var t = tabs.getItem("tab"+index);   
        if(t) tabs.remove(t);   
           
        tabs.add({   
            id: "tab" + (++index),   
            title: "NewTab" + index,   
            html: "new tab" + index,   
            closable: true  
        }).show();   
    }   
      
    //按钮渲染到div1元素之前   
    new Ext.Button({   
        text:"add tab",   
        handler:addTab,   
        iconCls:"add"  
    }).render(document.body, "div1");  
    复制代码


    在使用TabPanel时需要注意: 

           1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问 选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。 

           2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用 Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下 deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控 件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置 deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。

  • 相关阅读:
    0125——时钟
    0125——动画2
    0124——动画1
    0124——KVC KVO模式
    0123——单例模式
    0122——简单小动画+微博简单模拟2
    0122——UITabBarController
    0119——UIImageView的一些属性 和 简单动画实现
    12月28号 ios设计简单操作
    12月25号 Category类别
  • 原文地址:https://www.cnblogs.com/mannixiang/p/6558225.html
Copyright © 2011-2022 走看看