ExtJs常用控件属性

ExtJs 专栏收录该内容
28 篇文章 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( Stringquery, Boolean forceAll ):
           getValue():
           getStore():
           setValue( Stringvalue ):

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( BooleanpreventMark ):当前字段值是否合法
          markInvalid( [Stringmsg] )
          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/ObjectactionName, [Object options] ):执行一个预订的动作,可用选项包括:
             url:动作提交的路径
             method:表单的提交方式,有效值包括GET、POST
             params:传递到请求中的参数
             headers:
             success:执行成功后回调的函数,包括两个参数:form和action
             failure:执行失败后回调的函数,包括两个参数:form和action
             clientValidation:是否客户端验证
          clearInvalid():清除表单中所有的无效验证信息
          findField( String id ):查找表单字段
          getValues( [BooleanasString] ):
          isDirty():表单数据是否被更改过
          isValid():客户端验证是否成功
          load( Object options ):执行表单读取动作
          loadRecord( Recordrecord ):从一个数据记录中读取数据到表单中
          markInvalid(Array/Object errors ):成批设置表单字段为验证无效
          reset():重置表单
          setValues( Array/Objectvalues ):成批设置表单字段值
          submit( Object options ):执行表单提交动作
          updateRecord( Recordrecord ):持久化表单数据到记录集中

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,"女",newDate(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",  
    width: 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:"编号", width:50,dataIndex:"personId"},  
        {id:"personName",header:"姓名", width:70,dataIndex:"personName"},  
        {id:"personAge",header:"年龄", width:45,dataIndex:"personAge"},  
        {id:"personGender",header:"性别", width:45,dataIndex:"personGender"},  
        {id:"personBirth",header:"出生日期", width: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( Stringcol ):根据给定的dataIndex查找列索引
          getColumnById( String id):取得指定id对应的列
          getColumnCount( BooleanvisibleOnly ):取得列总数
          getColumnHeader( Numbercol ):取得列的表头
          getColumnId( Numberindex ):取得列id
          getDataIndex( Number col):取得列对应的数据字段名
          getIndexById( String id):取得列索引
          getTotalWidth( BooleanincludeHidden )
          isCellEditable( NumbercolIndex, Number rowIndex )
          isFixed()
          isHidden( NumbercolIndex )
          setColumnHeader( Numbercol, String header )
          setColumnWidth( Numbercol, Number width, Boolean suppressEvent )
          setDataIndex( Numbercol, String dataIndex )
          setEditable( Number col,Boolean editable )
          setEditor( Number col,Object editor )
          setHidden( NumbercolIndex, 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], [BooleanpreventFocus], [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, [BooleanautoDestroy] )
      removeAll( [Boolean autoDestroy] )
3、范例
new Ext.TabPanel({  
    id: "mainTab",  
    renderTo: "div1",  
    width: 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上的控件。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值