ExtJs 動態無刷新Tree，並將節點信息在Control中顯示

本文轉載自查看原文 2011-12-30 10:57 5074 ExtJs 動態無刷新Tree

前幾天看了好多童鞋們提的關於動態加載tree，並且當點擊tree的節點的時候，該節點的相關信息會顯示在對應的控件上，

我覺得這挺好的，正好我以前也做過一個ExtJs的無刷新版本，所以在這里給大家分享下：

首先還是跟大家簡單說下思路：

1.我們需要先做個Ext的Tree，tree是通過Ext無刷新一步動態加載的

2.將tree里面的信息反映到前台的控件中

3.保證整個頁面風格都是無刷新的

思路大體就是這樣的，好了大家先看下效果圖：

好了，下面咱們開始一步一步的完成了。

1.首先將Ext必需的組件加載到項目中（如：ext-all.js、ext-base.js、ext-all.css等）

2.新建一個a.aspx頁面，如下code：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <!-- 公共部分 -->
    <script src="../Resource/Scripts/ktv.js" type="text/javascript"></script>
    <link href="../Resource/Scripts/Common/Extjs/resources/css/ext-all.css" rel="Stylesheet"
        type="text/css" />
    <link href="../Styles/ktv.css" rel="stylesheet" type="text/css" />
    <script src="../Resource/Scripts/Common/Extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Extjs/ext-all.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/basa/Common/grid.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/ktv.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Ajax/ajax.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/basa/Common/MsgAlert.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/basa/Common/PagingMemoryProxy.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/basa/Common/comboBox.js" type="text/javascript"></script>

    <!-- 自定義部分 -->
    <script type="text/jscript" language="javascript" src="../Resource/Scripts/basa/Base/Right_tree.js"></script>
    <script type="text/jscript" language="javascript" src="../Resource/Scripts/basa/Base/Right_panl.js"></script>
</head>
<body onload="SetButtonRight();">
<form id="form1" runat="server" >
<script language="javascript" type="text/javascript">

</script>
 <div class="content" id="content">
    <!-- 顯示按鈕 -->
    <div style="height: 30px; width: 100%">
                <div id="floatleft">
                    <input type="button" id="btnAdd" value="新 增" class=" Button_width RightButton" onclick="LoadCreateInfo();" />
                    <input type="button" id="btnEdit" value="修 改" class="Button_width RightButton" onclick="UpdateNodeInfo()" />
                    <input type="button" id="btnDelete" value="刪 除" class="Button_width RightButton" onclick="DeleteNode()" />
                </div>
    </div>
    <!-- 顯示tree -->
    <table width="100%">
        <tr>
            <td style="width:35%"><div id = "tree" class="divExt"></div></td>
            <td valign="top" style="width:65%"><div id = "rightpanl" class="divExt"></div></td>
        </tr>
    </table>
    
</div>
    </form>
</body>
</html>

后台cs就不需要寫了。

3.在上面代碼中，我們也看到了，在引用的js部分我們新建了2個自定義的js文件(Right_tree.js和Right_panl.js)

Right_tree.js是用來加載tree的，而Right_panl.js是用來給控件賦值的，有的童鞋該問了在a.aspx頁面中並沒有出現控件啊，對頭，在這里我們的控件是在另外一個頁面中放置的，還有大家也可能有疑問，不是說只引用ext-all.js、ext-base.js、ext-all.css這幾個就可以了嗎，為什么在a.aspx中引用了好多其他的呢，其實我可以跟大家說下，ext-all.js、ext-base.js、ext-all.css這幾個文件時必須要引用的，剩下的除了自定義的2個文件以外出現的其他文件是我根據ext的api分離出來的，所以大家不要有什么壓力。呵呵

