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. }
因为FineUI是开源的,所以弄出好玩的东西我都会记录下来,可能我找到的方法不是最好的,所以请各路大神多指点。