/**
* 默認頁面
*
* @author leaves.qq:1330771552
*/

Ext.define(‘SupplyManagementDesktop.defaultsWindow‘, {
extend : ‘Ext.ux.desktop.Module‘,

requires : [‘Ext.data.ArrayStore‘, ‘Ext.util.Format‘, ‘Ext.grid.Panel‘,
‘Ext.grid.RowNumberer‘, ‘Ext.ux.LiveSearchGridPanel‘],

id : ‘defaultsWindow-win‘,

/***************************************************************************
* ExtJS控件使用按照如下規則。 首先，創建控件，調用Ext.create
* weightName:空間命名空間，args：空間參數，用{}包圍，當做對象傳入
*
* ####################################### 註意JS中有如下語法： var object={
* paramter1:value1, paramter2:value2, paramter3:value3 }
* object.paramter1可以直接獲得value1 #####################################
*
* ExtJS中所有空間創建方法都如上
*
* Ext.create(String weightName,Mixed args)
* 所以此處args相當於一個匿名對象（沒有引用），但並非真的匿名對象
*
*/
// 初始化窗體的方法
init : function() {
this.launcher = {
text : ‘Defaults Window‘,
iconCls : ‘icon-grid‘,
// 調用createWindow方法
handler : this.createWindow,
scope : this
// this指向Ext.define（這個方法用來聲明命名空間。）定義的命名空間
};
},// 初始化窗體的方法結束

// 創建窗體的方法
createWindow : function() {
// 下面進行預定義。就好像C裏面的 先定義後使用。不然後定義的在前面使用會認為未初始化。（猜測：可能不跟JS一樣，屬於ExtJS的語法）
var dataPanel;// 預定義一個GridPanel，用來顯示數據
var innerPanel;// 存放Panel的容器
var workerPanel;
var westPanel;
var deptStore;
var moduleObj = this;// 創建windows窗體的時獲取下本身的環境,此處不能確定，這個this是指向Ext.define還是指向創建的這個窗體
var desktop = this.app.getDesktop();

// 獲取窗體，外部最大窗體，具體方法不清楚。
var win = desktop.getWindow(‘defaultsWindow-win‘);

// 創建按鈕bar組件,是上面的幾個按鈕。
var buttonBar = Ext.create(‘Ext.toolbar.Toolbar‘, {
dock : ‘top‘,
items : [{
xtype : ‘button‘,
text : ‘新建‘,
iconCls : ‘add‘,
handler : function() {
// 自行新建操作，傳入一個create字符串用來標示是什麽按鈕事件，傳入dataPanel（註意：上面沒有var
// dataPanel;此處會報錯。）因為後面的新建需要用到表格顯示的數據（dataPanel.getSelectionModel().getSelection()）
moduleObj.proAction("create", dataPanel,
workerPanel);
}
}, {
// 分隔符，不解釋。
xtype : ‘tbseparator‘
}, {
xtype : ‘button‘,
text : ‘刪除‘,
iconCls : ‘remove‘,
handler : function() {
moduleObj.proAction("delete", dataPanel);
}
}, {
xtype : ‘tbseparator‘
}, {
xtype : ‘button‘,
text : ‘復制‘,
iconCls : ‘copy‘,
handler : function() {
moduleObj.proAction("copy", dataPanel, workerPanel);
}
}, {
xtype : ‘button‘,
text : ‘重置檢索‘,
iconCls : ‘reset‘,
handler : function() {
dataPanel.resetSearch();
}
}]
});// 創建按鈕bar組件結束

// 臨時創建的一個用來展示的store
var theStore = Ext.create(‘Ext.data.Store‘, {
fields : [{
name : ‘projectId‘,
type : ‘String‘
}, {
name : ‘projectCode‘,
type : ‘String‘
}, {
name : ‘projectName‘,
type : ‘String‘
}, {
name : ‘startDate‘,
type : ‘String‘
}, {
name : ‘endDate‘,
type : ‘string‘
}, {
name : ‘qualityTarget‘,
type : ‘string‘
}, {
name : ‘projectLeader‘,
type : ‘string‘
}, {
name : ‘projectStatus‘,
type : ‘string‘
}, {
name : ‘qualification‘,
type : ‘string‘
}, {
name : ‘constructionUnit‘,
type : ‘string‘
}],
pageSize : 20,// 每頁顯示數量。此處設置可以在向後臺申請數據的時候“自動”傳參一個
// limit和satrt，start不需要指定ExtJS會自動計算，然後傳值。
proxy : {
type : ‘ajax‘,// 使用傳輸方式為ajax（ajax是異步執行的操作，即不需要刷新頁面即可申請後臺資源。）
method : ‘POST‘,// post和get是HTML中表單（form）提交兩種方式，get會在地址欄顯示參數，post不顯示
url : ‘/Training/myProjectInfoController/getAllProjectInfo.action?deptId=‘
+ 0,

reader : {// 設置讀取方式屬性
type : ‘json‘,// 設置讀取方式格式為：json字符串
root : ‘root‘,// 設置根元素，即讀取上面fields種的name中對應值的元素，此處多為元素組，json字符串如：{A:a,B:[{},{},{},………………]}
totalProperty : ‘totalProperty‘// 設置總頁碼
}
},
autoLoad : true
// 自動讀取，即顯示綁定該store的組件的時候直接讀取數據
});
// 創建臨時Store結束

// 創建分頁bar組建
var pagebar = Ext.create(‘Ext.toolbar.Paging‘, {
pageSize : 20,
store : theStore,
dock : ‘bottom‘,
setActive : false,
refresh : false,
displayInfo : true,
plugins : Ext.create(‘Ext.ux.ProgressBarPager‘, {})
});
// 創建分頁bar組建結束

// 為theGirdPanel創建一個SelectionModel
var selectionModeltoGridPanel = Ext
.create(‘Ext.selection.CheckboxModel‘); // 想要能進行選擇或者多選，就需要設置selModel屬性這是設置selection的模型，創建一個模型Ext.selection.CheckboxModel
// 初始化gridPanel
dataPanel = Ext.create(‘Ext.ux.LiveSearchGridPanel‘, {
title : ‘<font color=red>工程詳細信息</font>‘,
region : ‘center‘,
width : ‘100%‘,
height : ‘96%‘,
store : theStore,
selModel : selectionModeltoGridPanel,
// 一系列行，不解釋，也可以var column=[`````````]然後columns:column
iconCls : ‘remove‘,
columns : [{
dataIndex : ‘projectId‘,
width : 80,
text : ‘項目號‘
}, {
dataIndex : ‘projectCode‘,
width : 80,
text : ‘項目序號‘
}, {
dataIndex : ‘projectName‘,
width : 100,
text : ‘項目名稱‘
}, {
dataIndex : ‘constructionUnit‘,
width : 100,
text : ‘建設單位‘
}, {
dataIndex : ‘startDate‘,
width : 80,
text : ‘開工日期‘
}, {
dataIndex : ‘endDate‘,
width : 80,
text : ‘竣工日期‘
}, {
dataIndex : ‘qualityTarget‘,
width : 100,
text : ‘質量目標‘
}, {
dataIndex : ‘projectLeader‘,
width : 100,
text : ‘項目負責人‘
}, {
dataIndex : ‘projectStatus‘,
width : 80,
text : ‘項目狀態‘
}, {
dataIndex : ‘qualification‘,
width : 80,
text : ‘需要資質‘
}],
dockedItems : [buttonBar, pagebar]
});

// 綁定dataPanel鼠標雙擊事件。
dataPanel.on(‘itemdblclick‘, function() {
moduleObj.proAction("update", dataPanel, workerPanel);

});
// 初始化gridPanel結束

// 為下面的部門信息分類欄（grid）創建一個store數據用jsonu讀取/Training/DeptInfoController/getAllDeptInfo.action地址申請到的資源。
deptStore = Ext.create(‘Ext.data.Store‘, {
fields : [{
name : ‘deptId‘,
type : ‘String‘
}, {
name : ‘deptName‘,
type : ‘String‘
}],
proxy : {
type : ‘ajax‘,
method : ‘POST‘,
url : ‘/Training/DeptInfoController/getAllDeptInfo.action‘,
reader : {
type : ‘json‘,// 用json字符串
root : ‘root‘
}
},
autoLoad : true
});

// 創建部門信息分類欄，
workerPanel = Ext.create(‘Ext.grid.Panel‘, {
title : ‘部門信息‘,
border : false,
store : deptStore,
hideHeaders : true,
columns : [{
dataIndex : ‘deptId‘,
hidden : true,
sortable : false,
width : 180
}, {
dataIndex : ‘deptName‘,
sortable : false,
width : 180
}]
});

// 給部門信息的grid綁定事件，當單擊的時候觸發事件，此事件用來刷新右側列表
workerPanel.on(‘itemclick‘, function(grid, record) {
// 獲取當前行的deptId列的值
var id = record.data.deptId;
// dataPanel.store：獲取dataPanel的store屬性的值，dataPanel.store.proxy獲取數據來源屬性，ataPanel.store.proxy.url獲取數據來源屬性的URL，
// 這個方法用來重新設置數據來源的地址，
// 註意：後面的?deptId是HTML傳參方法，地址欄傳參。跟form直接傳參一樣，後臺可以接受。
dataPanel.store.proxy.url = ‘/Training/myProjectInfoController/getAllProjectInfo.action?deptId=‘
+ id;
dataPanel
.setTitle("<font color=red>"
+ (workerPanel.getSelectionModel().getSelection())[0].data.deptName
+ "</font>部門信息");// ExtJS中的標題等字符串屬性支持HTML語言，直接設置格式。
dataPanel.store.load();// dataPanel.store：獲取dataPanel的store屬性的值，dataPanel.store.load()：調用取得的值的load()方法,用來重新加載store數據，實現grid刷新
});

// 初始工人信息Panel，同下
workerPane2 = Ext.create(‘Ext.grid.Panel‘, {// Ext.grid.Panel可以直接顯示grid的panel不需要create一個Grid放置panel中
title : ‘BBBBBB‘,// 隨便取標題
border : false,// 沒有邊框
store : theStore,
hideHeaders : true,
columns : [{
dataIndex : ‘projectName‘,
sortable : false,// 不能排序
width : 180
}]
});
// 初始工人信息Panel，用來實現折疊效果的panel
workerPanel3 = Ext.create(‘Ext.grid.Panel‘, {// Ext.grid.Panel可以直接顯示grid的panel不需要create一個Grid放置panel中
title : ‘CCCCCCC‘,// 隨便取標題
border : false,// 沒有邊框
store : theStore,
hideHeaders : true,// 隱藏grid每列數據的標題
columns : [{
dataIndex : ‘projectName‘,
sortable : false,// 不能排序
width : 180
}]
});

// 左邊伸縮欄
westPanel = Ext.create("Ext.panel.Panel", {
collapsible : true,// 這個屬性設置此panel容易可以隱藏（最小化）
title : ‘分類查看‘,
layout : ‘accordion‘,// 這個屬性設置此panel容易可以實現折疊效果
width : 200,
region : ‘west‘,
iconCls : ‘reset‘,
items : [workerPanel, workerPane2, workerPanel3]
// 放置三個小panel容器，如上定義
});

// 創建容器，用來存放整個窗體的組件，並且在下面直接放置到win中。
theContainer = Ext.create(‘Ext.container.Container‘, {
layout : ‘border‘,
items : [dataPanel, westPanel]
});

// 判斷是否已經創建最外邊窗體，如果創建了，（JS是弱類型語言，認為null相當於false）
if (!win) {
win = desktop.createWindow({ // 所以此處的目的是：如果win已經初始化存在了，那麽就不新創建窗體，直接調用下面的show（）方法
// 下面屬性不具體解釋，詳細可以查看API手冊
id : ‘defaultsWindow-win‘,
title : ‘工程詳細信息設置‘,
width : 1100,
height : 600,
iconCls : ‘icon-grid‘,
animCollapse : false,
constrainHeader : true,
layout : ‘fit‘,
items : [theContainer]
// 把創建好存放所有組件的窗體放置到外圍窗體中
});
}
win.show();// 顯示窗體。
return win;// 把窗體的句柄（相當於內存引用）返回
},
// 創建窗體的方法結束

// 顯示一個對話框的方法，暫時帶有一個用來判斷是什麽按鈕的屬性
proAction : function(btn, dataPanel, workerPanel) {
var selectData;// 預設一個用來存放被選中的數據的變量
var innerPanel;
// 如果選擇的是復制
if ("copy" == btn) {
if (dataPanel.getSelectionModel().getSelection().length == 0) {
Ext.hx.msg("提示", "請先選擇您要復制的行");
return;
}

selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel
.getSelectionModel().getCount()
- 1].data;// 如果是刪除的話需要讀取被選中的數據，就初始化被selectData。
}
// 如果選擇的是新建
if ("create" == btn) {
// 新建的時候設置選擇的行為null，沒有值。也就不會在創建的panel中顯示當前行。此處是因為在復制的時候會去讀取。
selectData = null;
}

// 如果選擇的是復制
if ("update" == btn) {
selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的記錄組成的數組。
}

// 如果選擇的是刪除
if ("delete" == btn) {
var oneDate;// 預設一個用來存放一條數據進行操作的變量
var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的記錄組成的數組。
// 判斷如果還沒有選擇任何行就提示並且返回方法
if (records.length == 0) {
Ext.hx.msg("提示", "請先選擇您要刪除的行");
return;
}

// 遍歷所有的數組然後設置裏面的各種標誌
var array = new Array();// 預設一個用來存放新的data的數組
for (var i = 0; i < records.length; i++) {
oneDate = records[i].data;// 取出其中一條
oneDate.deleteFlg = true;// 設置刪除標誌
array.push(oneDate);// 放置到數組中
}

// 用ajax來進行後臺交互
Ext.Ajax.request({
url : ‘/Training/myProjectInfoController/deleteProjectInfo.action‘,
method : ‘POST‘,
success : function(res, opts) {// 交互成功的時候
Ext.hx.msg("提示", ‘刪除成功!‘);// 提示
dataPanel.store.load();// 表格數據刷新
},
failure : function(res, opts) {
Ext.hx.msg("提示", ‘刪除失敗!‘);
},
params : {
jsonString : Ext.JSON.encode(array)
// 調用ExtJS內置對象的方法，把數組轉換成json字符串
},
scope : this
// 作用範圍本頁。//具體不知道，沒用。、
});

return;// 執行完成操作馬上返回，不執行下面代碼。
}

/* 下面定義一系列用來輸入的文本框 */
deptBoxStore=Ext.create(‘Ext.data.Store‘, {
fields : [{
name : ‘deptId‘,
type : ‘String‘
}, {
name : ‘deptName‘,
type : ‘String‘
}],
proxy : {
type : ‘ajax‘,
method : ‘POST‘,
url : ‘/Training/DeptInfoController/getAllDeptInfo.action‘,
reader : {
type : ‘json‘,// 用json字符串
root : ‘root‘
}
},
autoLoad : true
});
// 下面是一個下來選擇菜單，用來下拉選擇部門。
var dptBox = Ext.create("Ext.form.field.ComboBox", {
fieldLabel : ‘部門選擇‘,
store :deptBoxStore ,
displayField : ‘deptName‘,
valueField : ‘deptId‘,
allowBlank : false,// 不允許為空
editable : false,// 不允許編輯
x : 10,
y : 20
});
//設置上面部門選擇的Combox默認值
deptBoxStore.load({
callback : function(records) {
dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);
}
});

// 各種輸入框，制定value（默認值）在沒有selectData是null（即if ("create" ==
// btn)的時候）設置為“”（空字符串），否則分別取出選擇行的每一個數據。作為默認數據，
var projectIdField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘項目號‘,

x : 10,
y : 20,
value : selectData != null ? selectData.projectId : ""
});
var projectCodeField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘項目序號‘,