4.好了，廢話不多說了，在第3條中我們提到了控件，所以我們要新建一個b.aspx頁面用來存放控件，code如下：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- 公共部分 -->
    <link href="../Resource/Scripts/Common/Extjs/resources/css/ext-all.css" rel="Stylesheet"
        type="text/css" />
    <link href="../Styles/ktv.css" rel="stylesheet" type="text/css" />
    <script src="../Resource/Scripts/Common/Extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Extjs/ext-all.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Ajax/ajax.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/basa/Common/CheckCb.js"  type="text/javascript"></script>
    <link href="../Resource/Scripts/basa/Common/CheckCb.css" rel="Stylesheet" />
    <script src="../Resource/Scripts/basa/Common/comboBox.js" type="text/javascript"></script>
    <script src="../Resource/Scripts/Common/Extjs/ext-lang-zh_CN.js" type="text/javascript"  charset="gb2312"></script>
    
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript" language="javascript">
        var isLoad = true;
        function pageLoad() {
            if (isLoad) {
                //下拉列表顯示
                var codeList = getCodeList('NO15');

                var codeValueList = [];
                for (var i = 0; i < codeList.length; i++) {
                    var code = {};
                    code.code = codeList[i].EnumCode;
                    code.value = codeList[i].EnumName;
                    codeValueList.push(code);
                }

                var codeListpt = getCodeList('NO16');

                var codeValueListpt = [];
                for (var i = 0; i < codeListpt.length; i++) {
                    var code = {};
                    code.code = codeListpt[i].EnumCode;
                    code.value = codeListpt[i].EnumName;
                    codeValueListpt.push(code);
                }

                var codeListLeft = getCodeList('NO37');
                var codeValueListleft = [];
                for (var i = 0; i < codeListLeft.length; i++) {
                    var code = {};
                    code.code = codeListLeft[i].EnumCode;
                    code.value = codeListLeft[i].EnumName;
                    codeValueListleft.push(code);
                }

                ShowCheckComboBox('rightScope', 'Json', codeValueList, false);

                ShowEasyComboBox('privilegType', 'Json', codeValueListpt, false);

                ShowEasyComboBox('cmLeaf', 'Json', codeValueListleft, false);

                Ext.onReady(function () {
                    Ext.QuickTips.init();
                    SetComboBoxDisabled('rightScope', true);

                    SetComboBoxDisabled('privilegType', true);

                    SetComboBoxDisabled('cmLeaf', true);

                    Ext.getCmp('rightScope_cb').setWidth(168);
                    Ext.getCmp('privilegType_cb').setWidth(168);
                    Ext.getCmp('cmLeaf_cb').setWidth(168);
                });

                isLoad = false;
            }
        }

        function SetLoad() {
            SetComboBoxDisabled('rightScope', false);

            SetComboBoxDisabled('privilegType', false);

            SetComboBoxDisabled('cmLeaf', false);
        }

    </script>
    <div>
    <center>
        <table width="100%"  class="doubletab">
            <tr>
                <td class="td1">父權限:</td>
                <td class="td2">
                <input type="text" id="parentName" class="findinput" disabled="disabled" style=" width:166px;" />
                <input type="text" id="parentCode" class="findinput" style="display:none" disabled="disabled" style=" width:166px;" /></td>
            </tr>
            <tr>
                <td class="td1">權限代碼:</td>
                <td class="td2"><input type="text" id="rigtCode" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
            </tr>
            <tr>
                <td class="td1">權限名稱:</td>
                <td class="td2"><input type="text" id="rightName" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
            </tr>
            <tr>
                <td class="td1">權限范圍:</td>
                <td class="td2"><input type="text" id="rightScope" class="selectinput" /></td>
            </tr>
            <tr>
                <td class="td1">特權類型:</td>
                <td class="td2"><input type="text" id="privilegType" class="selectinput" /></td>
            </tr>
            <tr>
                <td class="td1">是否存在下級:</td>
                <td class="td2">
                    <input type="text" id="cmLeaf" class="selectinput" style=" width:166px;" />
                </td>
            </tr>
            <tr>
                <td class="td1">連接頁面:</td>
                <td class="td2"><input type="text" id="pageUrl" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
            </tr>
        </table>
        </center>
       
        <input id="status" type="text" value="ins" style="display:none" />
        <input id="rightId" type="text" style="display:none" />
    </div>
    </form>
</body>
</html>

5.在b.aspx中大家看到了出現了一些js代碼，還有幾個方法沒有找到，那個不用擔心，因為我們馬上就可以看到了呵呵，

下面我們介紹下Right_tree.js這個文件，這個文件時用來加載tree的，前面已經提到過了，代碼如下：

View Code

var tree;

//形成樹與根節點
var TreeTest = function () {
    var Tree = Ext.tree;

    var _h = Ext.getBody().getViewSize().height - 40;

    return {
        init: function () {
            tree = new Tree.TreePanel({
                id: 'firsttree',
                title: '權限管理',
                animate: true,
                autoScroll: true,
                rootVisible: true,
                containerScroll: true,
                margins: 0,
                //width: 500,
                height: _h,
                lines: true,
                dropConfig: { appendOnly: true }
            });
            var root = new Tree.AsyncTreeNode({
                text: '查看權限列表',
                draggable: false,
                id: 'root',
                storestatus: 1,
                loader: new Ext.tree.TreeLoader({
                    dataUrl: '../AjaxTransferPage/Base/Rights.ashx'
                })
            });
            tree.setRootNode(root);

            tree.render('tree');

            root.on('expand', gettree);

            //  root.on('click', nodeclick);
        }
    };
} ();

