使用ExtJs建一个后台界面框架

本文的目的是建立一个extjs构建的后台界面。虽然官网上有不少界面，但是自己写的更熟悉不是么？

首先，页面引入文件

    <link href="@Url.Content("~/Content/ext-4.2.1.883/resources/css/ext-all-neptune.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Content/ext-4.2.1.883/bootstrap.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

接着

在ext加载了之后设置各个方位模块的布局

    Ext.onReady(function () {
        var menuTree = new Ext.Panel({
            region: 'west',
            title: '功能菜单',
            collapsible: true,
            split: false,
            autoScroll: true,
            width: 200, // give east and west regions a width
            minSize: 100,
            maxSize: 300, // specify layout manager for items
            //margins: '0 0 0 5',
            height: 1800,
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [
                @Html.Raw(ViewBag.Tree)
            ]
          });
    });

还有其他模块

   var boxNorth = new Ext.Panel({
            region: 'north',
            height: 70, // give north and south regions a height
            items: [{
                contentEl: 'logoTitle',
                border: false
            }]
        }); var boxEast = function () { };
     
        //右边翔实功能面板区
        var contentPanel = new Ext.TabPanel({
            id: 'tabs',
            region: 'center',
            deferredRender: false,
            border: true,
            //出现横向滚动条
            enableTabScroll: true,
            //重新计算页面宽度 高度
            //layoutOnTabChange: true,
            activeTab: 0,
            items: [{
                title: "<font style='margin-right:13px;'>欢   迎</font>",
                iconCls: 'tabs',
                closable: true,
                html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>',
                closable: false
            }]
        });

最后加载他们

  new Ext.Viewport({
                layout: 'border',
                defaults: { activeItem: 0 },
                //items: [boxNorth, menuTree, contentPanel, boxEast]
                items: [boxNorth, menuTree, contentPanel]
            });

 

 

把页面的一些操作方法封装起来放在主页面也方便调用

        //Ext弹出框
        extAlert = function (str) {
            Ext.MessageBox.alert("提示", str);
        };
        //Ext confirm
        extConfirm = function () {
            Ext.MessageBox.confirm();
        };
        //关闭模式化窗口
        closeWin = function (closeId) {
            var wind = Ext.getCmp(closeId);
            if (wind != null) {
                wind.close(wind);
                //wind.remove(this);
            }
        };
        //先弹窗 再关闭模式化窗口
        alertCloseWin = function (closeId, alertTxt) {
            extAlert(alertTxt);
            closeWin(closeId);
        };
        //关闭一个窗口 再打开一个窗口 手动宽高 h为0时 自动高度
        closeOpenWin = function (closeId, openId, openTitle, openUrl, w, h) {
            closeWin(closeId);
            openWin(openId, openUrl, openTitle, w, h);
        };
        //打开模式化窗口 手动宽高 h为0时 自动高度
        openWin = function (openId, openTitle, openUrl, w, h) {
            ww = document.body.clientWidth - 30;
            hh = document.body.clientHeight - 30;
            if (w == null || w.length == 0 || w == 0 || w > ww) {
                w = ww;
            }
            if (h == null || h.length == 0 || h == 0 || h > hh) {
                h = hh;
            }
            var win = new Ext.Window({
                id: openId,
                title: openTitle,
                width: w,
                height: h,
                modal: true,
                closeAction: "destroy",
                plain: true,
                draggable: true,
                constrain: true,
                maximizable: true,
                closable: true, //穿越html载入目标页
                html: '<iframe id="if' + openId + '" scrolling="auto" frameborder="0" width="100%" height="100%" src="' + openUrl + '"></iframe>'
            }).show();
        };
        //打开tab
        function openTab(openId, openTitle, openUrl) {
            var tabs = Ext.getCmp('tabs');
            var tabid = tabs.getComponent(openId);
            if (tabid) {
                tabs.setActiveTab(tabid);
            } else {
                tabs.add({
                    id: openId,
                    title: openTitle,
                    iconCls: 'tabs',
                    closable: true, //穿越html载入目标页
                    html: '<iframe id="if' + openId + '" scrolling="auto" frameborder="0" width="100%" height="100%" src="' + openUrl + '"></iframe>',
                    closable: true
                }).show();
            }
        }


        //关闭并打开一个新的选项卡
        function closeOpenTab(closeId, openId, openTitle, openUrl) {
            closeTab(closeId);
            openTab(openId, openTitle, openUrl);
        }

        //关闭tab
        function closeTab(closeId) {
            var tabs = Ext.getCmp('tabs');
            var addUserPanel = tabs.getComponent(closeId);
            if (addUserPanel != null) {
                tabs.remove(addUserPanel);
            }
        }

        //修改后刷新选项卡
        function reflashTab(getId, winId, closeID) {
            //window.parent.document.getElementById(getId).contentWindow.refreshdata(winId); closeWin(closeID);
            document.getElementById(getId).contentWindow.refreshdata(winId); closeWin(closeID);
        }

        //更新iframe
        function alignIframe(ifid) {
            var myIframe = document.getElementById(ifid);
            if (myIframe != null) {
                myIframe.src = myIframe.src;
            }
        }
        //提示框
        function showTip_(tnid, name, showhtml) {
            windoaaaw = new Ext.ux.window.Notification({
                id: tnid,
                title: name,
                width: 250,
                position: 'br',
                manager: 'demo1',
                iconCls: 'ux-notification-icon-error',
                autoCloseDelay: 20000,
                spacing: 20,
                html: showhtml,
                listeners: {
                    'beforerender': function () {
                        Sound.enable();
                        Sound.play('/Scripts/Ext.ux.window.Notification-master/notify.wav');
                        Sound.disable();
                    }
                }
            }).show();
        }

        //快速预约函数，此方法方便前台界面直接传入后台的值进行处理
        (function (href) {
            var regHref = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            };
            if (href.indexOf("time") != -1) {
                var time = regHref('time');
                var amExpert = regHref('amExpert');

                closeOpenTab('tabs', 'UserInfoListyuyue', '选择患者', '/Jjyl/ContractUser/ContractList?type=yuyue&first=true&time=' + time + '&amExpert=' + amExpert);
            }
            if (href.indexOf("guahao") != -1) {
                openTab('UserInfoListyuyue', '预约专家', '/Jjyl/ContractUser/ContractList?type=yuyue');
            }
        })(window.location.href);