ASP.NET-FineUI開發實踐-9(四)

標籤：style   blog   http   io   ar   java   for   sp   檔案   

現在是這麼個問題，在開發中表格是動態出來的，就是標準板是全部欄位列出，客戶要根據情況列出自己想要的，在增加操作頁面的同時要是能用前台內建的功能直接儲存到後台就好了，現在的列顯示和隱藏是不回傳的。

1.FineUI引用的extjs是ext-part1.js，這就不說了，以前截過圖，這個檔案是壓縮的，參數也是簡化的不好看，其實這個就是ext-all.js，ext-all哪來的呢，就是extjs官方執行個體裡下的，下來之後也是壓縮的，旁邊還有個不壓縮的，ext-all-debug.js ，完全可以看，那我直接看它就等於看ext-part1.js了，下面我要找到產生grid表頭的類，搜Ext.grid.一個一個找看到有Ext.grid.header，header就是頭的意思，再在這裡找，找到getColumnMenu，恩，字面意思就能看出得到列菜單，怎麼確定呢，看到個屬性是checkHandler 選擇的意思，就是選擇事件，觸發的是onColumnCheckChange，

1. onColumnCheckChange:function(checkItem, checked){var header =Ext.getCmp(checkItem.headerId);header[checked ?‘show‘:‘hide‘]();},

   　　

看到show，hide ，顯示和隱藏的意思。進一步測試，找到ext-part1.js下onColumnCheckChange，改了它，加個alert(‘1‘),儲存，重新整理，當我勾選列隱藏和顯示時彈出1，觸發成功，就是改它。2.位置找到了就是改，直接改ext-part1.js？那ext-part2就失去意義了，ext-part2是幹嘛的，FineUI自己重寫替換了好多方法，也新增了好多方法方便互動或修補bug，我直接找到了Ext.grid.Panel，就照著這個重寫就行，看到

2. if(Ext.grid.Panel){Ext.override(Ext.grid.Panel,{

   　　

分析下，如果是Ext.grid.Panel就是引用的是Ext.grid.Panel類，override搜了下API就是覆蓋重寫的意思，那好，直接重寫onColumnCheckChange，onColumnCheckChange上面的列是Ext.grid.header.Container，那麼在Ext.gird.Panel上面寫：

1. if(Ext.grid.header.Container){Ext.override(Ext.grid.header.Container,{onColumnCheckChange:function(checkItem, checked){var header =Ext.getCmp(checkItem.headerId);header[checked ?‘show‘:‘hide‘]();F.customEvent("觸發後台操作");}});}

   　　

又用到customEvent，咋用就不寫了功能是Alert.Show()，編譯，儲存，重新整理，成功觸發後台方法。3.幹觸發了沒參數我儲存啥，看見接受了兩個參數，checkItem和checkd，意思是項和選擇狀態，checkItem可定就是選擇的項，他都有什麼屬性呢，還是找到ext-all-debug.js下這個方法，

1. for(; i < itemsLn; i++){item = items[i];menuItem =newExt.menu.CheckItem({text: item.text,checked:!item.hidden,hideOnClick:false,headerId: item.id,menu: item.isGroupHeader ?this.getColumnMenu(item):undefined,checkHandler:this.onColumnCheckChange,scope:this});

   　　

首先迴圈項，就是迴圈的列頭總數，一個一個來，建立一個菜單選擇元素，然後就是屬性，那checkItem的屬性就是menuItem的屬性，那麼有

1. if(Ext.grid.header.Container){Ext.override(Ext.grid.header.Container,{onColumnCheckChange:function(checkItem, checked){var header =Ext.getCmp(checkItem.headerId);header[checked ?‘show‘:‘hide‘]();F.customEvent("觸發後台操作儲存該列隱藏顯示狀態，列名："+checkItem.text+" 列ID :"+checkItem.headerId+" 選擇狀態："+checked);}});}

   　　

 在試試，觸發後台方法，輸出結果為預期。 更改了ext-part2.js就要儲存好，如果項目裡用了，升級的時候覆蓋掉就沒有了，另外還要介紹自己修改和添加FineUI控制項的屬性，好像以前提到過在ASP.NET-FineUI開發實踐-6(三) 7 裡，處理了TriggerBox的斷行符號觸發，怎麼找到的就是轉到定義找到FineUI項目的檔案再搜尋就可以了，用到的不是特別多，可以結合ext-part2.js再次做一些改進，就不細談了。 

 

ASP.NET-FineUI開發實踐-9(四)