1.Ext xtype類型
Ext xtype 類型
xtype Class
------------- ------------------
box Ext.BoxComponent 具有邊框屬性的組件
button Ext.Button 按鈕
colorpalette Ext.ColorPalette 調色板
component Ext.Component 組件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 數據顯示視圖
datepicker Ext.DatePicker 日期選擇面板
editor Ext.Editor 編輯器
editorgrid Ext.grid.EditorGridPanel 可編輯的表格
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具欄中的間隔
panel Ext.Panel 面板
progress Ext.ProgressBar 進度條
splitbutton Ext.SplitButton 可分裂的按鈕
tabpanel Ext.TabPanel 選項面板
treepanel Ext.tree.TreePanel 樹
viewport Ext.ViewPort 視圖
window Ext.Window 窗口
工具欄組件有
---------------------------------------
toolbar Ext.Toolbar 工具欄
tbbutton Ext.Toolbar.Button 按鈕
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具條項目
tbseparator Ext.Toolbar.Separator 工具欄分隔符
tbspacer Ext.Toolbar.Spacer 工具欄空白
tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕
tbtext Ext.Toolbar.TextItem 工具欄文本項
表單及字段組件包含：
---------------------------------------
form Ext.FormPanel Form面板
checkbox Ext.form.Checkbox checkbox錄入框
combo Ext.form.ComboBox combo選擇項
datefield Ext.form.DateField 日期選擇項
field Ext.form.Field 表單字段
fieldset Ext.form.FieldSet 表單字段組
hidden Ext.form.Hidden 表單隱藏域
htmleditor Ext.form.HtmlEditor html編輯器
numberfield Ext.form.NumberField 數字編輯器
radio Ext.form.Radio 單選按鈕
textarea Ext.form.TextArea 區域文本框
textfield Ext.form.TextField 表單文本框
timefield Ext.form.TimeField 時間錄入項
trigger Ext.form.TriggerField 觸發錄入項
如果要使輸入域爲密碼類型可以使用
inputType: 'password'
如果：
{xtype:'textfield',inputType: 'password',fieldLabel: '密碼',name: 'PASSWORD',allowBlank:false,anchor:'95%'}
2.Ext.form.TextField組件
//這裏是把TextField很重要的屬性列出來 實際在應用的時候不需要將每個屬性都列出 也許只需要一個屬性就夠了。
function ready()
{
Ext.QuickTips.init();
var textfieldName = new Ext.form.TextField
({
id:"textfieldName",
allowBlank:false,//默認是true,如果是false,就是不允許空
//假如不爲空時，定義提示信息 默認的提示信息是：This field is required
//要使提示內容出現，需要添加 Ext.QuickTips.init();
blankText:"請輸入數據",
disabled:false,//默認是false
emptyText:"請正確輸入數據",//默認是null
fieldLabel:"用戶名稱",//默認是""
height:"auto",//默認是auto
hidden:false,//默認是false
hideLabel:false,//默認是false
hideMode:"offsets",//默認display,可以取值：display，offsets，visibility
inputType:"text",//輸入類型 這個很重要，可以是radio, text, password, file 默認是text
invalidText:"invalidText：只能夠輸入數字",//默認是：The value in this field is invalid
maxLength:100,//能夠輸入的內容的最大長度
maxLengthText:"輸入內容太長了",//超出最大長度的設置信息
minLength:2,//能夠輸入的內容的最小長度
minLengthText:"輸入內容太短了",//沒有達到最小長度的設置信息
readOnly:false,//內容是否只讀，默認false
regex:/^\d$/, //正則表達式 這裏假設只允許輸入數字 如果輸入的不是數字 就會出現下面定義的提示信息
regexText:"regexText：只能夠輸入數字", //定義不符合正則表達式的提示信息
validateOnBlur:true,//默認是true,失去焦點時驗證
validationDelay:300,//默認是250,驗證延遲時間,毫秒數
validationEvent:"click", //驗證事件 默認是keyup 可以是String/Boolean
//自定義的驗證函數 當輸入的數據不符合正則表達式的要求時，就會執行這個函數
validator:function(){Ext.Msg.alert("提示信息","只能夠輸入數字");},
value:"",//自定義的信息 默認是：undefined
//x:number,y:number,在容器中的x,y座標
width:"auto",//默認是auto
renderTo:"Bind_TextField"
});
3.ComboBox組件的使用
1.服務器數據作爲ComboBox的數據源實例
首先從服務器獲取json數據：
public string ServerData="['湖北','江西','安徽']";
Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,//獲取ServerData的string值，不要用""引起來，否則就不是object數據，而是字符串，這是一個很巧妙的關鍵點：把服務器的字符串轉化爲js的object數據，是不是超級方便。
emptyText:'請選擇一個省份....',
applyTo: 'combo'
});
});
<input type="text" id="combo" size="20"/>
我們就通過<%=ServerData%>這樣的方式獲取到了服務器最簡單的屬性數據。問題來了，js和html怎麼調用c#後臺
的變量和方法？（變量的調用上面剛剛介紹）
6.js和html怎麼調用c#後臺的變量和方法
關於這個話題，我不多說，網上很多講解，在此僅簡單說明
1.js調用c#後臺變量，參考上面，注意，如果想獲取string類型，請在js裏用引號 var str="<%=ServerData%>"(返回"['湖北','江西','安徽']")
2.js調用c#後臺方法：
public string ServerData()
{
return "fdfdfdfdsf";
}
前臺代碼：-->
<input id="Text2" type="text" value="<%=ServerData()%>"/>
3.js調用c#後臺帶參數的方法
{
return pram+"，我是參數傳進來的";
}
主要是處理好js的引號問題，多嘗試就會正確-->
<script>alert('<%=ServerData("謙虛的天下") %>');</script>
好了，現在我們有了js獲取後臺數據的方法手段，不怕不怕啦，不過，這只是一小步。
7.ComboBox的數據源store格式詳解
在前面的例子裏面，我們一直給ComboBox的數據源store賦值一維數組，其實store支持多維和Store.data.Store類型。
1.一維數組：["江西","湖北"]，值同時賦給ComboBox的value和text
2.二維和多維數組：[["one","bbar","111"],["two","tbar","222"]],第一維和第二維分別賦值給value和text，其他維忽略
3.store類型：包括GroupingStore, JsonStore, SimpleStore.
//我們分三步走：
//第一步：提供數據：
var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
//第二步：導入到store中：
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
});
//第三步 :把store託付給comboBox的store
var combo = new Ext.form.ComboBox({
store: store,
displayField:'english',//store字段中你要顯示的字段，多字段必選參數，默認當mode爲remote時displayField爲undefine，當select列表時displayField爲"text"
mode: 'local',//因爲data已經取數據到本地了，所以'local',默認爲"remote"，枚舉完
emptyText:'請選擇一個省份...',
applyTo: 'combo'
});
這裏我們介紹了兩個新的參數displayField和mode，請記住，後面不再專門說明。
8.ComboBox的value獲取
添加listeners事件：
listeners:{
"select":function(){
alert(Ext.get("combo").dom.value); //獲取id爲combo的值
}
}
//這裏我們提供了一種不是很好的方法，在此不做過多停留
9.把Extjs的ComboBox樣式應用到select的下拉框中去
核心參數介紹
核心代碼：
var ExtSelect=new Ext.form.ComboBox({
transform:"select",//html中的id
width:80//寬度
});
//html代碼
<select id="select">
<option value="1">***</option>
<option value="2">博客園</option>
<option value="3">百度</option>
<option value="4">新浪</option>
</select>
//是不是超級簡單？
從中不是也可以看出extjs的不同之處的，不過不明顯！
10.ComboBox的其他重要參數
2.displayField："field" //顯示文本字段
3.editable：false//false則不可編輯，默認爲true
4.triggerAction:"all"//請設置爲"all",否則默認爲"query"的情況下，你選擇某個值後，再此下拉時，只出現匹配選項，如果設爲"all"的話，每次下拉均顯示全部選項
5.hiddenName:string //真正提交時此combo的name，請一定要注意
6.typeAhead:true,//延時查詢，與下面的參數配合
7.typeAheadDelay:3000,//默認250
//其他參數，請參考api，或自行嘗試
關於combobox的其他花俏功能在此不多做介紹。
最後一點，如何實現在aspx頁面更靈活的分離cs數據和js數據的交互？因爲我們都喜歡把js放在一個單獨的文件，然後在aspx頁面引用
這樣就有一個問題，我在js裏直接獲取cs數據就有點不方便。我認爲可以這樣，在aspx頁面裏獲取數據，並作爲js，你就js變量，你就可
以在js裏引用了，或者直接通過url地址獲取。
之所以這麼囉嗦的講combobox，是因爲這個東西有時候真的讓人又愛又恨！
4.Ext.grid.GridPanel
stripeRows: true, //隔行換色
viewConfig: { forceFit: true }, //自動均分列寬
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }), //設置選中模式
loadMask: { msg: '正在加載數據，請稍侯……' }, //加載完成前顯示信息，設置爲true則顯示Loading
autoDestroy //Boolean 銷燬store當組件的store已經被綁定並銷燬 (?? 沒有測試出來，後續文章繼續測)
columnLines: true, //顯示列線條
5.Ext.grid.ColumnModel
header //表格列頭名稱
dataIndex //字段名稱
sortable //是否允許按列排序，默認爲false
resizable:false //是否可改變列寬，默認爲true
menuDisabled: true //是否禁用(不顯示)列頭菜單項，默認false
hidden:false //是否隱藏本列
renderer: //渲染，自定義格式輸出