x : 10,
y : 50,
value : selectData != null ? selectData.projectCode : ""
});
var projectNameField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘項目名稱‘,
allowBlank : false,
blankText : ‘不可以為空‘,

x : 10,
y : 80,
value : selectData != null ? selectData.projectName : ""
});
var constructionUnitField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘建設單位‘,

x : 10,
y : 110,
value : selectData != null
? selectData.constructionUnit
: ""
});
var startDateField = Ext.create(‘Ext.form.field.Date‘, {
format : ‘Y-m-d h:m:s ‘,
fieldLabel : ‘開工日期‘,
blankText : ‘不可以為空‘,
allowBlank : false,

x : 10,
y : 140,
value : selectData != null
? selectData.startDate
: new Date()
});
var endDateField = Ext.create(‘Ext.form.field.Date‘, {
format : ‘Y-m-d h:m:s ‘,
fieldLabel : ‘竣工日期‘,
blankText : ‘不可以為空‘,
allowBlank : false,

x : 10,
y : 170,
value : selectData != null
? selectData.endDate
: new Date()
});
var qualityTargetField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘質量目標‘,

x : 10,
y : 200,
value : selectData != null ? selectData.qualityTarget : ""
});
var projectLeaderField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘項目負責人‘,

x : 10,
y : 230,
value : selectData != null ? selectData.projectLeader : ""
});
var projectStatusField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘項目狀態‘,

