ExtJs开发总结
讀后很實用，感謝這位具有奉獻精神的朋友！
?
之前做過一陣的ExtJs開發，從最傻的符號問題，到后來的渲染問題都碰到過。下面是個人開發過程中做的一些總結，多是問題的應對：
1、引入js和css文件時注意文件的路徑問題；
2、導入ext-base.js后注意設置Ext.BLANK_IMAGE_URL的值（透明圖片s.gif位置）；
3、IE提示“缺少標識符，字符串或數字”錯誤，為配置時 “}”前多了逗號，且所處位置在Ext.onReady在同一個js文件
4、IE提示變量未定義，一般為有語法錯誤，如多余了”,”等
?
5、“無效字符”錯誤，可能是將”,”打成了”，”了
6、”缺少’}'”錯誤，問題是多個參數之間缺少了”,”導致
7、加載文件較多時，使用ExtJs可做一個加載提示
8、ext-base.js引入必須在ext-all.js之前
9、Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
初始化Ext狀態管理器，在Cookie中記錄用戶的操作狀態，如果不啟用，象刷新時就不會保存當前的狀態，而是重新加載
如果窗口中有用可拖動面板的話，你在拖動后如果啟動了Ext.state.Manager.setProvider(new Ext.state.CookieProvider()),就算刷新后面板仍然會在你拖動后的位置。如果不啟用的話是不是就會按照默認的排列方式排列
10、對瀏覽器禁用javascript的提示
<noscript class=”noticeDialog”><div>
?<p>請開啟瀏覽器的 JavaScript 支持！否則不能正常使用本系統<br>啟用之后，刷新頁面即可</p>
</div></noscript>
11、TabPanel中放置復雜組件時，注意需要設置TabPanel的Width
12、extjs中文字體在firefox里顯示偏小的問題，解決方法是再創建一個名為ext-patch.css的css文件，內容見http://www.phpchina.com/html/78/78-28624.html
13、中文化問題，在 ext-all.js 后面，掛上 ext-lang-zh_CN.js 即可，如：
?? <script type=”text/javascript” src=”<%=contextPath%>/public/js/ext-base.js”></script>?
?? <script type=”text/javascript” src=”<%=contextPath%>/public/js/ext-all.js”></script>?
?? <script type=”text/javascript” src=”<%=contextPath%>/public/js/ext-lang-zh_CN.js”></script>?
14、ComboBox加載后自動選擇第一項
var pn_zlfx_cbb_grade = new Ext.form.ComboBox({
?displayField: ‘name’,
?valueField: ‘id’,
?triggerAction: ‘all’,
?width: 80,
?lazyInit: false,
?mode: ‘local’,
?editable: false,
?forceSelection: true,
?store: new Ext.data.JsonStore({
??url: SITE_URL+’get_zlfx.asp?grade_id=0′,
??fields: ['id', 'name'],
??root: ‘data’,
??autoLoad: true,
??listeners:{
???load: function(store, records, options){
????if (records.length != 0){
?????pn_zlfx_cbb_grade.setValue(records[0].data.id);
????}
???}
??}
?})
15、JsonStore排序：sortInfo: {field: “name”, direction: “ASC|DESC”}
16、Extjs類的配置屬性是不能被動態配置的,就如同上面這樣的寫法,當然,可能可以通過調用或設置某些公共的方法和屬性來改變這些配置屬性,但不能直接設置.
17、xhtml strict模式：<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
18、Html文檔<script>標簽中的js代碼放在<![CDATA[和]]>之間，使xhtml驗證時忽略中間的內容
19、JsonStore添加Record
var orgaListRecord = new Ext.data.Record.create([
? {name: 'id_combo1'},
? {name : 'name'}
]);
var orgaList = new Ext.data.JsonStore({
? url: ‘./get_organisme.php’,
? root: ‘orga’,
? fields: orgaListRecord
});
orgaList.add([
?new orgaListRecord({'id_combo1': 3,'name': 'Other'})
]);
orgaList.load({add: true}); // instead of orgaList.load();
20、數據加載前須判斷是否有數據：
if (typeof(pn_zlfx_gp_mark_subjects)==”undefined” || typeof(pn_zlfx_gp_mark_subjects.data)==”undefined”)
??? pn_zlfx_gp_setting.store.removeAll();
else
??? pn_zlfx_gp_setting.store.loadData(pn_zlfx_gp_mark_subjects);
21、盡量將處理過程放在關鍵位置，減少重復代碼
22、默認排序方式：sortDir
23、服務器返回的JSON數據字段用’或”括起來，避免與js關鍵詞與保留字沖突
24、Ext.encode()出錯，問題是json數據有問題
25、store增加totalProperty配置，可用store.getCount()獲取
26、store中文排序異常問題，通過重載Ext.data.Store.prototype.applySort函數來解決
27、store.load()是異步操作，如果希望在數據載入后再執行操作，可以通過以下方式執行：
store.load({
? callback: function (records) {
??? alert(store.getTotalCount());
? }
});
28、 EXTJS items不能顯示問題收藏
有時經常碰到添加items時不能顯示，郁悶不得行~~
經不斷測試可能有如下幾個方法可以解決：
1)試添加：Layout:’fit’
2)若xtype為’panel’，可試添加：
??????? listeners: {
???????????? ‘activate’: function(p) {p.doLayout();}
???????????? ,single:true
???????? }
3)若xtype為’tabpanel’，可試添加：
??????? layoutOnTabChange:true
總的來說是cmp.doLayout()問題….
29、Ext.ajax.request增加form和isUpload:true時，請求方式為enctype=”multipart/form-data”傳值，asp中需特別解析
30、ComboBox增加mode:’local’配置來手動控制數據載入，同時可防止數據的二次加載
31、要使ComboBox手動輸入的值能得到提交，需要增加ComboBox的Blur事件處理函數
??? onComboBoxBlur: function(field){
??? ?field.setValue(field.getRawValue());
??? }
32、Firebug顯示所有Extjs組件事件
Ext.util.Observable.prototype.fireEvent = Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
??? console.log(arguments);
??? return true;
});
33、工具欄Toolbar內容的增刪
??? var tb = this.gp.getTopToolbar();
??? // 刪除工具欄內容
??? var i = tb.items.getCount();
??? while(i){
??Ext.fly(tb.items.get(i).getEl()).remove();
??tb.items.removeAt(i);
?}
?// 重新添加工具欄內容
??? tb.add(‘包括（’, this.cbgType, ‘）’);
34、Ext.ux.form.LovCombo不能設置forceSelection為true，否則當控件失去焦點時顯示值會清空
35、IE下Ext.GridPanel的autoWidth或者layout:’fit’會將寬度拉的很長的解決辦法：
var grid = new Ext.grid.GridPanel({
??????? bodyStyle:’width:100%’,
??????? autoWidth:true,
…….
});
36、Ext.GridPanel加了CellSelection后，如設置viewConfig:{forceFit:true}點擊單元格會導致表格跳動
解決方案：http://www.extjs.com/forum/showthread.php?p=282928#post282928
37、ComboBox執行Filter第一次無效的解決是 增加lastQuery:” 配置
38、Panel內部高度自適應+自動出現滾動條，增加以下配置
,autoScroll: true
,style:”height:100%;”
,bodyStyle:”height:100%;”
39、某些情況下TabPanel里加載iframe第一次不顯示，可在panel顯示后重新設置一下iframe的src強制加載一遍
轉載于:https://www.cnblogs.com/CoolHu/archive/2012/11/23/2784056.html
總結
- 上一篇： JS学习笔记1-JavaScript 输
- 下一篇： ValueError: Untermin