序言：

? ?1.本文摘自網(wǎng)絡(luò)，看控件命名像是4.0以前的版本，但控件屬性配置仍然可以借鑒（不足之處，以后項(xiàng)目用到時(shí)再續(xù)完善）。

Ext.form.TimeField:

??配置項(xiàng)：?
?????????? maxValue：列表中允許的最大時(shí)間?
?????????? maxText：當(dāng)時(shí)間大于最大值時(shí)的錯(cuò)誤提示信息?
?????????? minValue：列表中允許的最小時(shí)間?
?????????? minText：當(dāng)時(shí)間小于最小值時(shí)的錯(cuò)誤提示信息?
?????????? increment：兩個(gè)相鄰選項(xiàng)間的時(shí)間間隔，默認(rèn)為15分鐘?
?????????? format：顯示格式，默認(rèn)為“g:i A”。一般使用“H:i:s”?
??????????????? H：帶前綴0的24小時(shí)?
? ? ? ? ? ? ? ? ?i：帶前綴0的分鐘?
??????????????? s：帶前綴0的秒?
?????????? invalidText：當(dāng)時(shí)間值非法時(shí)顯示的提示信息?
?????????? altFormats：多個(gè)時(shí)間輸入格式組成的字符串，不同的格式之間使用“|”進(jìn)行分割

Ext.form.FieldSet

　　　　animCollapse：動(dòng)畫(huà)折疊，默認(rèn)為false?
?????????? checkboxToggle：設(shè)置是否顯示字段集的checkbox選擇框，默認(rèn)為false?
?????????? checkboxName：指定字段集中用于展開(kāi)或隱藏字段集面板的checkbox的名字，該屬性只有在checkboxToggle為true時(shí)生效?
?????????? labelWidth：字段標(biāo)簽的寬度，可以級(jí)聯(lián)到子容器?
?????????? layout：布局，默認(rèn)為form

Ext.form.DateFied

　　　　maxValue：允許選擇的最大日期?
?????????? maxText：當(dāng)日期大于最大值時(shí)的錯(cuò)誤提示信息?
?????????? minValue：允許選擇的最小時(shí)間?
?????????? minText：當(dāng)日期小于最小值時(shí)的錯(cuò)誤提示信息?
?????????? format：日期顯示格式，默認(rèn)為“m/d/y”，一般使用“Y-m-d”?
?????????????? Y：四位年份?
?????????????? m：帶前綴0的月份?
?????????????? d：帶前綴0的日期?
?????????????? y：兩位年份?
?????????????? n：不帶前綴0的月份?
?????????????? j：不帶前綴0的日期?
?????????????? w：星期的數(shù)字，0表示星期日，1代表星期一?
?????????? showToday：是否顯示今天按鈕，默認(rèn)為true?
?????????? altFormats：多個(gè)日期輸入格式組成的字符串，不同的格式之間使用“|”進(jìn)行分割，默認(rèn)值為'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：禁止選擇的日期組成的數(shù)組?
?????????? disabledDatesText：選擇禁選日期時(shí)顯示的提示信息?
?????????? disabledDays：禁止選擇的星期組成的數(shù)組，0代表星期日，1代表星期一?
?????????? disabledDaysText：選擇禁選星期時(shí)顯示的提示信息?
?????????? invalidText：當(dāng)日期值非法時(shí)顯示的提示信息?
???? 方法：?
?????????? getValue()：取得日期值

Ext.form.ComboBox

