MES開發(fā)與應用 課件 3.10 工業(yè)管理軟件開發(fā)基礎-行為的開發(fā)實現(xiàn)

3.10行為的開發(fā)實現(xiàn)深圳市信息職業(yè)技術學院目

錄行為的使用場景01行為的腳本模板02行為的開發(fā)步驟03行為的開發(fā)示例04知識回顧屬性變更事件使用場景介紹；列表屬性變更事件的開發(fā)示例；列表屬性變更事件知識擴展；表單屬性變更事件的開發(fā)示例。學習目標通過本節(jié)學習可以：掌握行為的使用步驟；掌握行為方法的使用；掌握行為的開發(fā)實現(xiàn)；01行為的使用場景行為的使用場景行為的使用場景在前端開發(fā)中，行為（Behavior）是指在特定事件或條件下觸發(fā)的一系列操作或邏輯。行為可以用于增強用戶界面的交互性、實現(xiàn)復雜的功能或改變頁面的狀態(tài)。常見行為使用場景：用戶交互：行為可以用于響應用戶的交互操作，例如單擊、雙擊等。表單驗證和提交：在表單開發(fā)中，行為可以用于驗證用戶輸入的數(shù)據(jù)以及處理表單的提交。動態(tài)內(nèi)容加載：行為可以用于實現(xiàn)動態(tài)內(nèi)容的加載和更新。狀態(tài)管理和切換：行為可以用于管理頁面或組件的狀態(tài)，并實現(xiàn)狀態(tài)之間的切換。數(shù)據(jù)處理和操作：行為可以用于處理和操作數(shù)據(jù)。通過定義行為，可以在特定的事件或條件下對數(shù)據(jù)進行處理、轉(zhuǎn)換或操作。行為的使用介紹行為的使用介紹工業(yè)管理軟件中，行為的使用主要是在框架默認生成的視圖中添加額外的處理邏輯，如數(shù)據(jù)、界面樣式、操作邏輯的處理等。命名規(guī)范：行為的js文件以Behavior結尾說明：1、一個界面可以使用多個行為；2、行為的js文件，為了統(tǒng)一管理規(guī)范，建一個Behaviors文件夾，將行為的js文件統(tǒng)一存放到該文件夾下(如果行為的文件較多，可以在對應功能文件夾下建Behaviors文件夾，方便查找)；3、行為的定義：Ext.define(名稱空間，不和其他行為命名空間沖突',{});02行為的腳本模板行為的腳本模板行為的腳本模板從行為的模板腳本可以看出，行為中提供了5個方法，view創(chuàng)建前的方法beforeCreate，View創(chuàng)建后的方法onCreated，view就緒的方法onViewReady，view顯示的方法onShow，view數(shù)據(jù)加載后的方法onDataLoaded，這5個方法可以根據(jù)具體的業(yè)務場景選擇合適的方法進行業(yè)務處理。Ext.define('SIE.Web.Demo.Behaviors.AddBehavior',{//view創(chuàng)建之前beforeCreate:function(view){console.log("beforeCreate");},//view創(chuàng)建之后onCreated:function(view){console.log("onCreated");},//view就緒onViewReady:function(view){console.log("onViewReady");},//view顯示onShow:function(view){console.log("onshow");},//view數(shù)據(jù)加載后onDataLoaded:function(view){console.log("onDataLoaded");},});03行為的開發(fā)步驟行為的使用步驟行為的使用步驟創(chuàng)建BehaviorJS腳本文件，并且JS文件需要設置“生成操作”為“嵌入的資源”；編寫B(tài)ehaviorJS代碼，代碼中可實現(xiàn)beforeCreate、onCreated、onViewReady、onShow、onDataLoaded5個方法，根據(jù)實際業(yè)務選擇其中的一個或者多個方法進行實現(xiàn)；在實體對應的ViewConfig界面配置中使用Behavior，通過View.AddBehavior("行為的命名空間");進行行為的使用。04行為的開發(fā)示例思考題讀者管理狀態(tài)為禁用時，行背景色設置為紅色，如何實現(xiàn)？行為的使用示例開發(fā)步驟在讀者管理界面端中添加文件夾，命名為Behaviors，添加Js文件嵌入到資源。行為的使用示例開發(fā)步驟重寫行為的beforeCreate方法，在方法中通過表格配置的獲取行樣式getRowClass方法中設置背景色。行為的使用示例開發(fā)步驟在界面使用行為。行為的使用示例開發(fā)步驟效果。知識擴展知識擴展平臺封裝實現(xiàn)的前景色包括。知識擴展知識擴展平臺封裝實現(xiàn)的背景色包括。思考題如果要設置為平臺封裝之外的行前景色和背景色，在beforeCreate的getRowClass方法中無法控制，那有沒有其他的方式實現(xiàn)行樣式的變更呢？行樣式變更的實現(xiàn)開發(fā)實現(xiàn)可以通過注冊刷新事件，來更改對應的行樣式，在行為的onViewReady方法中注冊刷新事件。onViewReady:function(view){

varme=this;

if(view.isListView){//行變色

vargrid=view._control.getView();grid.mon(grid,'refresh',me.OnRefresh);

}

},OnRefresh:function(grid,record){

varrowData=record;

//顯示紅色

if(rowData.length>0){

for(vari=0;i<rowData.length;i++){

vardata=rowData[i];

if(data.getState()===0){grid.getRow(i).style.backgroundColor='red';

}

}

}

},注冊表格的刷新事件刷新事件激活后執(zhí)行的方法循環(huán)數(shù)據(jù)行根據(jù)屬性State的值設置行的背景色，這里的背景色也支持rgb的設置思考題通過行為更改列的前景色和背景色，又要如何實現(xiàn)呢？列樣式變更的實現(xiàn)開發(fā)實現(xiàn)在行為的beforeCreate方法中循環(huán)表格的列去更改樣式，實現(xiàn)如下beforeCreate:function(meta,curEntity){

vargridConfig=meta.gridConfig;gridConfig.columns.forEach(function(columnConfig){

if(columnConfig.dataIndex==='State'){

varconfig={renderer:function(value,cellmeta,record,rowIndex,colIndex,store,view){

if(record.data.State===1){

//cellmeta.style="color:yellow"http://前景色cellmeta.style="background:yellow";//背景色

}

if(value===0)

return

"禁用";

else

if(value===1)

return

"可用";

}

};Ext.merge(columnConfig,config);

}

})},獲取表格配置循環(huán)表格的列要更改哪一列的控制列的渲染方法列的前景色和背景色的設置列返回值的處理將config對象的屬性合并到columnConfig對象中，并返回合并后的結果。如果columnConfig和config中存在相同的屬性，則config中的屬性值將覆蓋columnConfig中的屬性值練習1、行為生命周期的5個方法，執(zhí)行的先后順序是？（）A：beforeCreate->onViewReady->onCreated->onShow->onDataLoaded；B：onViewReady->beforeCreate->onCreated->onShow->onDataLoaded；C：beforeCreate->onCreated->onViewReady->onDataLoaded->onShow；D：beforeCreate->onCreated->onViewReady->onShow->onDataLoaded；2、行為生命周期的5個方法中，哪個方法會執(zhí)行多次？（）A：beforeCreate；B：onViewReady；C：onCreat