x : 10,
y : 260,
value : selectData != null ? selectData.projectStatus : ""
});
var qualificationField = Ext.create(‘Ext.form.field.Text‘, {
fieldLabel : ‘需要資質‘,

x : 10,
y : 290,
value : selectData != null ? selectData.projectStatus : ""
});

var submitButton = Ext.create(‘Ext.button.Button‘, {
text : ‘確定‘,
x : 10,
y : 320,
value : selectData != null ? selectData.projectStatus : "",
handler : function() {
var arr = new Array();
// 上面說道的JS的定義對象的方法，
/**
* ####################################### 註意JS中有如下語法： var
* object={ paramter1:value1, paramter2:value2, paramter3:value3 }
* object.paramter1可以直接獲得value1
* #####################################
*/
var data = {
projectId : projectIdField.getValue(),
projectCode : projectCodeField.getValue(),
projectName : projectNameField.getValue(),
constructionUnit : constructionUnitField.getValue(),
startDate : startDateField.getValue(),
endDate : endDateField.getValue(),
qualityTarget : qualityTargetField.getValue(),
projectLeader : projectLeaderField.getValue(),
projectStatus : projectStatusField.getValue(),
qualification : qualificationField.getValue(),
deptId : dptBox.getValue(),
modifyFlg : "update" == btn ? true : false
};

// 上面定義的data有了projectId，projectCode，······deptId，modifyFlg這些屬性，可以直接data.modifyFlg取得值。
if (!confirm("確定？")) {// confirm("確定？")彈出對話框，顯示確定？點擊是的時候返回true，此處判斷如果端機否，直接返回方法不執行下面語句。
return;
}
arr.push(data);// 把設置好屬性的data對象放置到arr數組中。

// 用AJAX跟後臺交互。
Ext.Ajax.request({
url : ‘/Training/myProjectInfoController/saveProjectInfo.action‘,
params : {
jsonString : Ext.JSON.encode(arr)
},
success : function(response) {
Ext.hx.msg("提示", "成功");
var dialog = Ext.getCmp(‘theDialog‘);// Ext.getCmp（String
// comID）;傳入組件ID，返回組件句柄（內存引用）
dataPanel.store.load(); // 刷新panel不解釋
dialog.close();// 把窗體關閉（不顯示）
dialog.destroy();// 把窗體銷毀（清空內存）
},
failure : function(response) {// 失敗提示
Ext.hx.msg("提示", "失敗");
}
});
}
});
var resetButton = Ext.create(‘Ext.button.Button‘, {
text : ‘重置‘,
x : 70,
y : 320,
value : selectData != null ? selectData.projectStatus : "",
handler : function() {
/*
* API上抄來的，不知道什麽意思。 up( String selector ) : Container
* Walks up the ownerCt axis looking for an ancestor
* Container which matches the passed simple selector.
*/
this.up(‘form‘).getForm().reset();// 查找form上面的form（記住這麽用吧，說不清楚。仔細看
// innerPanel =
// Ext.create(‘Ext.form.Panel‘,
// {
// 這句就知道了。）向上找form元素獲取form表單，然後重置
}
});

