Ext常用問題的總結(轉載自http://ext.group.javaeye.com/group/)

 

scripts/ext/resources/css/ext-all.css//EXT通用CSS，包含所有的樣式（必須）
scripts/ext/resources/css/icon.css//自定義存放菜單項或其他頁面圖標
scripts/utils/HiTRUST-CMS.css//老版本支付系統的CSS
scripts/ext/ext-base.js//框架基礎庫（必須）
scripts/ext/ext-all.js //包含了所有的EXT類庫（必須）
scripts/ext/ext-lang-zh_CN.js//EXT所有的中文提示（必須）
文件導入順序
要試用Ext必須最少要把上面標註爲必須的JS和CSS包含在頁面中，並且，請注意導入的順序，由於ext-all.js是依賴於ext-base.js，所以ext-base.js先導入，js裏面使用的樣式都來自於ext-all.css，所以最先導入
問題集錦
1：關於試用(docs.js )tab頁不能顯示，或者禁止JS的問題
解決方法，在實例化autoLoad對象時，需要設置裏面的scripts屬性，默認是false，即，加載的tab子頁面，不執行javascript，需要調整成如下:
A：Var autoLoad={url:heaf,scripts:true};
當然也可以嵌套個iframe，
B：html:’<iframe src=”+url+” width=”100%” height=”100%”/>’,
這樣的話，就意味着每次都要加載EXT類庫，但是單個頁面的變得可分離，耦合降低

2:關於email驗證問題
xtype:'textfield',
fieldLabel: '電子郵箱',
id: 'edit_SPEmail',
name: 'sPEmail',
vtype: 'email',//這個加上後就可以驗證EMAIL了
anchor:'95%'

3：關於select的使用問題
//創建JSON數據
var statusArray=[
['正常','正常'],
['註銷','註銷'],
['凍結','凍結']
];
//使用
xtype:'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'descp'],
data :statusArray
}),
fieldLabel: '狀態',
loadingText:'正在加載...',
displayField:'descp', //隱藏的數據
valueField:'value', //顯示的數據
mode:'local', //讀取本地數據(remote表示遠程數據)
triggerAction:'all',
id:'StatusID',
hiddenName:'StatusName',
editable:true, //是否可以編輯,同時此屬性也支持輸入搜索功能

4:關於文本框輸入基本驗證
allowBlank:false,//如果爲空，則顯示提示信息
minLength:6,//最少允許字符數
minLengthText:'請您輸入最少6個字符！', //少於最少允許字符數，則提示該信息
maxLength:12, //最大允許字符數
maxLengthText:'請您輸入最多50個字符！', //多於最大允許字符數，則提示該信息

5: EXT怎樣實現PSOT
參考程序代碼如下：
buttons: [{
text: '提交',
handler:function(){//當點擊按鈕執行這個函數
//驗證有效性
if(win.getComponent('form').form.isValid()){
//login爲from的id
win.getComponent('form').form.submit({
url:'login_chk.php',
waitTitle:'提示',
method: 'POST',
waitMsg:'正在登錄驗證,請稍候...',
success:function(form,action){//如果post成功執行這裏
var loginResult = action.result.success;
if(loginResult == false){
//如果login_chk.php返回false執行這裏
alert(action.result.message);
} else if(loginResult == true){//成功執行這裏
alert(action.result.message);
}
} ,
failure: function(form,action) { //未執行或POST失敗，返回異常
alert(action.result.message);
}
});
}
}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表單
}]
後臺返回：
if(驗證成功){
out.print( "{success:true,message:/"執行成功!/"}");
}else{
out.print( "{success:false,message:/"執行失敗!/"}");
}
備註：
當然也可以不採用這種用POST,可以手動獲取值，採用DWR等AJAX技術，也可以實現，其實原理是一樣的，都是異步調用

6:關於亂碼的解決方案
亂碼一直是個頭疼的問題，特別是JS和頁面，前臺和後臺之間的交互，建議採用統一編碼UTF-8，或者是GBK，一般都可以很好的解決，如果不行，可以實現個過濾器，統一實現請求和恢復信息編碼的一致性，當然還可以手動的改變字符的編碼格式，然後再手動解碼

7:爲什麼我的文本框設置了輸入不合法提示，但是卻不能顯示提示文本
Ext.QuickTips.init();//初始化鼠標停留時的顯示框,支持tips提示
//提示的方式，枚舉值爲"qtip","title","under","side",id(元素id)
Ext.form.Field.prototype.msgTarget='side';
Qtip:比如默認的“qtip”就是鼠標移動上去自動顯示
Side:用的較多，右邊出現紅色感嘆號，鼠標上去出現錯誤提示
Title: 類似於普通HTML控件裏面的title屬性一樣提示，鼠標懸停就顯示
Under: 顯示在控件的下面，主動顯示，不需要鼠標懸停
前提，如果您的文本框沒設置驗證，也不能顯示



8:怎麼實現EXT那樣的驗證呢？
//form驗證中vtype的默認支持類型
1.alpha //只能輸入字母，無法輸入其他（如數字，特殊符號等）
2.alphanum//只能輸入字母和數字，無法輸入其他
3.email//email驗證，要求的格式是[email protected]
4.url//url格式驗證，要求的格式是http://www.skywin.com

實現自定義驗證
//先用Ext.apply方法添加自定義的password驗證函數（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{password:function(val,field){//val指這裏的文本框 值，field指這個文本框 if(field.confirmTo){//confirmTo是我們自定義的配置參數，一般用來保存另外的組件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return (val==pwd.getValue());//返回比較值
}
return true;
}
});
//配置items參數
items:[{fieldLabel:"密碼",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"確認密碼",
id:"pass2",
vtype:"password",//自定義的驗證類型
vtypeText:"兩次密碼不一致！",//不合法提示
confirmTo:"pass1",//要比較的另外一個的組件的id
anchor:"90%"
}

9:實現選填顯示


可選的fieldset實例
其實就是帶個chechbox，有點像論壇註冊時有一部分是選填信息的那種效果，主要知識點：
1.checkboxToggle:true//true則呈現一個帶checkbox的fieldset，選中則展開，否則相反，默認爲false
2.checkboxName:string//當上面爲true時，作爲checkbox的name，方便表單操作
{
xtype:"fieldset",
checkboxToggle:true,//關鍵參數，其他和以前的一樣
checkboxName:"dfdf",
title:"選填信息",
defaultType:'textfield',
width:330,
autoHeight:true,//使自適應展開排版
items:[{
fieldLabel:"UserName",
name:"user",
anchor:"95%"//330px-labelWidth剩下的寬度的95%，留下5%作爲後面提到的驗證錯誤提示
},{
fieldLabel:"PassWord",
inputType:"password",//密碼文本
name:"pass",
anchor:"95%"
}]
}