最近实在没时间研究东西,FineUI一直也没进一步实践,但是还是很想学点东西,所以找了个课题研究了下,在论坛里看见了又下角的提醒,自己想了想做了一个,我不是大神,接触EXTJS很少,就是用到哪看哪,没有系统的学习,所以这次做的不细只是提供下思路和学习方法,可以让初学者借鉴探讨。以下环境为官方实例FineUI4.0.6。
1.JS文件
首先运行项目进入default.aspx,右键查看源文件看见引用了三个JS文件<script src="/extjs/ext-part1.js" type="text/javascript"></script><script src="/extjs/ext-part2.js" type="text/javascript"></script><script src="/extjs/lang/zh_CN.js" type="text/javascript"></script>
最后一个是语言包,前两个都是FineUI自己基于EXTJS写的js包,打开有看到ext-part1是压缩(没有格式)的,ext-part2没有压缩,可以看成是FineUI写的js方法的增强或者重写。
default.aspx 在最后还引用了default.js文件,打开后都是本页的一些配置文件,写在F.ready()里,页面加载执行。这里要重申下FineUI的NO js 是页面上尽量减少JS的使用,其实都是打包好的。基于EXTJS.NET 不可能没有JS。
2.实现右下角提醒准备
2.1又下角的提醒很常见,我借鉴了FineUI论坛里的这个
可以看见基本元素有标题,翻页,关闭,不可拖动,不可调整大小,在页面顶端等。这让我想到了window组件,window打开时就是层级置顶的,而且有标题、不可拖动、关闭、不可调整大小等属性。页面里的消息我选择了Label控件。
传图片是因为不能一下看懂的可以自己把代码敲上理解一下。 Lable里 Label="1" ShowLabel="false" 没用,我写的玩的。
2.2下面要准备的就是显示,FineUI window.cs文件里提供了获取显示窗体的客户端脚本的方法GetShowReference,还有其他各种重载,到最后用返回的是f_show的js方法。要显示我的window_tips就是要重写f_show方法,在ext-part2.js里一下就搜到了,复制粘贴,取个名字叫f_showTips,
简单的看一下就是重写iframeUrl和标题,然后再执行wnd.show()(wnd就是window的缩写)方法,这个就够用了wnd.show就不重写了,也在这个js里,搜索‘show:’不是很难看懂。同样找到了关闭的方法 f_hide也看到了怎么实现的 ,还是用这个,没必要写新的。
2.3显示和关闭准备好了就是信息的显示还有翻页功能,明显window的标题那一行就有标题关闭最大化什么的,要自定义添加俩按钮还得用脑子,一下子就想起来default.js里预备下了
这个是FineUI4.0新加的,在树菜单的顶上加了个设置的图标点完了显示个菜单。正常的往回缩怎么能有个设置按钮呢,.aspx文件里也没有这个的按钮所以肯定就是js自己做了什么。
看的懂的参数第一个是类型,第二个是提示,第三个不知道,第四个就是按钮点击触发的方法。要实验我的蒙的对不对要先把window_tips的ClientID传过去,详见页面上GetClientIDS方法,在js接一下,
怎么实践的就不说了就是传个带ShowHeader="true"的控件看看有没有加上就行,是成功了,但是跑到关闭那个X的右侧了,因为是新增的,插入到左侧我也不会,干脆连关闭一块新增,但是都是设置图标,应该跟tyoe有关系,gear是设置的意思,其他的type我也没不知道啊。显示的是个图标那肯定跟样式有关,果断F12
嗯,被发现了,他旁边那个就是向左样式是x-tool-img x-tool-collapse-left,collapse是隐藏属性,隐藏-向左,左右关闭就都出来了,
window_tips.addTool({ type: ‘left‘, tooltip: ‘上一条‘, regionTool: true, handler: function (event, toolEl, panelHeader) { }); window_tips.addTool({ type: ‘right‘, tooltip: ‘下一条‘, regionTool: true, handler: function (event, toolEl, panelHeader) { } }); window_tips.addTool({ type: ‘close‘, tooltip: ‘关闭‘, regionTool: true, handler: function (event, toolEl, panelHeader) { window_tips.hide();//关闭方法 } });
关闭按钮我把关闭方法加上了。
2.4还有就是window的显示位置,提醒肯定是在右下角,在官方的教程里提到位置黄金分割点,在ext-part2.js wnd.show()里找到了定义位置的方法,
if (left !== ‘‘ && top !== ‘‘) { panel.setPosition(parseInt(left, 10), parseInt(top, 10)); } else { var bodySize = target.window.Ext.getBody().getViewSize(); var panelSize = panel.getSize(), leftTop; if (isGoldenSection) { leftTop = _calculateGoldenPosition(bodySize, panelSize); } else { leftTop = _calculateCenterPosition(bodySize, panelSize); //panel.alignTo(target.Ext.getBody(), "c-c"); } panel.setPosition(leftTop.left, leftTop.top); }
找能看的懂的,不多解释,总之在f_showTips下面加个方法
f_tipsPosition:function(){ var left = Ext.getBody().getViewSize().width - 4 - this.width; var top = Ext.getBody().getViewSize().height - 4 - this.height; this.f_property_left=left; this.f_property_top=top; this.setPosition(left, top); },
在default.js里触发,window_tips.f_tipsPosition();就行了。
2.5左右信息的图标有了,还没有方法,可以写成dopostback获取,也可以执行JS,当然是写JS,把数据放个参数里,是个json再用js解析,不提了,直接看代码。
3.完成 f_tipsPosition没粘
ext-part2.js
//显示提醒窗体; //iframeUrl窗体的url,目前未考虑传‘‘; //windowTitle窗体的title,目前未考虑传‘‘; //txthtml窗体显示的数据 //width窗体的宽,目前未考虑传‘‘; //height窗体的高,目前未考虑传‘‘; f_showTips: function (iframeUrl, windowTitle,txthtml, width, height) { if (typeof (iframeUrl) === ‘undefined‘) { iframeUrl = this.f_iframe_url; } if (typeof (windowTitle) === ‘undefined‘) { windowTitle = this.title; } window.label_html=txthtml;//显示数据存到全局参数里 window.label_html_num=0;//第一次打开重置查看到第几条 this.f_showtips_label(label_html);//显示方法,传入数据 windowTitle="消息提醒"+" "+(label_html_num+1)+"/"+txthtml.length;//拼写标题 //原show方法 F.wnd.show(this, iframeUrl, windowTitle, this.f_property_left, this.f_property_top, this.f_property_position, this.id + ‘_Hidden‘, width, height); }, //显示信息方法 //txthtml信息 //t翻页方向 f_showtips_label:function(txthtml,t){ //计算翻到第几页了 var nub=label_html_num; if (t==‘left‘) {label_html_num=window.label_html_num-1;} if (t==‘right‘) {label_html_num=window.label_html_num+1;} if (typeof (txthtml[label_html_num]) == ‘undefined‘) { label_html_num=nub; } //设置标题 this.setTitle("消息提醒"+" "+(label_html_num+1)+"/"+txthtml.length); //显示信息,JQ方法,ID写死了,JSON格式所以写成 txthtml[0] $(‘#window_tips_window_tips_label-inputEl‘).text(txthtml[label_html_num]); }
default.js
//新增翻页按钮 window_tips.addTool({ type: ‘left‘, tooltip: ‘上一条‘, regionTool: true, handler: function (event, toolEl, panelHeader) { window_tips.f_showtips_label(label_html, ‘left‘);//触发翻页方法 } }); //新增翻页按钮 window_tips.addTool({ type: ‘right‘, tooltip: ‘下一条‘, regionTool: true, handler: function (event, toolEl, panelHeader) { window_tips.f_showtips_label(label_html, ‘right‘);//触发翻页方法 } }); //新增关闭按钮 window_tips.addTool({ type: ‘close‘, tooltip: ‘关闭‘, regionTool: true, handler: function (event, toolEl, panelHeader) { window_tips.f_hide(); } }); //定位坐标 window_tips.f_tipsPosition(); //网上找的 Ext.EventManager.onWindowResize(window_tips.f_tipsPosition, window_tips); //window大小改变时,重新设置位置 Ext.EventManager.on(window, ‘scroll‘, window_tips.f_tipsPosition, window_tips); //滚动时重新设置位置
传值
protected void MenuButton1_Click(object sender, EventArgs e) { List<string> liststr = new List<string>(); liststr.Add("消息一"); liststr.Add("消息二"); var resultObj = JsonConvert.SerializeObject(liststr); PageContext.RegisterStartupScript(window_tips.GetShowTips(String.Empty, String.Empty, Unit.Empty, Unit.Empty, resultObj)); }
Window.cs加了方法
/// <summary> /// 返回右下角提醒JS /// </summary> /// <param name="iframeUrl">地址</param> /// <param name="windowTitle">标题</param> /// <param name="width">宽</param> /// <param name="height">高</param> /// <param name="innerHtml">JSON值提醒的HTML</param> /// <returns></returns> public string GetShowTips(string iframeUrl, string windowTitle, Unit width, Unit height, string innerHtml) { if (!String.IsNullOrEmpty(iframeUrl)) { iframeUrl = ResolveIFrameUrl(iframeUrl); } iframeUrl = JsHelper.GetJsStringWithScriptTag(iframeUrl); windowTitle = JsHelper.GetJsString(windowTitle); if (width != Unit.Empty && height != Unit.Empty) { return String.Format("{0}.f_showTips({1},{2},{3},{4},{5});", ScriptID, iframeUrl, windowTitle, innerHtml, width.Value, height.Value); } else { return String.Format("{0}.f_showTips({1},{2},{3});", ScriptID, iframeUrl, windowTitle, innerHtml ); } }
4.扩展
遗憾的是没有时间在完善下,标题,传iframeUrl,标题,定义大小都没写。显示和隐藏的滑动效果没有,这个还得学...,很突兀的显示和关闭了,FineUI并没有提供动画的方法。
5.后记
其实实现的方法有很多,我又不是专业的,自己弄出来有成就感,只是给刚入门的人看的,想说的是FineUI中提供了很多现成的可以学习的代码,肯研究的都能自己做点东西,FineUI是开源的后台的C#方法和js方法都是现成的谁也没说不能改。谁要是有现成的例子给我也共享个,我很愿意学习学习。