　　　　displayField：被顯示在下拉框中的字段名?
?????????? editable：是否可編輯，默認(rèn)為true?
?????????? forceSelection：輸入值是否嚴(yán)格為待選列表中存在的值。如果輸入不存在的值，會(huì)自動(dòng)選擇第一個(gè)最接近的值。?
?????????? hiddenName：隱藏字段的名字，如果提供該參數(shù)則一個(gè)隱藏字段將被創(chuàng)建，用來(lái)存儲(chǔ)所選值，當(dāng)表單提交時(shí)在服務(wù)器端可以通過(guò)該名字取得列表中的所選值?
?????????? listWidth：下拉列表的寬度?
?????????? minListWidth：下拉列表的最小寬度，默認(rèn)為70像素?
?????????? loadingText：當(dāng)下拉框加載數(shù)據(jù)時(shí)顯示的提示信息，只有當(dāng)mode='remote'時(shí)才會(huì)生效?
?????????? maxHeight：下拉列表框的最大高度，默認(rèn)為300像素?
?????????? minChars：下拉列表框自動(dòng)選擇前用戶需要輸入的最小字符數(shù)量。mode='remote'默認(rèn)為4，mode='local'默認(rèn)為0?
?????????? mode：下拉列表框的數(shù)據(jù)讀取模式。remote讀取遠(yuǎn)程數(shù)據(jù)，local讀取本地?cái)?shù)據(jù)?
?????????? pageSize：下拉列表框的分頁(yè)大小。該項(xiàng)設(shè)置只在mode='remote'時(shí)生效?
?????????? queryParam：查詢的名字，默認(rèn)為'query'，將被傳遞到查詢字符串中?
?????????? allQuery：一個(gè)發(fā)往服務(wù)器用來(lái)查詢?nèi)啃畔⒌牟樵冏址?#xff0c;默認(rèn)為空字符串''?
?????????? selectOnFocus：當(dāng)獲得焦點(diǎn)時(shí)立刻選擇一個(gè)已存在的列表項(xiàng)。默認(rèn)為false，此項(xiàng)只有在editable=true時(shí)才會(huì)生效?
?????????? store：列表框綁定的數(shù)據(jù)源?
?????????? transform：將頁(yè)面中已存在的元素轉(zhuǎn)換為組合框?
?????????? lazyInit：延時(shí)初始化下拉列表，默認(rèn)為true?
?????????? lazyRender：延時(shí)渲染，默認(rèn)為false?
?????????? triggerAction：設(shè)置單擊觸發(fā)按鈕時(shí)執(zhí)行的默認(rèn)操作，有效值包括all和query，默認(rèn)為query，如果設(shè)置為all則會(huì)執(zhí)行allQuery中設(shè)置的查詢?
?????????? typeAhead：設(shè)置在輸入過(guò)程中是否自動(dòng)選擇匹配的剩余部分文本（選擇第一個(gè)滿足條件的），默認(rèn)為false?
?????????? value：初始化組合框中的值?
?????????? valueField：組合框的值字段?
?????????? valueNotFoundText：值不存在時(shí)的提示信息?
?????????? tpl：Ext模板字符串或模板對(duì)象，可以通過(guò)該配置項(xiàng)自定義下拉列表的顯示方式?
???? 方法：?
?????????? clearValue()：清空字段當(dāng)前值?
?????????? 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：是否允許不選擇，默認(rèn)為true?
?????????? blankText：?
?????????? columns：顯示的列數(shù)，可選值包括：固定值auto、數(shù)值、數(shù)組（整數(shù)、小數(shù)）?
?????????? items：對(duì)象數(shù)組?
?????????? vertical：是否垂直方向顯示對(duì)象，默認(rèn)為false

Ext.form.Checkbox

? boxLabel：復(fù)選框的文字描述?
?????????? checked：復(fù)選框是否被選擇，默認(rèn)為false?
?????????? handler：當(dāng)checked值改變時(shí)觸發(fā)的函數(shù)，函數(shù)包含兩個(gè)參數(shù)：checkbox、checked?
?????????? inputValue：?
???? 方法：?
?????????? getValue()：返回復(fù)選框的checked狀態(tài)?
?????????? setValue( Boolean/String checked )：

Ext.form.NumberField

? 　　　?allowDecimals：是否允許輸入小數(shù)，默認(rèn)為true?
?????????? allowNegative：是否允許輸入負(fù)數(shù)，默認(rèn)為true?
?????????? baseChars：輸入的有效數(shù)字集合，默認(rèn)為'0123456789'?
?????????? decimalPrecision：數(shù)字的精度，默認(rèn)保留小數(shù)點(diǎn)后2位?
?????????? decimalSeparator：十進(jìn)制分隔符，默認(rèn)為'.'?
?????????? maxValue：允許輸入的最大數(shù)值?
?????????? maxText：超過(guò)最大值之后的提示信息?
?????????? minValue：允許輸入的最小數(shù)值?
?????????? minText：超過(guò)最小值之后的提示信息?
?????????? nanText：輸入非有效數(shù)值之后的提示信息

Ext.form.TextArea

