ExtJS做的一個信息管理界面

前段時間公司讓我們學習ExtJS，學習了一個禮拜，完成了個小練習，思來想去決定做個總結，但是又懶得敲word，於是就在代碼上每行都加上註釋，以後忘記了就翻開來看看。

在這裏給出代碼。

完成的功能如圖所示。

/**
*默認頁面
*
*@authorleaves.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中有如下語法：varobject={
*paramter1:value1,paramter2:value2,paramter3:value3}
*object.paramter1可以直接獲得value1#####################################
*
*ExtJS中所有空間創建方法都如上
*
*Ext.create(StringweightName,Mixedargs)
*所以此處args相當於一個匿名對象（沒有引用），但並非真的匿名對象
*
*/
//初始化窗體的方法
init:function(){
this.launcher={
text:'DefaultsWindow',
iconCls:'icon-grid',
//調用createWindow方法
handler:this.createWindow,
scope:this
//this指向Ext.define（這個方法用來聲明命名空間。）定義的命名空間
};
},//初始化窗體的方法結束

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

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

//創建按鈕bar組件,是上面的幾個按鈕。
varbuttonBar=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
vartheStore=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組建
varpagebar=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
varselectionModeltoGridPanel=Ext
.create('Ext.selection.CheckboxModel');//想要能進行選擇或者多選，就需要設置selModel屬性這是設置selection的模型，創建一個模型Ext.selection.CheckboxModel
//初始化gridPanel
dataPanel=Ext.create('Ext.ux.LiveSearchGridPanel',{
title:'<fontcolor=red>工程詳細信息</font>',
region:'center',
width:'100%',
height:'96%',
store:theStore,
selModel:selectionModeltoGridPanel,
//一系列行，不解釋，也可以varcolumn=[`````````]然後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列的值
varid=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("<fontcolor=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();//顯示窗體。
returnwin;//把窗體的句柄（相當於內存引用）返回
},
//創建窗體的方法結束

//顯示一個對話框的方法，暫時帶有一個用來判斷是什麼按鈕的屬性
proAction:function(btn,dataPanel,workerPanel){
varselectData;//預設一個用來存放被選中的數據的變量
varinnerPanel;
//如果選擇的是複製
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){
varoneDate;//預設一個用來存放一條數據進行操作的變量
varrecords=dataPanel.getSelectionModel().getSelection();//先取出所有的記錄組成的數組。
//判斷如果還沒有選擇任何行就提示並且返回方法
if(records.length==0){
Ext.hx.msg("提示","請先選擇您要刪除的行");
return;
}

//遍歷所有的數組然後設置裏面的各種標誌
vararray=newArray();//預設一個用來存放新的data的數組
for(vari=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
});
//下面是一個下來選擇菜單，用來下拉選擇部門。
vardptBox=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)的時候）設置爲“”（空字符串），否則分別取出選擇行的每一個數據。作爲默認數據，
varprojectIdField=Ext.create('Ext.form.field.Text',{
fieldLabel:'項目號',

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

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

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

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

x:10,
y:140,
value:selectData!=null
?selectData.startDate
:newDate()
});
varendDateField=Ext.create('Ext.form.field.Date',{
format:'Y-m-dh:m:s',
fieldLabel:'竣工日期',
blankText:'不可以爲空',
allowBlank:false,

x:10,
y:170,
value:selectData!=null
?selectData.endDate
:newDate()
});
varqualityTargetField=Ext.create('Ext.form.field.Text',{
fieldLabel:'質量目標',

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

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

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

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

varsubmitButton=Ext.create('Ext.button.Button',{
text:'確定',
x:10,
y:320,
value:selectData!=null?selectData.projectStatus:"",
handler:function(){
vararr=newArray();
//上面說道的JS的定義對象的方法，
/**
*#######################################注意JS中有如下語法：var
*object={paramter1:value1,paramter2:value2,paramter3:value3}
*object.paramter1可以直接獲得value1
*#####################################
*/
vardata={
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("提示","成功");
vardialog=Ext.getCmp('theDialog');//Ext.getCmp（String
//comID）;傳入組件ID，返回組件句柄（內存引用）
dataPanel.store.load();//刷新panel不解釋
dialog.close();//把窗體關閉（不顯示）
dialog.destroy();//把窗體銷燬（清空內存）
},
failure:function(response){//失敗提示
Ext.hx.msg("提示","失敗");
}
});
}
});
varresetButton=Ext.create('Ext.button.Button',{
text:'重置',
x:70,
y:320,
value:selectData!=null?selectData.projectStatus:"",
handler:function(){
/*
*API上抄來的，不知道什麼意思。up(Stringselector):Container
*WalksuptheownerCtaxislookingforanancestor
*Containerwhichmatchesthepassedsimpleselector.
*/
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，實際上是一個窗體
vardlalog=Ext.create('Ext.window.Window',{
id:'theDialog',
title:'要點擊之後顯示的窗體',
height:500,
width:300,
layout:'fit',
items:[innerPanel],
modal:true
//模態窗體，顯示的時候不允許操作後面的控件。
});
dlalog.show();
}
//顯示一個對話框的方法結束
});