ASP.NET-FineUI開發實踐-2

  FineUI好處之一在於No JS，這裏的No JS並非不使用JS，JS對於ASP.Net是必不可少的，只是FineUI把大部分JS封裝，若是想用，後臺提供了不少方法返回JS,Get...Reference都是返回JS代碼用的，不只在一些簡單的頁面前臺變的很乾淨，並且大大減小了開發週期。我也學習了這個優勢，集合FineUI打包了不少跟項目有關的通用JS，好比彈出選擇人員窗口，選擇部門窗口，彈出頁面的功能後臺點擊事件能夠解決，但我綁定了OnClientClick 事件要比觸發後臺的OnClick事件快了不少，關閉了按鈕的EnablePostBack屬性就是執行前臺JS不用回發，感受很受用。

  分享幾個提取出來的JS以結合程序邏輯方便使用

1.Window控件顯示

01.F('windowID').f_show(strURL, '選擇部門', 900, 500);  

　　發送URL，title，大小。這裏要注意控件的ClientIDMode="Static"屬性，要不前臺獲取不到

 

2.顯示隱藏控件

EXTJS我也沒學過，找了很久才找到，這個代碼實現了前臺隱藏一個模塊，我把查詢放裏面了，由於RegionPanel縮回去又彈出一塊來，不能說很差看但佔的地大了，查詢條件多又沒地放，查完了手動隱藏，後臺回發的方法也能實現可是有點慢，.hidden是獲取顯示狀態 setVisible設置。

01.<f:RegionPanel ID="RegionPanel1" runat="server" ShowBorder="false">  
02.       <Regions>  
03.           <f:Region ClientIDMode="Static" runat="server" ShowBorder="true" ID="Region1" Position="Top"  
04.               ShowHeader="false" Title="查詢" Hidden="true" Split="true" EnableCollapse="false"  
05.               HideMode="Visibility">  
06.               <Items>  
07.                   <f:Form runat="server" LabelAlign="Right" ShowBorder="false" ShowHeader="false" ID="Form2"  
08.                       Collapsed="False" BoxConfigAlign="Center">  
09.                       <Rows>  
10.                           <f:FormRow runat="server" ColumnWidths="50% 50%">  
11.                               <Items>  
12.                                   <f:TriggerBox TriggerIcon="Search" ClientIDMode="Static" ID="txtUseDeptName" runat="server"  
13.                                       Label="部門" BoxMargin="10" EnableEdit="false" EmptyText="請選擇部門" >  
14.                                   </f:TriggerBox>  
15.                                   <f:DropDownList runat="server" ClientIDMode="Static" ID="ddlPos" Label="職位">  
16.                                   </f:DropDownList>  
17.                               </Items>  
18.                           </f:FormRow>  
19.                           <f:FormRow ID="FormRow1" runat="server" ColumnWidths="50% 50%">  
20.                               <Items>  
21.                                   <f:TextBox Label="登陸名" ClientIDMode="Static" ID="txtLgName" runat="server">  
22.                                   </f:TextBox>  
23.                                   <f:TextBox Label="用戶名" ClientIDMode="Static" ID="txtUserName" runat="server">  
24.                                   </f:TextBox>  
25.                               </Items>  
26.                           </f:FormRow>  
27.                       </Rows>  
28.                       <Toolbars>  
29.                           <f:Toolbar runat="server">  
30.                               <Items>  
31.                                   <f:Button Text="查詢" Icon="Magnifier" OnClick="btnQuery_Click" runat="server" ID="btnQuery">  
32.                                   </f:Button>  
33.                                   <f:Button EnablePostBack="false" Text="取消查詢" Icon="Cross" OnClientClick="ShowSearch()"  
34.                                       runat="server" ID="Button3">  
35.                                   </f:Button>  
36.                                   <f:Button EnablePostBack="false" Text="重置" ToolTip="重置查詢條件" Icon="Reload" OnClientClick="ClearSearch()"  
37.                                       runat="server" ID="Button2">  
38.                                   </f:Button>  
39.                               </Items>  
40.                           </f:Toolbar>  
41.                       </Toolbars>  
42.                   </f:Form>  
43.               </Items>  
44.           </f:Region>  

　　獲取grid獲得焦點，是選擇行的樣式，後臺查詢行號經過FineUI.PageContext.RegisterStartupScript()輸出到前臺獲取焦點，後臺沒找到獲取焦點的方法才寫的，不必重載grid數據時候用到。

 

Region 隱藏頭部 head：F('<%= leftRegion.ClientID%>').collapseMode = 'mini';

4.直接經過行號修改指定列內容

1 01.function EditRowbyindex(index,value) {  
2 02.           var grid = F('Grid1');  
3 03.           grid.getView().focusRow(index);  
4 04.           var row = grid.getView().getNode(index);  
5 05.           $(row).find('.x-grid-cell-ColumnsID div.x-grid-cell-inner').text(value);  

 

列 ClientIDMode="Static" 仍是重載grid很慢（硬傷），觸發前臺更改，反正也保存完了。這裏要注意引用js/jquery-1.10.2.min.js文件，find就是find的class 能夠連續點好幾個一層一層的找，按F12一下就找到了，.text就是裏面顯示的信息

 

grid綁定就是把數據序列化後輸出到前臺經過前臺EXTJS渲染和顯示，大數據量時明顯谷歌比IE快，由於谷歌處理JS就是快，官方建議100條就使用數據庫分頁，我又沒寫存儲過程因此也一直使用仿數據庫分頁，就是把數據放緩存裏，這也是跟官網例子學的。模擬的數據庫分頁比一次性加載快了不少，但也遇到不少問題，有時間再整理出來。

5.獲取iframe

項目裏iframe必不可少，由於個人全是頁面級使用FineUI，之前項目裏樹控件是Ztree的，原本就作成單獨頁面能夠用iframe調用，因此想直接執行ztree頁面裏js就好了。

01.function GetiframeWindow(ifrmname) {  
02.            var ifrm1 = Ext.getCmp(ifrmname); //獲得對象   
03.            var iframe = Ext.DomQuery.selectNode('iframe', ifrm1.body.dom); //獲得iframe對象   
04.            var c = iframe.contentWindow; //轉爲Window對象   
05.            return c;  
06.        }  

　　調用js直接c.refreshTree就能夠了。還能夠直接寫__doPostBack觸發子頁面的後臺事件，爽急了。

 

修改地址是這個

1 01.function openifr(url) {  
2 02.           var ifrm1 = Ext.getCmp('Region2'); //獲得對象   
3 03.           var iframe = Ext.DomQuery.selectNode('iframe', ifrm1.body.dom); //獲得iframe對象   
4 04.           iframe.src = url;  
5 05.       }  

由於FineUI是開源的，因此弄出好玩的東西我都會記錄下來，可能我找到的方法不是最好的，因此請各路大神多指點。