ExtJs開發總結

 

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強制加載一遍

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