最簡單的ExtJS4的MVC例項

2021-09-30 14:56:29 字數 1232 閱讀 4368

最簡單的extjs4的mvc例項

從extjs4.0開始,extjs支援mvc架構,讓前端開發者更好的實現資料與邏輯分離,使用

view, controller, model元件定義來完成瀏覽器前端業務。提高**可以維護性。extjs中

的view是被動模式,被controller持有。

其目錄結構必須遵循以下結構:

並完成初始化。name: 'users'表示命名空間為users,完全源**如下:

ext.loader.setconfig();  

name: 'users',

autocreateviewport: false,

controllers: ['users'],

launch: function()

});

定義乙個controller

ext.define('users.controller.users', ,

renderto: document.body

});ext.create('users.view.grid').show();

}});

定義兩個個view,

ext.define('users.view.grid' , ,]

});

ext.define('users.view.panel', );ext.define('users.model.user', );var mydata = [[1,	'gloomyfish', '[email protected]'],

[2, 'bob denoy', '[email protected]'],

[3, 'rose kate', '[email protected]']

];ext.define('users.store.users', );

執行效果如下:

ExtJS4的MVC模式例項

mvc模式,想必大家都很清楚。model view controller。extjs在4.0以後也開始引入了mvc模式,程式的結構也就變得規範。開發者可以利用mvc的設計模式規劃了開發流程。下面的乙個mvc模式的小例子。在demo資料夾裡就是extjs的mvc架構。先來看介面。這裡由於是演示。我們使...

ExtJs4學習MVC中的Store

ext.data.store是extjs中用來進行資料交換和資料互動的標準中介軟體,無論是grid還是combobox,都是通過它實現資料讀取 型別轉換 排序分頁和搜尋等操作的。12 3456 7ext.define user store既可以從本地陣列中讀取資料,也可以從伺服器遠端讀取資料,當然還...

ExtJs4學習(六)MVC中的Model

第一種 ext.define user 另外一種 ext.regmodel user 首先我們嘗試最主要的方式 new var user new user console.info user.get password 123456然後用create方式 var user ext.create use...