資訊專欄INFORMATION COLUMN
摘要：接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。目標全屏顯示左側(cè)導航菜單，右側(cè)標簽頁切換操作內(nèi)容區(qū)域。一般模型與你后臺返回的數(shù)據(jù)結構一一對應。給其他組件提供一致接口使用數(shù)據(jù)。整個構成一個所謂的。
接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。目標
書接上回，開始寫UI效果。
全屏顯示、左側(cè)導航菜單，右側(cè)標簽頁切換操作內(nèi)容區(qū)域。包含header和footer
導航菜單動態(tài)ajax產(chǎn)生，點擊對應菜單可以動態(tài)加載js資源或者數(shù)據(jù)
不要太丑！！！！
先扯點概念：一些基本的Extjs概念本文不會去講，請參考官網(wǎng)API文檔。
但是對于用java的同志來說，看extjs的結構應該是很容易的
定義與創(chuàng)建 define vs create
///////extjs
Ext.define("Cat",{//定義一只貓
name:"小甜甜"http://名字
})
///////java
class Cat(){//定義一只貓
private String name;
}
///////extjs
Ext.create("Cat",{//創(chuàng)建一只貓
name:"牛夫人"http://
})
///////java
Cat cat= new Cat();
cat.setName="牛夫人";
Model模型是個啥?
直白點說吧，模型就是模型，，就是實體類，就是entity,就是POJO,,,,就是.......
總之，模型是用來定義一個東西的屬性的。一般模型與你后臺返回的數(shù)據(jù)結構一一對應。
比如：一個用戶模型：
Ext.define("luter.model.User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "string"},//用戶id
{name: "username", type: "string"},//用戶名
{name: "gender", type: "string"},//性別
{name: "real_name", type: "string"}//真實姓名
]
});
要模型干啥？哎，開始我也這么想過，后來看到store
Store是干啥的?
好了，你有數(shù)據(jù)庫，你有后臺，你甚至都用js定義了數(shù)據(jù)模型(Model)，那你數(shù)據(jù)怎么來？
Store簡單理解，就是干這個的，Store用來獲取數(shù)據(jù)，管理數(shù)據(jù)，前端保存數(shù)據(jù)。給其他組件提供一致接口使用數(shù)據(jù)。Store定義了數(shù)據(jù)怎么獲取數(shù)據(jù)、拿到后如何處理數(shù)據(jù)。如下例：
//定義一個user store
Ext.define("luter.store.User", {
extend: "Ext.data.Store",
autoLoad: false,
model: "luter.model.User",//這就是user model， 用戶模型
pageSize: 15,//分頁頁面大小
remoteSort: true,//服務端排序
sortOnLoad: true,
proxy: {//proxy規(guī)定了從什么地方以什么方式獲取數(shù)據(jù)，并且返回數(shù)據(jù)應該如何解析獲取
type: "ajax",
actionMethods: {
create: "POST",
read: "POST",
update: "POST",
destroy: "POST"
},
api: {
read: "app/testdata/user.json"
},
reader: {//返回數(shù)據(jù)如何讀取
type: "json",
root: "root",
successProperty: "success",
totalProperty: "total"
},
listeners: {//當發(fā)生ajax異常的時候，回調(diào)處理。
exception: function (proxy, response, operation, eOpts) {
DealAjaxResponse(response);
}
}
},
sorters: {//排序規(guī)則。
property: "id",
direction: "DESC"
}
});
view是什么?
view就是。。。。。。UI啊！！！grid啊、button啊、panel啊、tree啊 form啊。。。等等。。。。
顯示數(shù)據(jù)，接受用戶操作，給用戶操作反饋....反正用戶看到的地方，就是view
:>理解沒？
新建入口文件app.js對于extjs而言，一個應用也就是application,對應Ext.Application類。一個應用可以有自己的類體系，store、view、Model等元素。整個構成一個所謂的：app。app.js是整個應用的入口，用來初始化Ext.Application，當然，你可以不叫app.js，比如叫:aipapa.js，都是可以滴！！但是里面是干這個事情的。。。
/**
* 設置Extjs的動態(tài)加載路徑
*/
Ext.Loader.setConfig({
enabled: true,
paths: {
"Ext": "app/vendor/extjs/6.2.0",
"Ext.ux": "app/vendor/extjs/6.2.0/ux"
}
});
/**
* 是否開啟url緩存，就是xxx.com?_dc=123123123123類似這種
*/
Ext.Ajax.disableCaching = false;
/**
* 初始化工具提示
*/
Ext.QuickTips.init();
Ext.application({
name: "luter",//這個應用叫啥，其實就是目錄名字
/**
* 你把這個應用放哪個目錄下了,控制器啊store啊view啥的，在哪里?
* 以后定義一個叫Ext.define("luter.model.Car",{})的時候，其實就是指向了js文件:app/luter/model/Car.js
* requiere就會動態(tài) ajax load這個js下來
*/
appFolder: "app/luter",
init: function () {//先初始化
console.log("init")
}, launch: function () {//發(fā)射！
console.log("launch")
}
});
最后，在入口html中記得引入這個文件。不出意外的話預覽app.html，console里應該能看到點信息了，當然，依然沒啥UI效果....接下來就創(chuàng)建view
開始創(chuàng)建主view主view基礎是一個viewport,采用Border布局，頭部header+底部footer+左側(cè)導航樹+中間tab頁內(nèi)容切換。為了方便管理，主view統(tǒng)一放在main目錄下，主視窗: app/luter/view/main/viewport.js
/**
* 主視圖占滿全屏是個viewport
*/
Ext.define("luter.view.main.ViewPort", {
extend: "Ext.Viewport",
alias: "widget.viewport",//別名，與xtype對應
layout: "border",//東南西北中布局，邊界嘛
stores: [],
requires: [],
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
region: "north",
height: 40,
title: "北方",
xtype: "panel"
}, {
region: "west",
xtype: "panel",
title: "西方",
width: 200
}, {
region: "center",
title: "中間",
xtype: "panel"
}, {
region: "south",
xtype: "panel",
title: "南方",
height: 40
}]
});
me.callParent(arguments);
}
});
建立主控制器:app/luter/controller/MainController.js
Ext.define("luter.controller.MainController", {
extend: "Ext.app.Controller",
views: ["main.ViewPort"],//默認views會尋找項目目錄下的view目錄，也就是會掃描到app/luter/view了，所以直接下下級路徑即可。
stores: [],
init: function (application) {
var me = this;
this.control({
"viewport": {//監(jiān)聽viewport的初始化事件，可以做點其他事情在這里，如有必要，記得viewport定義里的alias么？
"beforerender": function () {
console.log("viewport begin render at:" + new Date());
},
"afterrender": function () {
console.log("viewport render finished at:" + new Date());
},
}
});
}
});
控制器有了，視圖有了，接下來讓程序顯示這個UI，修改app.js
修改app入口: app/luter/app.js/**
* 設置Extjs的動態(tài)加載路徑
*/
Ext.Loader.setConfig({
enabled: true,
paths: {
"Ext": "app/vendor/extjs/6.0.0",
"Ext.ux": "app/vendor/extjs/6.0.0/ux"
}
});
/**
* 是否開啟url緩存，就是xxx.com?_dc=123123123123類似這種
*/
Ext.Ajax.disableCaching = false;
/**
* 初始化工具提示
*/
Ext.QuickTips.init();
var luterapp;//定義一個全局app對象，便于后續(xù)使用
Ext.application({
name: "luter",//這個應用叫啥，其實就是目錄名字
/**
* 你把這個應用放哪個目錄下了,控制器啊store啊view啥的，在哪里?
* 以后定義一個叫Ext.define("luter.model.Car",{})的時候，其實就是指向了js文件:app/luter/model/Car.js
* requiere就會動態(tài) ajax load這個js下來
*/
appFolder: "app/luter",
init: function () {//先初始化
console.log("init")
}, launch: function () {//發(fā)射！
console.log("launch")
luterapp = this;
this.loadModule({
moduleId: "MainController"
});
var module = this.getController("MainController");//加載這個控制器
var viewName = module.views[0];//獲取到這個控制器里的第一個view名字
var view = module.getView(viewName);//獲取到這個view,本質(zhì)上就是加載js文件
view.create();//創(chuàng)建這個view
},
/**
* 動態(tài)加載控制器
* @param config
* @returns {boolean}
*/
loadModule: function (config) {
if (!Ext.ClassManager.isCreated(config.moduleId)) {
console.log("controller:" + config.moduleId + " is not load ,now load in.....");
try {
var module = luterapp.getController(config.moduleId);
} catch (error) {
showFailMesg({
msg: ":<> O! No:load module fail,the module object is null." +
"
maybe :the module is Not available now." +
"Error: " + error
});
return false;
} finally {
}
}
}
});
這里面用到了一個showFailMesg的函數(shù)，這種彈出提示框的東西，可以做成通用的函數(shù)放在utils里,后續(xù)這個工具類會逐漸完善。
如下:
/**
* 操作成功提示
*/
function showSucMesg(config) {
Ext.Msg.show({
title: "成功",
msg: config.msg || "",
width: 400,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO,
fn: config.fn || ""
});
}
/**
* 操作失敗提示
*/
function showFailMesg(config) {
Ext.Msg.show({
title: config.title || "失敗",
msg: config.msg || "",
width: 450,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
fn: config.fn || ""
});
}
當然，這個js也需要在入口html引入，在app.js之前引入。如下：
修改入口html: app/app.html
EXTJS6.2.0MVC