- [javascrip]最简单的 extjs 窗口 - CLQ工作室提供技术支持

您的位置：首页 >> 程序员学前班[不再更新，只读] >> 主题: [javascrip]最简单的 extjs 窗口 [回主站] [分站链接]

您的位置：首页 >> 程序员学前班[不再更新，只读] >> 主题: [javascrip]最简单的 extjs 窗口 [最新] [回主站]

标题

[javascrip]最简单的 extjs 窗口

clq

浏览(2) + 2010-10-18 16:35:59 发表编辑

关键字:

根据 \ext-3.3.0\examples\window\gmap.html 修改.

clq

2010-10-18 16:42:04 发表编辑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>GMap Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    
    
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    
    <script type="text/javascript" src="../../ext-all.js"></script>

</head>
<body>



aaabbb

<script language="JavaScript" type="text/javascript">

Ext.onReady(function(){
   /*
var w=new Ext.Window({

           width:500,
           height:200,
     closeAction:"hide",
     resizable:false,
     html: "<iframe id='searchTreeIframe_id' src='test.html' width='100%' height='100%' frameborder='0' scrolling='auto'></iframe>",
           title:"±êìa"

        });

        w.show();

        */
        //--------------------------------------------------

       var win=new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                width:400,
                height:400,
                x: 40,
                y: 60,

            html:"<iframe src='test.html' height='100%' width='100%' id='ifrwin' frameborder='0' scrolling='no'>"
       });
       win.show();

    });

</script>

</body>
</html>
--------------------------------------------------
其实这个例子在 ie6 下有 bug 拖动会出错.原因是窗体生成的 js 代码被前面的字符串 "aaabbb" 破坏了,要把相关的 html 写在生成代码后面. 如下:
--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>GMap Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    
     
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     
     <script type="text/javascript" src="../../ext-all.js"></script>

</head>
<body>


<script language="JavaScript" type="text/javascript">

Ext.onReady(function(){
    /*
var w=new Ext.Window({

           width:500,
           height:200,
     closeAction:"hide",
     resizable:false,
     html: "<iframe id='searchTreeIframe_id' src='test.html' width='100%' height='100%' frameborder='0' scrolling='auto'></iframe>",
           title:"±êìa"

        });

        w.show();

        */
        //--------------------------------------------------

        var win=new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                width:400,
                height:400,
                x: 40,
                y: 60,

            html:"<iframe src='http://localhost:1857/webform_chesu.aspx' height='100%' width='100%' id='ifrwin' frameborder='0' scrolling='no'>"
        });
        win.show();

    });

</script>


aaabbb

</body>
</html>

clq

2010-10-18 16:44:05 发表编辑

下面是我根据网友的例子改的一个更单纯的例子,只用了 js - 虽说有 jquery 在内.

<script language="JavaScript" src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

function OnClose(evt)
{
    //$("movediv").style.display="none";
    var t2 = document.getElementById("movediv");
    var t = $("#movediv")[0];
    t.style.display="none";

    //--------------------------------------------------
    //document.getElementsByName();
    var parent = this//_this;//.parentNode;
    for(i=0;i<10;i++)
    {
        if (parent.className == "pop_window")
        {
            parent.style.display="none";
        }

        parent = parent.parentNode;

    }

}

</script>

<div id="movediv" style="width:250px;height:200px;border:1px #000 solid; position:absolute;left:400px;top:218px; z-index: 11;">
<div id="movespan">朋友:用鼠标来拖走我吧!我在这里太久了!</div>
<div style="background:red; height:50px;"></div>
</div>



<div id="movediv2" class="pop_window" style="width:250px;height:200px;border:1px #000 solid; position:absolute;left:400px;top:218px; z-index: 12;">
<table width="100%" id="movespan2">
    <tr><td><span align="left">aaa</span></td><td><img src="file:///d:\我的文档\桌面\1.png" align="right" alt="" onload="this.onclick=OnClose;" /></td></tr>
</table>
<div id="movespan22" style="white-space:nowrap;">用鼠标来拖走我吧! <img src="file:///d:\我的文档\桌面\1.png" align="right" alt="" /></div>
<br>
<div style="background:red; height:50px;"></div>
</div>

<script language="JavaScript" type="text/javascript">

var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
var _LastHandleId="";//开始拖放的物体的 id
var _Top_zIndex = 0;
var _tDom;//clq add test

var dragdrop={
    registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
        // var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
        var _hDom=this.get(handler);
        //clq test//var _tDom=this.get(target);//这个不放在外面还真不行,javascript 的语法很奇怪
        _tDom=this.get(target);//clq test
        _hDom.style.cursor=cursor||"move";

        function startDrag(evt){ // 按下鼠标左键时的事件。

            _tDom = this.parentNode;//clq add test
            _LastHandleId = this.id;//clq add test

            //--------------------------------------------------
            //idx = 1000;
            //this.style.zIndex=idx;
            //this.nextSibling.style.zIndex=idx-1;

            //this.style.zIndex = es;
            _tDom.style.zIndex = Math.max(_tDom.style.zIndex, _Top_zIndex);//注意不能是 this.style.zIndex = es;
            _Top_zIndex = parseInt(_tDom.style.zIndex) + 1;//es++ ;//不用 parseInt 的话会被当成字符串相连接


            //--------------------------------------------------

            evt=window.event||evt; // 获取当前事件对象。
            _IsMousedown=true; // 记录已经准备开始移动了。
            _ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
            _ClickTop=evt.clientY-parseInt(_tDom.style.top);
        }
        function doDrag(evt){ // 鼠标开始移动时的事件。
            //this.toString();
            //this.id;
            //if(_LastHandleId != this.id)return false;//clq add test//不是我开始的拖放就不要改变位置
            //_tDom = this.parentNode;//clq add test

            evt=window.event||evt; // 获取当前事件对象。
            if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
            _tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
            _tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
        }
        function endDrag(){ // 释放鼠标左键时的事件。
            if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
                //_tDom = this.parentNode;//clq add test
                if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
                _IsMousedown=false;
            }
        }
        _hDom.onmousedown=startDrag; // 鼠标按下事件。
        //clq test//document.onmouseup=endDrag; // 鼠标释放事件。
        //clq test//document.onmousemove=doDrag; // 鼠标移动事件。
        //_hDom.onmouseup=endDrag; // 鼠标释放事件。//clq test
        document.onmouseup=endDrag; // 鼠标释放事件。//clq test
        document.onmousemove=doDrag; // 鼠标移动事件。//clq test
        _tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
    },

    isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。

    get:function(element){ // 通过一串字符返回一个对象。
        if(typeof(element) == "string")
        {
            return document.getElementById(element);
        }
        return element;
    }
};
// 使用方式如下：
dragdrop.registerDragdropHandler("movespan","movediv");
dragdrop.registerDragdropHandler("movespan2","movediv2");
</script>

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.