//異步加載樹
function gettree(node) {
    if (node.childNodes.length > 0) {
        if (node.childNodes[0].text != 'loading') {
            return;
        }
    }

    var curNodeId = '';
    if (node.id == 'root')
    {
        curNodeId = ''; 
    }
    else { //非根節點
        curNodeId = node.id;
    }
  
    Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; 
    Fix.Ajax.asyn = false; 
    Fix.Ajax.JSON = 'type=getNextNodes&nodeId=' + curNodeId; 
    Fix.Ajax.success = function () {
        var data = this.returnJSON.ReturnValue; 
        for (var i = 0; i < data.length; i++) {
            var cnode = new Ext.tree.AsyncTreeNode({
                id: data[i].RightId, 
                checked: false,
                text: data[i].RightName + '-' + data[i].RigthCode,
                leaf: data[i].IsLeaf == 0 ? true : false,
                // url: data[i].Url,
                children:
               [{
                   text: 'loading',
                   iconCls: 'loading',
                   leaf: true
               }]
            });
            cnode.on('expand', gettree);
            if (data[i].RightId != '5785d265-dc06-444c-b468-15cda433912e' && data[i].RightId != 'aa77f4e1-3ab4-4e87-a7a9-3f0fb9428f25') {
                cnode.on('click', nodeclick);
            }
            node.appendChild(cnode);
        }
        if (node.firstChild != null && node.id != 'root' && node.firstChild.text == 'loading') {
            node.firstChild.remove();
        }
    }
    Fix.Ajax.execute(); //執行
}

//清空當前節點下所有子節點
function ClearCurNextAllNode(node) {
    var tNode = tree.getNodeById(node);
    tNode.removeAll();
    tNode.expand();
}

//點擊節點 帶出詳細信息
function nodeclick(node) {
    //點擊根節點不刷新PANLE
    if (node.id != 'root') {
        //去數據庫取到最新記錄賦值 通過GUID
        var obj;
        Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定訪問頁面
        Fix.Ajax.asyn = false; //同步AJAX提交
        Fix.Ajax.JSON = 'type=getOnly&nodeId=' + node.id;  //提交參數
        Fix.Ajax.success = function () {
            obj = this.returnJSON.ReturnValue; //回調函數
        }
        Fix.Ajax.execute(); //執行

        //更新PANEL頁面
        SetPanleInfo(obj,node.parentNode.text);
    }
}

//點擊新增按鈕 判斷選中數
function LoadCreateInfo() {
    var check = tree.getChecked();
    if (check.length == 1) {
        if (check[0].leaf) {
            parent.ExtAlert('waring', '請您選擇非葉子節點記錄。');
            return;
        }

        SetPanelInfoOnCreate(check[0].id, check[0].text);
    } else {
        parent.ExtAlert('waring', '請您選擇一條記錄作為新增權限的父權限。');
    }
}

//點擊新增按鈕 判斷選中數
function UpdateNodeInfo() {
    var check = tree.getChecked();
    if (check.length == 1) {
        //修改接口
        nodeclick(check[0]);
    } else {
        parent.ExtAlert('waring', '請您選擇一條記錄作為要修改的記錄。');
    }
}

//刪除
function DeleteNode() {
    var check = tree.getChecked();
    if (check.length == 1) {
        //if (confirm('確定刪除？') == false) return;
        parent.ExtAlert('question', '確定刪除？', function () {
            Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定訪問頁面
            Fix.Ajax.asyn = false; //同步AJAX提交
            Fix.Ajax.JSON = 'type=del&nodeId=' + check[0].id;  //提交參數
            Fix.Ajax.success = function () {
                var obj = this.returnJSON; //回調函數
                //Panl初始化狀態
                LoadPanle();
                //刷新樹
                ClearCurNextAllNode(check[0].parentNode.id);
            }
            Fix.Ajax.execute(); //執行
         })    
    } else {
        parent.ExtAlert('waring', '請您選擇一條記錄進行刪除操作。');
    }
}

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

Ext.onReady(function () {
    setTimeout("ComResize()", 200);
});
//通過window.onresize事件來執行allComResize函數控制tab容器的大小  
var oTime;
window.onresize = function () {
    if (oTime) {
        clearTimeout(oTime);
    }
    oTime = setTimeout("ComResize()", 100); //延遲100毫秒執行
}
function ComResize() {
    try {
        var _h = Ext.getBody().getViewSize().height - 40;
       // var _w = Ext.getBody().getViewSize().width - 10;
        // 獲取面板   
        var centerpanel = Ext.getCmp('firsttree');
        if (centerpanel) {
            centerpanel.setHeight(_h);
          //  centerpanel.setWidth(_w);
        }
        var pRight = Ext.getCmp('pRight');
        if (pRight) {
            pRight.setHeight(_h);
            var iframesPanle = document.getElementById('pif');
            iframesPanle.style.height = _h+'px';
        }
    } catch (e) {

    }

}

tree加載完了，現在我們就要將需要的控件也同樣顯示在頁面上了，這就少不了我們的Right_panl.js這個文件了，代碼如下：

View Code

