ExtJS流程總結(一)

2021-08-04 11:53:31 字數 1204 閱讀 4067

最近一直在學習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...