// 創建用來進行輸入的文本框數組
/**
* 此處使用的是Ext.form.Panel目的是為了上面的this.up(‘form‘).getForm().reset();
*/
innerPanel = Ext.create(‘Ext.form.Panel‘, {// 創建一個表單控件，
id : ‘innerPanel‘,
height : "100%",
width : "100%",
layout : {
type : ‘absolute‘
},
id : ‘innerPanel‘,
waitMsgTarget : true,// 顯示錯誤提示的小嘆號

fieldDefaults : {
labelWidth : 85,
msgTarget : ‘side‘// 錯誤提示的字體
},
items : [dptBox, projectCodeField, projectNameField,
constructionUnitField, startDateField, endDateField,
qualityTargetField, projectLeaderField, projectStatusField,
qualificationField, submitButton, resetButton]
});

// 準備好一個用來顯示窗體的dialog，實際上是一個窗體
var dlalog = Ext.create(‘Ext.window.Window‘, {
id : ‘theDialog‘,
title : ‘要點擊之後顯示的窗體‘,
height : 500,
width : 300,
layout : ‘fit‘,
items : [innerPanel],
modal : true
// 模態窗體，顯示的時候不允許操作後面的控件。
});
dlalog.show();
}
// 顯示一個對話框的方法結束
});

Ext 5.0案例 ~轉~學習Extjs 5.0值得一看