//點擊樹賦值接口
function SetPanleInfo(obj, parentText) {
    parentInfo = obj.ParentRigth;

    //顯示保存,重置按鈕
    Psave.show();
    Preset.show();

    var wiframe = window.frames['pif'];
    wiframe.document.getElementById('parentCode').disabled = 'disabled';
    wiframe.document.getElementById('rigtCode').disabled = '';
    wiframe.document.getElementById('rightName').disabled = '';
    wiframe.document.getElementById('pageUrl').disabled = '';

    //通過傳入對象進行賦值操作
    wiframe.document.getElementById('status').value = 'upd';
    wiframe.document.getElementById('rightId').value = obj.RightId;
    wiframe.document.getElementById('parentCode').value = obj.ParentRigth;
    wiframe.document.getElementById('parentName').value = parentText;
    wiframe.document.getElementById('rigtCode').value = obj.RigthCode;
    wiframe.document.getElementById('rightName').value = obj.RightName;
    wiframe.document.getElementById('pageUrl').value = obj.PageUrl;

    wiframe.SetLoad();

    wiframe.SetComboBoxValue('rightScope', obj.RigthScope);
    wiframe.SetComboBoxValue('privilegType', obj.PeiviegeType);
    wiframe.SetComboBoxValue('cmLeaf', obj.IsLeaf + '');

}

//點擊新增后觸發
function SetPanelInfoOnCreate(parantId, parenttext) {
    parentInfo = parantId

    //顯示保存,重置按鈕
    //Pputin.show();
    Psave.show();
    Preset.show();

    var wiframe = window.frames['pif'];
    wiframe.document.getElementById('parentCode').disabled = 'disabled';
    wiframe.document.getElementById('rigtCode').disabled = '';
    wiframe.document.getElementById('rightName').disabled = '';
    wiframe.document.getElementById('cmLeaf').disabled = '';
    wiframe.document.getElementById('pageUrl').disabled = '';

    wiframe.document.getElementById('status').value = 'ins';
    wiframe.document.getElementById('rightId').value = '';
    wiframe.document.getElementById('parentCode').value = parantId;
    wiframe.document.getElementById('parentName').value = parenttext;
    wiframe.document.getElementById('rigtCode').value = '';
    wiframe.document.getElementById('rightName').value = '';
    wiframe.document.getElementById('pageUrl').value = '';

    wiframe.SetLoad();

    wiframe.SetComboBoxValue('rightScope', '');
    wiframe.SetComboBoxValue('privilegType', '');
    wiframe.SetComboBoxValue('cmLeaf', '');

}


//初始化接口 EXT PANL 渲染完畢后觸發
function LoadPanle() {
    //隱藏三個按鈕
    // Pputin.hide();
    Psave.hide();
    Preset.hide();
    //將頁面所有屬性不可用
    var wiframe = window.document.getElementById('pif');

    wiframe.src = iframSrc;

    var func;
    if (wiframe.attachEvent) {
        wiframe.attachEvent("onload", func = function () {
            var wiframe = window.frames['pif'];
            wiframe.document.getElementById('parentCode').disabled = 'disabled';
            wiframe.document.getElementById('rigtCode').disabled = 'disabled';
            wiframe.document.getElementById('rightName').disabled = 'disabled';
            wiframe.document.getElementById('rightScope').disabled = 'disabled';
            wiframe.document.getElementById('privilegType').disabled = 'disabled';
            wiframe.document.getElementById('cmLeaf').disabled = 'disabled';
            wiframe.document.getElementById('pageUrl').disabled = 'disabled';
            wiframe.pageLoad();
            wiframe.detachEvent("onload", func);
        });
    }
}


var iframSrc = 'RightItem.aspx';

var ifram = '<iframe id ="pif" name = "pif" allowTransparency="true" style="background:#e9f3ff;border-top-width: 0px; border-left-width: 0px;'
          + 'border-bottom-width: 0px; border-right-width: 0px;'
          + 'font:12px,  Tahoma,Verdana,Arial" '
          + 'src=' + iframSrc + ' frameborder="0" width="100%"  scrolling="no" height="100%"></iframe>';

////提交按鈕
//var Pputin = new Ext.Button({
////anchor : '80%',
//    text: '提 交',
//    x: 260,
//    y: 240,
//    style: 'position:absolute',
//    width: 80
//});
//Pputin.on('click', function () {
////提交操作
//    SavePanelInfo();
////重置
//    ResetPanelInfo();
//});

//保存按鈕
var Psave = new Ext.Button({
    //anchor : '80%',
    text: '保 存',
    x: 286,
    y: 240,
    style: 'position:absolute',
    width: 80
});
Psave.on('click', function () {
    //保存操作
    SavePanelInfo();
    if (!IsSaveTrue) return;
    //保存后初始化狀態
    LoadPanle();
    //刷新樹
    ClearCurNextAllNode(parentInfo);
});

//關閉按鈕
var Preset = new Ext.Button({
    //anchor : '80%',
    text: '重 置',
    x: 373,
    y: 240,
    style: 'position:absolute',
    width: 80
});
Preset.on('click', function () {
    //重置清空操作
    ResetPanelInfo();
});


Ext.onReady(function () {
    var p = new Ext.Panel({
        title: '詳細信息',
        id: 'pRight',
        collapsible: false,
        // renderTo: 'rightpanl',
        // height: 318,
        shim: false,
        items: [{ title: '顯示詳細信息',
            header: false,
            x: 0,
            y: 0,
            html: ifram,
            border: false
        }]
    });
    // p.add(Pputin);
    p.add(Psave);
    p.add(Preset);
    p.on("afterrender", LoadPanle);
    p.render('rightpanl');
});

