最近一直在學習extjs的使用,公司專案的前端框架使用的extjs4.2框架,extjs有自己的mvc結構,分為controller,view,model,store,在整體的mvc架構中將view層又一次進行解耦,
這兩天學習的模組是atm的分類和型號模組,涉及到增刪改查操作。開發流程大致如下:
首先會定義乙個controller,如atmtype.js,atmbrand.js等等
1、在controller層會指定要顯示的檢視層view,這個view一般是個大框架,view再次組裝別的view元件
2、view分為上下兩個部分,上面為乙個查詢條件的filterform,下面是乙個顯示資料的grid**,所以在view層會分別引用filterform和grid元件,而這兩個元件分別會在同資料夾或者在父類的view 中
3、在我們的filterform中,涉及到下拉選擇的設定框一般都是乙個combox,而這個combox一般放在filed資料夾中,
其他的一些編輯框中的屬性也會在field中定義好,比如name,address,然後使用的時候要在requries中宣告,
類似這種;
requires: [
'x.view.field.atmtype.name',
'x.view.field.atmtype.typestatuscombobox',
'x.view.field.atmtype.deviceatmcatalogcombobox',
'x.view.field.atmtype.deviceatmvendorfortypecombobox'],
4、在執行新增或者更新操作時,我們也是要彈出乙個對話方塊的,這時使用的form也是會在view的同等級資料夾中
form涉及到combox(下拉選擇框)也是在filed中定義,使用的時候直接xtype引用就好了。
不同的模組對應不同form,所以在整體的view的js檔案中定義formconfig就會選擇不同的form,比如:
這是atm型號的form
formconfig : ,
這是品牌的form:
formconfig : ,
因為他們都是直接呼叫父類的方法,父類需要根據提供的formconfig.xtype來識別不同的form,以對應屬性資訊
父類中會有:
var win=ext.create('***.view.base.window',]
});根據這個建立新增或者更新視窗。
ExtJS常用總結
ext.get id 和ext.getcmp id 返回component物件 ext.query cssselector 返回乙個原生的dom陣列,與jquery用的css選擇器語法是一樣的,可以根據id,class,name等進行選擇 new ext.element 引數是原生dom物件 可以將...
Extjs常用總結
js驗證日期跨度 var e ext.util.format.date tab.down customertype2 getvalue y m d 格式化日期控制項值 var s ext.util.format.date tab.down customertype1 getvalue y m d 格...
ExtJs4 問題總結
在用到ext grid的時候,如果後台計算量大或者返回的資料量過大導致載入資料時間超時,時間超時後會發現grid沒有資料顯示。解決的方法是把超時的時間設定大點,ext的ajax預設請求都是30秒。設定方法如下 ext.ajax.timeout 90000 一秒 1000毫秒。上面設定是把timeou...