　　 ?preventScrollbars：是否禁止出現(xiàn)滾動(dòng)條，默認(rèn)為false

Ext.form.TextField

　　　?allowBlank：是否允許為空，默認(rèn)為true?
????????? blankText：空驗(yàn)證失敗后顯示的提示信息?
????????? emptyText：在一個(gè)空字段中默認(rèn)顯示的信息?
????????? grow：字段是否自動(dòng)伸展和收縮，默認(rèn)為false?
????????? growMin：收縮的最小寬度?
????????? growMax：伸展的最大寬度?
????????? inputType：字段類型：默認(rèn)為text?
????????? maskRe：用于過(guò)濾不匹配字符輸入的正則表達(dá)式?
????????? maxLength：字段允許輸入的最大長(zhǎng)度?
????????? maxLengthText：最大長(zhǎng)度驗(yàn)證失敗后顯示的提示信息?
????????? minLength：字段允許輸入的最小長(zhǎng)度?
????????? minLengthText：最小長(zhǎng)度驗(yàn)證失敗后顯示的提示信息?
????????? regex：正則表達(dá)式?
????????? regexText：正則表達(dá)式驗(yàn)證失敗后顯示的提示信息?
????????? vtype：驗(yàn)證類型的名字?
?????????????? alpha：限制只能輸入字母?
?????????????? alphanum：限制只能輸入字母和數(shù)字?
?????????????? email?
?????????????? url?
????????? vtypeText：驗(yàn)證失敗時(shí)的提示信息?
????????? validator：自定義驗(yàn)證函數(shù)?
????????? selectOnFocus：當(dāng)字段得到焦點(diǎn)時(shí)自動(dòng)選擇已存在的文本，默認(rèn)為false

Ext.form.Field

　　　?name：字段名?
????????? value：字段的初始化值?
????????? disabled：字段是否不可用，默認(rèn)為false?
????????? fieldLabel：字段標(biāo)簽說(shuō)明?
????????? hideLabel：隱藏字段標(biāo)簽，默認(rèn)為false?
????????? labelSeparator：字段標(biāo)簽與字段之間的分隔符，默認(rèn)為':'?
????????? labelStyle：字段標(biāo)簽樣式?
????????? inputType：默認(rèn)為text?
????????? invalidClass：默認(rèn)為x-form-invalid?
????????? invalidText：字段非法文本提示?
????????? msgTarget：錯(cuò)誤信息顯示的位置，默認(rèn)為qtip?
????????????? qtip：顯示一個(gè)浮動(dòng)的提示信息?
????????????? title：顯示一個(gè)瀏覽器的浮動(dòng)提示信息?
????????????? under：在字段下方顯示一個(gè)提示信息?
????????????? side：在字段右邊顯示一個(gè)提示信息?
????????? readOnly：字段是否只讀，默認(rèn)為false?
????????? validateOnBlur：字段在失去焦點(diǎn)時(shí)被驗(yàn)證，默認(rèn)為true?
???? 方法：?
????????? clearInvalid()：?
????????? getRawValue()?
????????? setRawValue( Mixed value )?
????????? getValue()?
????????? setValue( Mixed value )?
????????? isDirty()：字段值在裝載后是否被修改過(guò)?
????????? isValid( Boolean preventMark )：當(dāng)前字段值是否合法?
????????? markInvalid( [String msg] )?
????????? validate()?
????????? reset()

Ext.form.FormPanel

items：一個(gè)元素或元素?cái)?shù)組?
????????? buttons：一個(gè)按鈕配置對(duì)象的數(shù)組，按鈕將被添加到表單頁(yè)腳中?
????????? buttonAlign：按鈕的對(duì)齊方式，可選值有l(wèi)eft、center、right，默認(rèn)為center?
????????? labelWidth：表單標(biāo)簽的寬度?
????????? labelAlign：表單標(biāo)簽的對(duì)齊方式，可選值有l(wèi)eft、top、right，默認(rèn)為left?
????????? labelSeparator：字段標(biāo)簽與字段之間的分隔符，默認(rèn)為':'?
????????? minButtonWidth：按鈕的最小寬度，默認(rèn)為75?
???? 方法：?
????????? getForm() : Ext.form.BasicForm?
????????? load( Object options )?
????????? startMonitoring()?
????????? stopMonitoring()

Ext.form.BaseicForm