//重置PANEL內容
function ResetPanelInfo() {
    var wiframe = window.frames['pif'];

    //初始化
    wiframe.document.getElementById('parentCode').value = '';
    wiframe.document.getElementById('rigtCode').value = '';
    wiframe.document.getElementById('rightName').value = '';
    wiframe.document.getElementById('pageUrl').value = '';

    wiframe.SetComboBoxValue('rightScope', '');
    wiframe.SetComboBoxValue('privilegType', '');
    wiframe.SetComboBoxValue('cmLeaf', '');
}
var IsSaveTrue = true;

//用於記錄傳入操作的父節點
var parentInfo;

//保存方法
function SavePanelInfo() {
    var wiframe = window.frames['pif'];
    var status = wiframe.document.getElementById('status').value;
    var rightId = wiframe.document.getElementById('rightId').value;
    var parentCode = wiframe.document.getElementById('parentCode').value;
    var rigtCode = wiframe.document.getElementById('rigtCode').value;
    var rightName = wiframe.document.getElementById('rightName').value;
    var pageUrl = wiframe.document.getElementById('pageUrl').value;

    var rightScope = wiframe.Ext.getCmp('rightScope_cb').getValue();
    if (rightScope == undefined) {
        rightScope = '';
    }
    var privilegType = wiframe.document.getElementById('privilegType').CodeValue;
    if (privilegType == undefined) {
        privilegType = '';
    }

    var alertstr = '';

    var cmLeaf = wiframe.document.getElementById('cmLeaf').CodeValue;
    if (cmLeaf == undefined) {
        alertstr += '是否存在下級必須選擇。<br/>';
    }
    if (rigtCode == '') {
        alertstr += '權限代碼不可為空。<br/>';
    }
    if (rightName == '') {
        alertstr += '權限名稱不可為空。<br/>';
    }
    if (alertstr.length > 0) {
        parent.ExtAlert('waring', alertstr);
        //不執行保存
        IsSaveTrue = false;
        return;
    }
    var params = '&rightId=' + rightId + '&parentCode=' + parentCode + '&rigtCode=' + rigtCode
                + '&rightName=' + rightName + '&rightScope=' + rightScope
                + '&privilegType=' + privilegType + '&IsLeaf=' + cmLeaf + '&pageUrl=' + pageUrl;

    var rbo;

    Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定訪問頁面
    Fix.Ajax.asyn = false; //同步AJAX提交
    Fix.Ajax.JSON = 'type=' + status + params;  //提交參數
    Fix.Ajax.success = function () {
        rbo = this.returnJSON; //回調函數
        //異常處理

    }
    Fix.Ajax.execute(); //執行
    if (rbo == '-1') {
        //代碼已存在
        parent.ExtAlert('waring', '該代碼已存在，請修改。');
        IsSaveTrue = false;
    } else {
        IsSaveTrue = true;
    }
}

在這個代碼中我們要特別注意這么一段代碼：

var iframSrc = 'RightItem.aspx';

var ifram = '<iframe id ="pif" name = "pif" allowTransparency="true" style="background:#e9f3ff;border-top-width: 0px; border-left-width: 0px;'
          + 'border-bottom-width: 0px; border-right-width: 0px;'
          + 'font:12px,  Tahoma,Verdana,Arial" '
          + 'src=' + iframSrc + ' frameborder="0" width="100%"  scrolling="no" height="100%"></iframe>';

這段代碼是用來配置將控件存放的頁面顯示的，大家需要那個頁面，然后就將'RightItem.aspx';替換一下就可以了。

在Right_panl.js文件中出現了一些這個這種代碼：

var wiframe = window.frames['pif'];
    wiframe.document.getElementById('parentCode').disabled = 'disabled';
    wiframe.document.getElementById('rigtCode').disabled = '';
    wiframe.document.getElementById('rightName').disabled = '';
    wiframe.document.getElementById('cmLeaf').disabled = '';
    wiframe.document.getElementById('pageUrl').disabled = '';

這些代碼的意思就是b.aspx頁面中存放的控件的Id，並且找到這些控件給它們賦值的。

同樣的在這2個js文件中都有

Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定訪問頁面
            Fix.Ajax.asyn = false; //同步AJAX提交
            Fix.Ajax.JSON = 'type=del&nodeId=' + check[0].id;  //提交參數
            Fix.Ajax.success = function () {
                var obj = this.returnJSON; //回調函數
                //Panl初始化狀態
                LoadPanle();
                //刷新樹
                ClearCurNextAllNode(check[0].parentNode.id);
            }
            Fix.Ajax.execute(); //執行

也就是我們需要建立相應Ajax相應頁面，用來處理客戶端發送的請求，然后序列化成Json返回給客戶端。客戶端根據返回的Json進行處理並顯示到頁面上。Ajax相應頁面，在這里我就不詳述了，O(∩_∩)O~

