ExtJS4.x中建立MVC結構客戶端程序

時間 2019-11-12

標籤 extjs4.x extjs 建立 mvc 結構客戶端程序简体版

原文原文鏈接

ExtJS4.x推薦數據在頁面的呈現能夠選擇採用MVC結構。當採用ExtJS的MVC結構時，須要配置好MVC層（model，controller，view三層）中的各個類，這樣在加載controller層時，ExtJS會幫咱們註冊、初始化所須要的類（組件）並關聯各種之間的關係。在MVC結構中，控制層處於核心地位，當採用controller時，ExtJS能幫咱們自動完成許多事情，提升開發效率。固然也能夠不採用controller，這時，程序員本身須要先定義好各層中的類，而後手動註冊各個類並創建它們之間的關聯（手動完成controller層的工做）。本文介紹ExtJS的MVC並採用MVC結構建立簡單客戶端程序方法與步驟。程序員

1、理論：ExtJS4.x中的MVC json

ExtJS4.x中的MVC結構由數據層-表現層-控制層三層組成，各自的功能很是明顯。數據層管理要表現的數據，表現層爲數據層在瀏覽器中的顯示準備界面，而控制層則負責他們兩者的交互。其中數據層又細分爲實體層或模型層（model/entity）和數據存儲層（store），這樣他們的分工更加明確。他們在一個客戶端應用程序目錄中的結構以下圖所示：瀏覽器

（注：圖片截圖於ExtJS官網）服務器

2、實踐：不使用MVC中的控制層建立客戶端程序 app

一、定義各個層的類框架

數據層：在數據層中有數據定義和數據操做，所以可細分爲model層（數據定義）和store層（數據操做） ide

Model層：學習

Ext.define('licichao.model.MaterialTypeEntity', {
	extend: 'Ext.data.Model',
	fields: [
		{ name: 'id', type: 'String', defaultValue: null, useNull: true},
		{ name: 'creationUser', type: 'String' },
		{ name: 'creationDate', type: 'date', dateFormat: 'time' },
		{ name: 'modificationUser', type: 'String' },
		{ name: 'modificationDate', type: 'date', dateFormat: 'time' },
		{ name: 'typeCode', type: 'String' },
		{ name: 'currentLevelCode', type: 'String' },
		{ name: 'typeName', type: 'String' },
		{ name: 'typeClass', type: 'Strnig' },
		{ name: 'costAccount', type: 'String' },
		{ name: 'description', type: 'String' }
	]
});

Store層：測試

Ext.define('licichao.store.MaterialTypeStore', {
	extend: 'Ext.data.Store',
	model: 'licichao.model.MaterialTypeEntity',
	autoLoad: true,
	proxy: {
		type: 'rest',    //從服務器端加載數據
		url: '/CBIMService/materialTypes',
		reader: {
			type: 'json'
		},
		writer: {
			type: 'json'
		}
	}
});

這裏的store層採用rest方式、url: '/CBIMService/materialTypes'與服務器進行通訊，所以，須要事先實現服務器端讓服務器端接受這個url並處理相應的http請求。固然，也能夠不從服務器端加載數據，就將數據放在store中，這樣更便於客戶端測試，更好地單獨學習ExtJS。 ui

View 層：這裏的view層將設計一個grid panel

Ext.define('licichao.view.MaterialTypeGrid', {
   extend: 'Ext.grid.Panel',
   alias: 'widget.materialTypeGrid',
   title: '材料類別列表',
   //store: 'MaterialTypeStore', //這裏不須要store配置，即便配置了也不起
   //做用，由於咱們手動創建view和store之間的關聯
   columns: [
      {
         text: '編碼',
         dataIndex: 'typeCode',
         sortable: true
      },
      {
         text: '本層編碼',
         dataIndex: 'currentLevelCode',
         sortable: true
      },
      {
         text: '名稱',
         dataIndex: 'typeName',
         sortable: true
      },
      {
         text: '類型',
         dataIndex: 'typeClass',
         sortable: true
      },
      {
         text: '成本科目',
         dataIndex: 'costAccount',
         sortable: true
      },
      {
         text: '說明',
         dataIndex: 'description',
         sortable: true
      }
   ]
});

Controller層：無，因爲是手動初始化各個類並創建他們的關聯，所以不須要控制層

二、手動創建各層之間的關係

手動初始化各種實例和創建各層間的關聯在程序中進行，例如能夠Ext.application中的launch方法中進行，過程以下。

① 初始化store

var mtStore = Ext.create('licichao.store.MaterialTypeStore');

② 初始化view並將store配置給view

var materialTypeGrid = Ext.create('licichao.view.MaterialTypeGrid',{
    store : mtStore
});

③ 將建立的view顯示出來，例如能夠將剛創建的materialTypeGrid掛載在一個panel上並顯示

centerPanel.add(materialTypeGrid).doLayout();

固然，若是不想和數據打交道，能夠建立純框架界面，只要去掉數據層和控制層便可。在上述過程當中，經過非MVC方式創建了一個小應用程序，代碼已在上面各個過程當中貼出，運行結果以下圖1所示：

三：實踐：完整使用MVC結構建立客戶端程序

完整使用MVC時重點在於控制層，它能夠沒有任何控制數據層和表現層間交互的代碼，但使用它來配置數據層和表現層仍體現出它強大的功能。使用MVC結構中的controller層能夠在應用程序中簡化類的註冊和關聯的代碼工做量，程序員只須要在controller層的controller類中指定相關的store類和view類，而後在應用程序中註冊controller類時，ExtJS會自動幫助咱們註冊好其中關聯的store類和view類。一樣在上面的例子中，採用controller層時，其餘代碼均不變，增長controller層類：

Ext.define('licichao.controller.MaterialTypeController', {
   extend: 'Ext.app.Controller',

   views: [
      'MaterialTypeGrid'
   ],
   stores: [
      'MaterialTypeStore'
   ]
});