ASP.NET-FineUI开发实践-2

浏览数：54 / 时间：2015年06月09日

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数据时候用到。

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.       }