登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> 程序员学前班[不再更新,只读] >> 主题: [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" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->
     <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" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->
     <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>

 


总数:2 页次:1/1 首页 尾页  
总数:2 页次:1/1 首页 尾页  


所在合集/目录



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



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

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1