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

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

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

}

}

}

},注冊(cè)表格的刷新事件刷新事件激活后執(zhí)行的方法循環(huán)數(shù)據(jù)行根據(jù)屬性State的值設(shè)置行的背景色，這里的背景色也支持rgb的設(shè)置思考題通過行為更改列的前景色和背景色，又要如何實(shí)現(xiàn)呢？列樣式變更的實(shí)現(xiàn)開發(fā)實(shí)現(xiàn)在行為的beforeCreate方法中循環(huán)表格的列去更改樣式，實(shí)現(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)表格的列要更改哪一列的控制列的渲染方法列的前景色和背景色的設(shè)置列返回值的處理將config對(duì)象的屬性合并到columnConfig對(duì)象中，并返回合并后的結(jié)果。如果columnConfig和config中存在相同的屬性，則config中的屬性值將覆蓋columnConfig中的屬性值練習(xí)1、行為生命周期的5個(gè)方法，執(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個(gè)方法中，哪個(gè)方法會(huì)執(zhí)行多次？（）A：beforeCreate；B：onViewReady；C：onCreat