ExtJS MVC框架搭建(一)

2021-09-24 12:07:25 字數 2384 閱讀 3978

1)建立如下目錄結構

controller

model

store

view

css (用於存放自定義的css檔案)

data (用於存放測試用的資料檔案,如:***.json)

ext-4.0 (用於存放 extjs相關的資源檔案,如 ext-all.js 以及 ext-all.css)

index.html (首頁)

2)建立的目錄結構如圖:

3)專案需要的extjs相關的資源檔案

提取碼: ebyz

ps:①、指定 index.html 檔案編碼為utf-8

name: 'oa', //定義全域性的命名空間, 通常將其定義為專案名

launch: function()]

});}});

2)將專案部署到tomcat中, 訪問 主頁檢視頁面效果

頁面如圖:

ps:所有的 js 檔案編碼都需要設定成 utf-8, 以防出現亂碼問題

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

});

name: 'oa', //定義全域性的命名空間, 通常將其定義為專案名

controllers: [ // 1.新增控制器配置

'users'

], launch: function()

});

②、定義乙個控制器類, 對應乙個模組。如 oa.controller.users 控制器對應的就是使用者管理模組,後面還可能會有 oa.controller.roles 對應的就是角色管理模組

3)將專案部署到tomcat 中,訪問主頁,檢視控制台輸出的資訊

ps:從控制台輸出的資訊可以看出, 程式啟動,首先先載入所有的 controllers,然後在執行的 launch() 方法。

list.js 內容如下:

③、試圖元件定義別名 方便 controller層呼叫

內容如下:

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

});

name: 'oa', //定義全域性的命名空間, 通常將其定義為專案名

controllers: [

'users'

], launch: function()]

});}});

ps: ①、在程式載入完成後執行launch 中定義的方法, 建立乙個viewport 容器物件,該容器物件的採用 fit 布局, viewport 中有 乙個定義好的 userlist 試圖元件。

②、xtype: 'userlist' 為什麼能起作用?

a) 需要定義乙個試圖元件(view/user/list.js), 然後該元件取個別名 

b)將上一步定義好的試圖元件((view/user/list.js)交由相應的控制器元件管理(controller/users.js)

c)將控制器元件(controller/users.js)交由應用程式管理

d) 因此在 launch 方法中能訪問到 userlist 型別的試圖元件,此外在 users控制器中頁面訪問到 userlist試圖元件

4)部署專案到tomcat 訪問主頁效果如圖:

ExtJS MVC的搭建(三)

3.1 在上面顯示的頁面中,大家可以看到左邊的導航沒有選單選項,因此就不夠名副其實了,下面我們新增樹形選單 還是在檢視中建立mymenutree.js,如下 store ext.create ext.data.treestore ext.define fly.view.mymenutree 因為資料...

一 搭建框架

在vc 開發環境中,編寫windows作業系統平台的視窗程式有兩種不同的程式架構,一種是mfc,另一種是winapi vs2010 新建專案 win32專案 f5執行 框架搭建完畢 問題 如何更改sztitle 標題欄文字 和szwindowclass 主視窗類名 任何乙個視窗都必須屬於某乙個視窗類...

ThinkPHP框架一 框架搭建

require thinkphp thinkphp.php 執行tp框架 1 存放位置 controller資料夾中 2 命名規範 控制器的名稱 controller.class.php 3 類名和檔名同名 4 用帕斯卡命名法 大駝峰 5 盡量區分大小寫,6 thinkphp預設全部是utf8編碼 ...