ASP.NET-FineUI開發實踐-4

時間 2020-06-15

標籤 asp.net asp fineui 開發實踐欄目 ASP 简体版

原文原文鏈接

最近實在沒時間研究東西，FineUI一直也沒進一步實踐，可是仍是很想學點東西，因此找了個課題研究了下，在論壇裏看見了又下角的提醒，本身想了想作了一個，我不是大神，接觸EXTJS不多，就是用到哪看哪，沒有系統的學習，因此此次作的不細只是提供下思路和學習方法，可讓初學者借鑑探討。如下環境爲官方實例FineUI4.0.6。javascript

1.JS文件html

首先運行項目進入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>java

最後一個是語言包，前兩個都是FineUI本身基於EXTJS寫的js包，打開有看到ext-part1是壓縮（沒有格式）的，ext-part2沒有壓縮，能夠當作是FineUI寫的js方法的加強或者重寫。json

default.aspx 在最後還引用了default.js文件，打開後都是本頁的一些配置文件，寫在F.ready()裏，頁面加載執行。這裏要重申下FineUI的NO js 是頁面上儘可能減小JS的使用，其實都是打包好的。基於EXTJS.NET 不可能沒有JS。ide

2.實現右下角提醒準備post

2.1又下角的提醒很常見，我借鑑了FineUI論壇裏的這個學習

能夠看見基本元素有標題，翻頁，關閉，不可拖動，不可調整大小，在頁面頂端等。這讓我想到了window組件，window打開時就是層級置頂的，並且有標題、不可拖動、關閉、不可調整大小等屬性。頁面裏的消息我選擇了Label控件。動畫

傳圖片是由於不能一下看懂的能夠本身把代碼敲上理解一下。 Lable裏 Label="1" ShowLabel="false" 沒用，我寫的玩的。this

2.2下面要準備的就是顯示，FineUI window.cs文件裏提供了獲取顯示窗體的客戶端腳本的方法GetShowReference，還有其餘各類重載，到最後用返回的是f_show的js方法。要顯示個人window_tips就是要重寫f_show方法，在ext-part2.js裏一下就搜到了，複製粘貼，取個名字叫f_showTips，url

簡單的看一下就是重寫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方法都是現成的誰也沒說不能改。誰要是有現成的例子給我也共享個，我很願意學習學習。