6.截止到現在咱們基本的功能都已經出來了，有些童鞋可能又要問了，在b.aspx頁面中出現的js的方法我還沒有講呢，現在我就來說下，還記得上面第3條中我說過我從ext中分離出來一些功能，所以在b.aspx頁面中出現的方法時我在comboBox.js這個里面定義的，所以...我們還是來看看這個頁面的相關代碼吧呵呵

View Code

綁定ComboBox接口方法
參數：TEXEBOX控件ID（如<input type='text' id='cbName' />),代碼表代碼
*/
function DataBindComboBox(textId, code) {
    var arr = getCodeList(code);

    var codeList = arr; //數據

    var clist = [];
    var sObj = {};
    sObj.Title = '字典代碼';
    sObj.DataName = 'DictCode';
    sObj.IsHide = true; //是否可見
    clist.push(sObj);
    sObj = {};
    sObj.Title = '代碼';
    sObj.DataName = 'EnumCode';
    sObj.IsCode = true; //是否存儲值
    clist.push(sObj);
    sObj = {};
    sObj.Title = '名稱';
    sObj.DataName = 'EnumName';
    sObj.IsName = true;
    clist.push(sObj);

    var showList = clist; //列

    //顯示
    ShowComboBox(textId, showList, codeList);

}

/*
綁定ComboBox接口方法（自定義）
*/
function DataBindComboBoxDefined(textId, showList, codeList, width) {
    //顯示
    ShowComboBox(textId, showList, codeList, width);
}
//顯示高度
var MaxHeight = 250;

//顯示寬度
var MaxWidth = 270;

//顯示級聯的下拉菜單 
//getDataFunc 為獲取子下拉菜單的數據回調方法，
//參數：父下拉菜單的CodeValue
//返回：綁定在子菜單的Json
function ShowUnionEasyComboBox(txtId, parentTxtId, dataType, getDataFunc, IsInput,myData) {
    var parentInput = document.getElementById(parentTxtId);
    if (parentInput == undefined || parentInput == '') {
        parentInput = parent.document.getElementById(txtId);
    }

    Ext.onReady(function () {

        var parentComboBox = Ext.getCmp(parentTxtId + '_cb');
        if (parentComboBox == undefined || parentComboBox == '') {
            parentComboBox = parent.Ext.getCmp(parentTxtId + '_cb');
        }
        var childComboBox = Ext.getCmp(txtId + '_cb');
        if (childComboBox == undefined || childComboBox == '') {
            childComboBox = parent.Ext.getCmp(txtId + '_cb');
        }
        //--------------------------------------------
        if (myData == undefined || myData == '' || myData == [] || myData.length == 0) {
            myData = undefined;
            myData = [];
            var obj = {};
            obj.code = undefined;
            obj.value = '請選擇...';
            myData.push(obj);
            Ext.QuickTips.init();
        }

        var store = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(myData),
            reader: new Ext.data.ArrayReader({}, [{ name: 'code', mapping: 'code' }, { name: 'value', mapping: 'value'}])
        });
        store.load();
        if (childComboBox == undefined || childComboBox == '') {
            var cb = new Ext.form.ComboBox({
                    id: txtId + '_cb',
                    editable: false,
                    store: store,
                    displayField: 'value',
                    valueField: 'code',
                    typeAhead: true,
                    mode: 'local',
                    width: 120,
                    
                    maxHeight: 200,
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: '請選擇...',
                // selectOnFocus: true,
                    applyTo: txtId
                });

            cb.on('select', function(c, r, i) {
                document.getElementById(txtId).CodeValue = r.data.code;
            });
            document.getElementById(txtId).IsCombox = true;
        }
        //----------------------------------------


        parentComboBox.on("select", function (c, r, i) {

            parentInput = document.getElementById(parentTxtId);
            if (parentInput == undefined || parentInput == '') {
                parentInput = parent.document.getElementById(parentTxtId);
            }

            childComboBox = Ext.getCmp(txtId + '_cb');
            if (childComboBox == undefined || childComboBox == '') {
                childComboBox = parent.Ext.getCmp(txtId + '_cb');
            }

            var childInput = document.getElementById(txtId);
            if (childInput == undefined || childInput == '') {
                childInput = parent.document.getElementById(txtId);
            }

            if (parentInput.CodeValue == undefined) {
                //更改子菜單的樣式
                childInput.style.readonly = true;
            }

            myData = getDataFunc(parentInput.CodeValue);
            if (myData == undefined || myData == '' || myData == [] || myData.length == 0) {
                myData = undefined;
                myData = [];
                var obj = {};
                obj.code = undefined;
                obj.value = '請選擇...';
                myData.push(obj);
            }

            if (childComboBox == undefined || childComboBox == '') {

                var t = false;
                Ext.onReady(function () {
                    Ext.QuickTips.init();

                    var store = new Ext.data.Store({
                        proxy: new Ext.data.MemoryProxy(myData),
                        reader: new Ext.data.ArrayReader({}, [{ name: 'code', mapping: 'code' }, { name: 'value', mapping: 'value'}])
                    });
                    store.load();
                    var cb = new Ext.form.ComboBox({
                        id: txtId + '_cb',
                        editable: t,
                        store: store,
                        displayField: 'value',
                        valueField: 'code',
                        typeAhead: true,
                        mode: 'local',
                        width: 120,
                        
                        maxHeight: 200,
                        forceSelection: true,
                        triggerAction: 'all',
                        emptyText: '請選擇...',
                        // selectOnFocus: true,
                        applyTo: txtId
                    });

                    cb.on('select', function (c, r, i) {
                        document.getElementById(txtId).CodeValue = r.data.code;
                    });
                    document.getElementById(txtId).IsCombox = true;
                });

            }
            else {

                childComboBox.store.proxy = new Ext.data.MemoryProxy(myData);
                childComboBox.getStore().load();
                childComboBox.getStore().reload();
                childComboBox.reset();
                childComboBox.doQuery('', true);
            }

        });
    });
    return myData;
}