　　　?baseParams：傳遞到請(qǐng)求中的參數(shù)?
????????? method：表單的提交方式，有效值包括GET、POST?
????????? url：表單默認(rèn)的提交路徑?
????????? fileUpload：表單是否進(jìn)行文件上傳?
????????? timeout：表單動(dòng)作的超時(shí)時(shí)間，默認(rèn)為30秒?
????????? trackResetOnLoad：是否在表單初次創(chuàng)建時(shí)清楚數(shù)據(jù)?
??? 方法：?
????????? doAction( String/Object actionName, [Object options] )：執(zhí)行一個(gè)預(yù)訂的動(dòng)作，可用選項(xiàng)包括：?
????????????? url：動(dòng)作提交的路徑?
????????????? method：表單的提交方式，有效值包括GET、POST?
????????????? params：傳遞到請(qǐng)求中的參數(shù)?
????????????? headers：?
????????????? success：執(zhí)行成功后回調(diào)的函數(shù)，包括兩個(gè)參數(shù)：form和action?
????????????? failure：執(zhí)行失敗后回調(diào)的函數(shù)，包括兩個(gè)參數(shù)：form和action?
????????????? clientValidation：是否客戶端驗(yàn)證?
????????? clearInvalid()：清除表單中所有的無(wú)效驗(yàn)證信息?
????????? findField( String id )：查找表單字段?
????????? getValues( [Boolean asString] )：?
????????? isDirty()：表單數(shù)據(jù)是否被更改過(guò)?
????????? isValid()：客戶端驗(yàn)證是否成功?
????????? load( Object options )：執(zhí)行表單讀取動(dòng)作?
????????? loadRecord( Record record )：從一個(gè)數(shù)據(jù)記錄中讀取數(shù)據(jù)到表單中?
????????? markInvalid( Array/Object errors )：成批設(shè)置表單字段為驗(yàn)證無(wú)效?
????????? reset()：重置表單?
????????? setValues( Array/Object values )：成批設(shè)置表單字段值?
????????? submit( Object options )：執(zhí)行表單提交動(dòng)作?
????????? updateRecord( Record record )：持久化表單數(shù)據(jù)到記錄集中

Ext.form.Action

　　　　success：執(zhí)行成功后回調(diào)的函數(shù)，包括兩個(gè)參數(shù)：form和action?
????????? failure：執(zhí)行失敗后回調(diào)的函數(shù)，包括兩個(gè)參數(shù)：form和action?
????????? method：表單的提交方式，有效值包括GET、POST?
????????? params：傳遞到請(qǐng)求中的參數(shù)?
????????? url：動(dòng)作提交的路徑?
????????? waitMsg：動(dòng)作執(zhí)行時(shí)顯示的等待信息?
???? 屬性：?
????????? Action.CLIENT_INVALID：客戶端驗(yàn)證錯(cuò)誤?
????????? Action.CONNECT_FAILURE：通信錯(cuò)誤?
????????? Action.LOAD_FAILURE：加載數(shù)據(jù)時(shí)，沒(méi)有包含data屬性的字段被返回?
????????? Action.SERVER_INVALID：服務(wù)端驗(yàn)證錯(cuò)誤?
????????? failureType：錯(cuò)誤類型?
????????? result：包含布爾類型的success屬性和其他屬性，如{success: true, msg: 'ok'}?
????????? type：動(dòng)作類型，可選值有submit和load?
?????????????? Ext.form.Action.Submit：返回的信息中要包含一個(gè)布爾類型的success屬性和一個(gè)可選的errors屬性?
?????????????? Ext.form.Action.Load：返回的信息中要包含一個(gè)布爾類型的success屬性和一個(gè)data屬性

Ext.grid.EditorGridPanel

　　　　clicksToEdit：設(shè)置點(diǎn)擊單元格進(jìn)入編輯模式的點(diǎn)擊次數(shù)，默認(rèn)為2?
??????????? autoEncode：是否自動(dòng)編碼/解碼HTML內(nèi)容，默認(rèn)為false?
??????????? selModel：默認(rèn)為Ext.grid.CellSelectionModel?
??
????? 主要方法：?
??????????? startEditing( Number rowIndex, Number colIndex )：開(kāi)始編輯指定單元格?
??????????? stopEditing( [Boolean cancel] )：結(jié)束編輯操作

