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",   
    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( 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",   
    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上的控件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章