//顯示簡單下拉列表
function ShowEasyComboBox(txtId, dataType, myData, IsInput, maxHeight) {
    var t = false;
    
    if (document.getElementById(txtId) == undefined) {
        return;
    }

    //設置下拉列表的高度
    if (maxHeight == undefined) maxHeight = 200;

    Ext.onReady(function () {
        Ext.QuickTips.init();

        var arrData = [];
        var arr = {};
        arr.code = '';
        arr.value = '請選擇...';
        // arrData.unshift(arr);
        arrData.push(arr);

        var aData = arrData.concat(myData);

        var store = '';
        if (dataType == 'ArrayList') {
            store = new Ext.data.ArrayStore({
                fields: ['code', 'value'],
                data: aData
            });
        }
        else if (dataType == 'Json') {
            var rt = {};
            rt.data = aData;
            store = new Ext.data.JsonStore({
                fields: ['code', 'value'],
                root: 'data',
                data: rt
            });
        }

        var cb = new Ext.form.ComboBox({
            id: txtId + '_cb',
            editable: t,
            store: store,
            displayField: 'value',
            valueField: 'code',
            typeAhead: true,
            mode: 'local',
            width: 120,
            maxHeight: maxHeight,
            forceSelection: true,
            triggerAction: 'all',
            emptyText: '請選擇...',
            // selectOnFocus: true,
            applyTo: txtId
        });

        cb.setValue('');
        if (txtId == 'dataState')
            cb.setValue('0');

        cb.on('select', function (c, r, i) {
            if (r.data.code != '')
                document.getElementById(txtId).CodeValue = r.data.code;
            else document.getElementById(txtId).CodeValue = undefined;
        });
        document.getElementById(txtId).IsCombox = true;
    });
}

function ShowCheckComboBox(txtId, dataType, myData, IsInput) {
    var t = false;
    Ext.onReady(function () {
        Ext.QuickTips.init();

        var arrData = [];
        var arr = {};
        arr.code = '';
        arr.value = '請選擇...';
        // arrData.unshift(arr);
        arrData.push(arr);

        var aData = arrData.concat(myData);

        var store = '';
        if (dataType == 'ArrayList') {
            store = new Ext.data.ArrayStore({
                fields: ['code', 'value'],
                data: aData
            });
        }
        else if (dataType == 'Json') {
            var rt = {};
            rt.data = myData;
            store = new Ext.data.JsonStore({
                fields: ['code', 'value'],
                root: 'data',
                data: rt
            });
        }

        var cb = new Ext.ux.form.LovCombo({
            id: txtId + '_cb',
            store: store,
            mode: 'local',
            valueField: 'code',
            width: 120,
            displayField: 'value',
            emptyText: '請選擇...',
            forceSelection: true,
            editable: t,
            typeAhead: true,
            applyTo: txtId
        });


        document.getElementById(txtId).IsCombox = true;
    });
}