Ext.grid.GroupinView

　　　　enableGroupingMenu：是否在表頭菜單中進(jìn)行分組控制，默認(rèn)為true?
??????????? groupByText：表頭菜單中分組控制的菜單文字，默認(rèn)為'Group By This Field'?
??
??????????? enableNoGroups：是否允許用戶關(guān)閉分組功能，默認(rèn)為true?
??????????? showGroupsText：在表頭菜單中啟用分組和禁用分組的菜單文字，默認(rèn)為'Show in Groups'?
??
??????????? groupTextTpl：用于渲染分組信息的模板，默認(rèn)為'{text}'，常用的可選值有：?
????????????????? text：列標(biāo)題:組字段值?
????????????????? gvalue：組字段的值?
????????????????? startRow：組行索引?
??
??????????? enableGrouping：是否對(duì)數(shù)據(jù)分組，默認(rèn)為true?
??????????? hideGroupedColumn：是否隱藏分組列，默認(rèn)為false?
??????????? ignoreAdd：在向表格中添加數(shù)據(jù)時(shí)是否刷新表格，默認(rèn)為false?
??????????? showGroupName：是否在分組行上顯示分組字段的名字，默認(rèn)為true?
??????????? startCollapsed：初次顯示時(shí)分組是否處于收縮狀態(tài)，默認(rèn)為false?
??
????? 主要方法：?
??????????? collapseAllGroups()：收縮所有分組行?
??????????? expandAllGroups()：展開(kāi)所有分組行?
??????????? getGroupId( String value )：根據(jù)分組字段值取得組id?
??????????? toggleAllGroups( [Boolean expanded] )：切換所有分組行的展開(kāi)或收縮狀態(tài)?
??????????? toggleGroup( String groupId, [Boolean expanded] )：切換指定分組行的展開(kāi)或收縮狀態(tài)?


2、Ext.data.GroupingStore?
????? groupField：分組字段?

????? groupOnSort：是否在分組字段上排序，默認(rèn)為false?
????? remoteGroup：是否遠(yuǎn)程分組數(shù)據(jù)，默認(rèn)為false。如果是遠(yuǎn)程分組數(shù)據(jù)，則通過(guò)groupBy參數(shù)發(fā)送分組字段名?

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實(shí)例", renderTo: "div1", width: 500, height: 300, frame: true, tbar: [ { text: "展開(kāi)/收縮", 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"}, //數(shù)據(jù)排序 groupField: "personGender" //分組字段 }), view: new Ext.grid.GroupingView({ sortAscText: "升序", sortDescText: "降序", columnsText: "表格字段", groupByText: "使用當(dāng)前字段進(jìn)行分組", showGroupsText: "表格分組", groupTextTpl: "{text}(共{[values.rs.length]}條)" }), columns: [ {id:"personId", header:"編號(hào)", 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：表格的數(shù)據(jù)集?
????????? columns：表格列模式的配置數(shù)組，可自動(dòng)創(chuàng)建ColumnModel列模式?
????????? autoExpandColumn：自動(dòng)充滿表格未用空間的列，參數(shù)為列id，該id不能為0?
????????? stripeRows：表格是否隔行換色，默認(rèn)為false?
??
????????? cm、colModel：表格的列模式，渲染表格時(shí)必須設(shè)置該配置項(xiàng)?
????????? sm、selModel：表格的選擇模式，默認(rèn)為Ext.grid.RowSelectionModel?
????????? enableHdMenu：是否顯示表頭的上下文菜單，默認(rèn)為true?
????????? enableColumnHide：是否允許通過(guò)標(biāo)題中的上下文菜單隱藏列，默認(rèn)為true?
????????? loadMask：是否在加載數(shù)據(jù)時(shí)顯示遮罩效果，默認(rèn)為false?
????????? view：表格視圖，默認(rèn)為Ext.grid.GridView?
????????? viewConfig：表格視圖的配置對(duì)象?
??
????????? autoExpandMax：自動(dòng)擴(kuò)充列的最大寬度，默認(rèn)為1000?
????????? autoExpandMin：自動(dòng)擴(kuò)充列的最小寬度，默認(rèn)為50?
????????? columnLines：是否顯示列分割線，默認(rèn)為false?
????????? disableSelection：是否禁止行選擇，默認(rèn)為false?
????????? enableColumnMove：是否允許拖放列，默認(rèn)為true?
????????? enableColumnResize：是否允許改變列寬，默認(rèn)為true?
????????? hideHeaders：是否隱藏表頭，默認(rèn)為false?
????????? maxHeight：最大高度?
????????? minColumnWidth：最小列寬，默認(rèn)為25?
????????? trackMouseOver：是否高亮顯示鼠標(biāo)所在的行，默認(rèn)為true?
??
????? 主要方法：?
????????? getColumnModel()：取得列模式?
????????? getSelectionModel()：取得選擇模式?
????????? getStore()：取得數(shù)據(jù)集?
????????? getView()：取得視圖對(duì)象?
????????? reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使用一個(gè)新的數(shù)據(jù)集和列模式重新配置表格組件?

