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] )：切換指定分組行的展開或收縮狀態 


二、Ext.data.GroupingStore 
      groupField：分組字段 

      groupOnSort：是否在分組字段上排序，默認爲false 
      remoteGroup：是否遠程分組數據，默認爲false。若是是遠程分組數據，則經過groupBy參數發送分組字段名 

三、範例源碼 

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",   
    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 )：使用一個新的數據集和列模式從新配置表格組件 

二、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： 

三、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 ) 
四、Ext.grid.AbstractSelectionModel 
      主要方法： 
            lock()：鎖定選擇區域 
            unlock()：解鎖選擇區域 
            isLocked()：當前選擇區域是否被鎖定 
五、Ext.grid.CellSelectionModel 
      主要方法： 
            clearSelections( Boolean preventNotify )：清除選擇區域 
            getSelectedCell()：取得當前選擇的單元格，返回一數組，其格式：[rowIndex, colIndex] 
            hasSelection()：當前是否有選擇區域 
            select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：選擇指定單元格 
六、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：行索引數組 
七、Ext.grid.CheckboxSelectionModel 
      主要配置項： 
            singleSelect：是否單選模式，默認爲false，便可以選擇多條數據 
            checkOnly：是否只能經過點擊checkbox列進行選擇，默認爲false 
            sortable：是否容許checkbox列排序，默認爲false 
            width：checkbox列的寬度，默認爲20 
八、Ext.grid.RowNumberer 
      主要配置項： 
            header：行號列表頭顯示的內容 
            width：列寬，默認爲23
九、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像素。 
二、主要方法： 
      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] ) 
三、範例 

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時須要注意： 

 

       一、在建立Ext.TabPanel時deferredRender配置項常常會被忽略。該配置項的默認值是true。true表示只有在用戶第一次訪問 選項卡時，該選項卡的panel纔會被渲染。 因此當咱們有可能使用腳本操做選項卡時，謹記將該配置項設置爲false。 

       二、在FormPanel中使用TabPanel，若是在TabPanel中不定義deferredRender的值爲false，那麼，當你使用 Load方法爲Form加載數據，或使用setValue爲沒有激活過的Panel的控件賦值時，將會發生錯誤。緣由是，在默認設置下 deferredRender爲true，TabPanel並不會渲染全部Panel上的控件，只有在該Panel被激活時才渲染控件，因此當你爲這些控 件設置數據時，將會找不到這些控件，會出現錯誤。於是，在FormPanel中使用TabPanel，必定要在TabPanel中設置 deferredRender的值爲false，強制TabPanel在Layout渲染時同時渲染全部Panel上的控件。