//顯示ComboBox
function ShowComboBox(textId, colList, myData, width) {
    Ext.onReady(function () {
        Ext.QuickTips.init();

        if (width == undefined) {
            width = MaxWidth;
        }

        //拼DIV ID 
        var divId = textId + '_grid';

        //構建一個層 用於顯示GRID
        var tpl = '<tpl for="."><div style="height:200px"><div id="' + divId + '"></div></div></tpl>';

        //下拉控件
        var combo = new Ext.form.ComboBox({
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'value',
                    'text'
                ],
                data: [['', '']]
            }),
            displayField: 'value',
            editable: false,
            mode: 'local',
            forceSelection: false,
            triggerAction: 'all',
            emptyText: '請選擇...',
            //selectOnFocus: true,
            applyTo: textId,
            id: textId + '_cb',
            width: 120,
            listWidth: width,
            maxHeight: MaxHeight,
            tpl: tpl,
            validateOnBlur: false,
            validationEvent: false,
            validationDelay: 500,
            preventMark: true
        });

        combo.on("expand", function (c) {
            try {
                document.getElementById(divId).innerHTML = '';
                var cc = CreateComboxGrid(cbgStore, cbgModel, width);
                cc.on('rowclick', function (grid, rowIndex) {
                    //獲取當前列數據
                    var data = grid.getStore().data.items[rowIndex].data;

                    var code = '', name = '';

                    for (var i = 0; i < colList.length; i++) {
                        if (colList[i].IsCode) {
                            if (code != '') {
                                //alert('只可以設置一列取值項(IsCode)。');
                                parent.ExtAlert('waring', '只可以設置一列取值項(IsCode)。');
                                return;
                            }
                            code = data[colList[i].DataName];
                        }
                        if (colList[i].IsName) {
                            if (name != '') {
                                //alert('只可以設置一列顯示項(IsName)。');
                                parent.ExtAlert('waring', '只可以設置一列顯示項(IsName)。');
                                return;
                            }
                            name = data[colList[i].DataName];
                        }
                    }
                    //combo.setRawValue(code);
                    combo.setValue(name);
                    var oo = document.getElementById(textId);
                    document.getElementById(textId).CodeValue = code;
                });
                document.getElementById(txtId).IsCombox = true;
                cc.render(divId);
                var ds = cc.getStore()
                ds.load(myData);
            }
            catch (e) {

            }
        });


        /* 組裝COLMODEL對象變量 */
        var colModelValue = SetColModelComboBox(colList);

        //構建數據列變量
        var fields = SetColDataComboBox(colList);

        //構建顯示列對象
        var cbgModel = new Ext.grid.ColumnModel({
            defaults: {
                width: 120,
                sortable: false
            },
            columns: colModelValue
        });

        var cbgStore = new Ext.data.Store({
            proxy: new Ext.ux.data.PagingMemoryProxy(myData),
            reader: new Ext.data.ArrayReader({}, fields)
        });

        //構建GRID
        //var cbGrid = CreateComboxGrid(cbgStore, cbgModel);

    })
}


function CreateComboxGrid(cbgStore, cbgModel, width) {
    return new Ext.grid.GridPanel({
        store: cbgStore,
        cm: cbgModel,
        width: width,
        height: MaxHeight,
        headerAsText: false,
        stripeRows: true
    });
}


//構建顯示列
function SetColModelComboBox(colList) {
    var arr = [];
    // arr.push(new Ext.grid.RowNumberer());
    for (var i = 0; i < colList.length; i++) {
        var col = {};
        col.header = colList[i].Title;
        col.dataIndex = colList[i].DataName;
        col.renderer = colList[i].DataName;
        col.sortable = false;
        if (colList[i].Width != undefined || colList[i].Width > 0) {
            var int = parseInt(colList[i].Width)
            col.width = int;
        }
        if (colList[i].IsHide) {//是否隱藏
            col.hidden = true;
        }
        if (colList[i].IsCode) {//是否代碼 （用於數據庫存儲）
            col.IsPk = true;
        }
        if (colList[i].IsName) {//是否顯示界面
            col.IsName = true;
        }
        arr.push(col);
    }
    return arr;
}

//構建數據列
function SetColDataComboBox(colList) {
    var fields = [];
    for (var i = 0; i < colList.length; i++) {
        var file = {};
        file.name = colList[i].DataName;
        file.mapping = colList[i].DataName;
        fields.push(file);
    }
    return fields;
}

//停用啟用該控件
function SetComboBoxDisabled(txtid, status) {
    var cbId = txtid + '_cb';

    Ext.getCmp(cbId).setDisabled(status);

}

//為文本框復值
function SetComboBoxValue(txtid, value) {
    var cbId = txtid + '_cb';

    Ext.getCmp(cbId).setValue(value);
    document.getElementById(txtid).CodeValue = value;
}

function SetComboBoxUnionValue(txtId, parentValue, childValue, getDataFunc) {

    var childComboBox = Ext.getCmp(txtId + '_cb');
    if (childComboBox == undefined || childComboBox == '') {
        childComboBox = parent.Ext.getCmp(txtId + '_cb');
    }

    var myData = getDataFunc(parentValue);
    if (childComboBox != undefined && childComboBox != '') {
        childComboBox.store.proxy = new Ext.data.MemoryProxy(myData);
        childComboBox.getStore().load();
        childComboBox.getStore().reload();
        childComboBox.reset();
        childComboBox.doQuery('', true);
    }

    SetComboBoxValue(txtId, childValue);
}

好了，現在一個動態無刷新的Tree，並將tree節點中的相關信息顯示到對應的控件中的功能就算完成了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ExtJS 動態無刷新ReportViewer ExtJS中給Tree節點加click事件 EXTJS 4: 如何動態的改變treepanel中節點的文字 flowable中動態顯示節點的審批人信息 Ext.tree.Panel Extjs 在表格中添加樹結構，並實現節點移動功能 EXTJS4 gridpanel中動態的顯示/隱藏某個列 Extjs 4 Tree 異步分級別加載子節點 Ajax無刷新顯示 Extjs中通過Tree加載右側TabPanel 在Extjs中動態增加控件