2、Ext.grid.Column?
????? 主要配置項(xiàng)：?
????????? id：列id?
????????? header：表頭文字?
????????? dataIndex：設(shè)置列與數(shù)據(jù)集中數(shù)據(jù)記錄的對(duì)應(yīng)關(guān)系，值為數(shù)據(jù)記錄中的字段名稱。如果沒(méi)有設(shè)置該項(xiàng)則使用列索引與數(shù)據(jù)記錄中字段的索引進(jìn)行對(duì)應(yīng)?
????????? width：列寬?
????????? align：列數(shù)據(jù)的對(duì)齊方式?
??
????????? hidden：是否隱藏列，默認(rèn)為false?
????????? fixed：是否固定列寬，默認(rèn)為false?
????????? menuDisabled：是否禁用列的上下文菜單，默認(rèn)為false?
????????? resizable：是否允許改變列寬，默認(rèn)為true?
????????? sortable：是否允許排序，默認(rèn)為true?
????????? renderer：設(shè)置列的自定義單元格渲染函數(shù)?
??????????????? 傳入函數(shù)的參數(shù)有：?
??????????????????? value：數(shù)據(jù)的原始值?
??????????????????? metadata：元數(shù)據(jù)對(duì)象，用于設(shè)置單元格的樣式和屬性，該對(duì)象包含的屬性有：?
????????????????????????? css：應(yīng)用到單元格TD元素上的樣式名稱?
????????????????????????? attr：一個(gè)HTML屬性定義字符串，例如'style="color:blue"'?
??????????????????? record：當(dāng)前數(shù)據(jù)記錄對(duì)象?
??????????????????? rowIndex：單元格的行索引?
??????????????????? colIndex：單元格的列索引?
??????????????????? store：數(shù)據(jù)集對(duì)象?
????
????????? xtype：列渲染器類型，默認(rèn)為gridcolumn，其它可選值有booleancolumn、numbercolumn、datecolumn、templatecolumn等?
??
????????? editable：是否可編輯，默認(rèn)為true?
????????? editor：編輯器?
??
????????? groupName：?
????????? emptyGroupText：?
????????? groupable：?

3、Ext.grid.ColumnModel?
????? 主要配置項(xiàng)：?
????????? columns：字段數(shù)組?
????????? defaultSortable：是否進(jìn)行默認(rèn)排序，默認(rèn)為false?
????????? defaultWidth：默認(rèn)寬度?
??
????? 主要方法：?
????????? findColumnIndex( String col )：根據(jù)給定的dataIndex查找列索引?
????????? getColumnById( String id )：取得指定id對(duì)應(yīng)的列?
????????? getColumnCount( Boolean visibleOnly )：取得列總數(shù)?
????????? getColumnHeader( Number col )：取得列的表頭?
????????? getColumnId( Number index )：取得列id?
????????? getDataIndex( Number col )：取得列對(duì)應(yīng)的數(shù)據(jù)字段名?
????????? 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()：鎖定選擇區(qū)域?
??????????? unlock()：解鎖選擇區(qū)域?
??????????? isLocked()：當(dāng)前選擇區(qū)域是否被鎖定?
5、Ext.grid.CellSelectionModel?
????? 主要方法：?
??????????? clearSelections( Boolean preventNotify )：清除選擇區(qū)域?
??????????? getSelectedCell()：取得當(dāng)前選擇的單元格，返回一數(shù)組，其格式：[rowIndex, colIndex]?
??????????? hasSelection()：當(dāng)前是否有選擇區(qū)域?
??????????? select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )：選擇指定單元格?
6、Ext.grid.RowSelectionModel?
????? 主要配置項(xiàng)：?
??????????? singleSelect：是否單選模式，默認(rèn)為false，即可以選擇多條數(shù)據(jù)?

????? 主要方法：?
??????????? clearSelections( [Boolean fast] )：清除所有選擇區(qū)域?
??????????? deselectRange( Number startRow, Number endRow )：取消范圍內(nèi)的行選擇?
??????????? deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的選擇狀態(tài)?
??????????? each( Function fn, [Object scope] )：遍歷所有選擇行，并調(diào)用指定函數(shù)。當(dāng)前被選行將傳入該函數(shù)中?
??????????? getCount()：得到選擇的總行數(shù)?
??????????? getSelected()：得到第一個(gè)被選記錄?
??????????? getSelections()：得到所有被選記錄的數(shù)組?
??????????? hasNext()：判斷當(dāng)前被選行之后是否還有記錄可以選擇?
??????????? hasPrevious()：判斷當(dāng)前被選行之前是否還有記錄可以選擇?
??????????? hasSelection()：是否已選擇了數(shù)據(jù)?
??????????? isIdSelected( String id )：判斷指定id的記錄是否被選擇?
??????????? isSelected( Number/Record index )：判斷指定記錄或記錄索引的數(shù)據(jù)是否被選擇?
??????????? selectAll()：選擇所有行?
??????????? selectFirstRow()：選擇第一行?
??????????? selectLastRow( [Boolean keepExisting] )：選擇最后行?
????????????????? keepExisting：是否保持已有的選擇?
??????????? selectNext( [Boolean keepExisting] )：選擇當(dāng)前選擇行的下一行?
??????????? selectPrevious( [Boolean keepExisting] )：選擇當(dāng)前選擇行的上一行?
??????????? selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：選擇范圍內(nèi)的所有行?
??????????? selectRecords( Array records, [Boolean keepExisting] )：選擇一組指定記錄?
??????????? selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：選擇一行?
????????????????? row：行索引?
??????????? selectRows( Array rows, [Boolean keepExisting] )：選擇多行?
????????????????? rows：行索引數(shù)組?
7、Ext.grid.CheckboxSelectionModel?
????? 主要配置項(xiàng)：?
??????????? singleSelect：是否單選模式，默認(rèn)為false，即可以選擇多條數(shù)據(jù)?
??????????? checkOnly：是否只能通過(guò)點(diǎn)擊checkbox列進(jìn)行選擇，默認(rèn)為false?
??????????? sortable：是否允許checkbox列排序，默認(rèn)為false?
??????????? width：checkbox列的寬度，默認(rèn)為20?
8、Ext.grid.RowNumberer?
????? 主要配置項(xiàng)：?
??????????? header：行號(hào)列表頭顯示的內(nèi)容?
??????????? width：列寬，默認(rèn)為23
9、Ext.grid.GridView?
????? 主要配置項(xiàng)：?
??????????? enableRowBody：是否包含行體?
??????????? sortAscText：表格標(biāo)題菜單中升序的文字描述?
??????????? sortDescText：表格標(biāo)題菜單中降序的文字描述?
??????????? columnsText：表格標(biāo)題菜單中列對(duì)應(yīng)的文字描述?
??????????? autoFill：是否自動(dòng)擴(kuò)展列以充滿整個(gè)表格，默認(rèn)為false?
??????????? forceFit：是否強(qiáng)制調(diào)整表格列寬以適用表格的整體寬度，防止出現(xiàn)水平滾動(dòng)條，默認(rèn)為false?

????? 主要方法：?
??????????? focusCell( Number row, Number col )：將焦點(diǎn)移到指定單元格?
??????????? focusRow( Number row )：將焦點(diǎn)移動(dòng)指定行?
??????????? getCell( Number row, Number col )：取得指定單元格對(duì)應(yīng)的td元素?
??????????? getHeaderCell( Number index )：取得指定表頭對(duì)應(yīng)的td元素?
??????????? getRow( Number index )：取得指定行對(duì)應(yīng)的tr元素?
??????????? getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的樣式名?
????????????????? record：當(dāng)前行的數(shù)據(jù)記錄對(duì)象?
????????????????? index：當(dāng)前行的索引?
????????????????? rowParams：渲染時(shí)傳入到行模板中的配置對(duì)象，通過(guò)它可以為行體定制樣式，該對(duì)象只在enableRowBody為true時(shí)才生效，可能的屬性如下：?
??????????????????????? body：渲染到行體中的HTML代碼片段?
??????????????????????? bodyStyle：應(yīng)用到行體tr元素style屬性的字符串?
??????????????????????? cols：應(yīng)用到行體td元素colspan屬性的值，默認(rèn)為總列數(shù)?
????????????????? store：表格數(shù)據(jù)集?
??????????? refresh( [Boolean headersToo] )：刷新表格組件?
??????????? scrollToTop()：滾動(dòng)表格到頂端

Ext.TabPanel:

　　activeTab：初始激活的tab，索引或者id值，默認(rèn)為none?
????? autoTabs：是否自動(dòng)將帶有'x-tab'樣式類的div轉(zhuǎn)成tabs添加到TabPanel中，默認(rèn)為false。?
??????????? 當(dāng)該配置項(xiàng)設(shè)為true時(shí)，需要設(shè)置deferredRender為false，還必須使用applyTo。?
????? deferredRender：是否延遲渲染，默認(rèn)為true。?
????? autoTabSelector：默認(rèn)為'div.x-tab'。?

????? resizeTabs：是否可以改變tab的尺寸，默認(rèn)為false。?
????? minTabWidth：tab的最小寬度，默認(rèn)為30。?
????? tabWidth：每個(gè)新增加的tab寬度，默認(rèn)為120。?
????? tabTip：tab的提示信息?

????? tabPosition：tab位置，可選值有top、bottom，默認(rèn)為top。?
????? enableTabScroll：是否允許Tab溢出時(shí)可以滾動(dòng)，默認(rèn)為false。?
????? closable：tab是否可關(guān)閉，默認(rèn)為false?

????? scrollDuration：每次的滾動(dòng)時(shí)長(zhǎng)，默認(rèn)為0.35毫秒。?
????? scrollIncrement：每次的滾動(dòng)步長(zhǎng)，默認(rèn)為100像素。?
????? wheelIncrement：每次鼠標(biāo)滑輪的滾動(dòng)步長(zhǎng)，默認(rèn)為20像素。?
2、主要方法：?
????? activate( String/Panel tab )?
????? getActiveTab()：獲取當(dāng)前活動(dòng)的tab?
????? get( String/Number key )：根據(jù)組件id或者索引獲取組件?
????? getItem(String id)：根據(jù)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時(shí)需要注意：?

?

?????? 1、在創(chuàng)建Ext.TabPanel時(shí)deferredRender配置項(xiàng)經(jīng)常會(huì)被忽略。該配置項(xiàng)的默認(rèn)值是true。true表示只有在用戶第一次訪問(wèn) 選項(xiàng)卡時(shí)，該選項(xiàng)卡的panel才會(huì)被渲染。 所以當(dāng)我們有可能使用腳本操作選項(xiàng)卡時(shí)，謹(jǐn)記將該配置項(xiàng)設(shè)置為false。?

?????? 2、在FormPanel中使用TabPanel，如果在TabPanel中不定義deferredRender的值為false，那么，當(dāng)你使用 Load方法為Form加載數(shù)據(jù)，或使用setValue為沒(méi)有激活過(guò)的Panel的控件賦值時(shí)，將會(huì)發(fā)生錯(cuò)誤。原因是，在默認(rèn)設(shè)置下 deferredRender為true，TabPanel并不會(huì)渲染所有Panel上的控件，只有在該P(yáng)anel被激活時(shí)才渲染控件，所以當(dāng)你為這些控 件設(shè)置數(shù)據(jù)時(shí)，將會(huì)找不到這些控件，會(huì)出現(xiàn)錯(cuò)誤。因而，在FormPanel中使用TabPanel，一定要在TabPanel中設(shè)置 deferredRender的值為false，強(qiáng)制TabPanel在Layout渲染時(shí)同時(shí)渲染所有Panel上的控件。

轉(zhuǎn)載于:https://www.cnblogs.com/forgeting/p/4380652.html

總結(jié)

以上是生活随笔為你收集整理的ExtJs控件属性配置详细（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。