YUI的布局dialog

最新推荐文章于 2025-05-03 15:24:52 发布

原创最新推荐文章于 2025-05-03 15:24:52 发布 · 1.8k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#dialog #yui #stylesheet #function #class #div

本文介绍了一个使用ExtJS框架实现的复杂对话框及布局示例，详细展示了如何通过ExtJS创建包含多种布局（如BorderLayout）的对话框，并自定义对话框的位置、大小及其响应事件。

shangyuorg.js

var shangyuorg = function(){
    var dialog, showBtn, layout;
    return {
        init : function(){
        showBtn = new Ext.Button('button', {showtext: "选择机构",handler: this.showDialog});
        },
        showDialog : function(btn,showtext,personnel,department){ //此处的btn是标识从哪个按钮点击触发的事件
             this.showtext=showtext;
             this.department=department;
             if(!dialog){
                dialog = new Ext.LayoutDialog("shangyu-org-dlg", { //org-dg为id
                        modal: false,
                        width: 660,
                        height: 480,
                        shadow: false,
                        minWidth:700,
                        minHeight:500,
                     center: {
                         autoScroll: true
                     },
                        east: {
                         split: false,
                         initialSize: 180,
                         minSize: 100,
                         maxSize: 250,
                         titlebar: true,
                         collapsible: true,
                         animate: true
                     }
                });
                dialog.moveTo(0,0);//改变弹出框位置
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('确定', shangyuorg.choice, dialog);
                dialog.addButton('取消', dialog.hide, dialog);

                var innerLayout = new Ext.BorderLayout('center', {
                    center: {
                        autoScroll: true
                    },
                    south: {
                        initialSize: 130,
                        autoScroll: false,
                        split: true
                    }
                });
                layout = dialog.getLayout();
            }
            dialog.show(btn);
        },

                choice : function(){
        var text = Ext.get(shangyuorg.showtext).dom; //此处的showtext是定义自showDialog这个方法里面
        alert(text);
        alert(Ext.get(shangyuorg.department).dom);
        dialog.hide();
        }
    };
}();
//Ext.onReady(org.init, org, true);

shangyu_org.html:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>tree</title>
  
  <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  <link rel="stylesheet" type="text/css" href="resources/css/ytheme-aero.css" />
  <script type="text/javascript" src="yui-utilities.js"></script>
  <script type="text/javascript" src="ext-yui-adapter.js"></script>
  <script type="text/javascript" src="ext-all.js"></script>

               <script type="text/javascript" src="shangyuorg.js"></script>

</head>
<body>
  
     <div id="shangyu-org-dlg" style="visibility:hidden;">        
      <div class="x-dlg-hd">选择机构1</div>         
      <div class="x-dlg-bd">
       <div id="center" class="x-layout-inactive-content" style="overflow:auto; height:100%; width:100%;">
     

       </div>

        
       <div id="south" class="x-layout-inactive-content">

       </div>

       <div id="east" class="x-layout-inactive-content" style="overflow:auto; height:100%; width:100%;">

           </div>
       </div>
      </div>
  </div>
     <br><br>

     <input type="button" id="select1" value="选择部门和人员" onClick="shangyuorg.showDialog(this,choice_text,choice_personnel,choice_department)">
  <br>
  名称:<br><textarea cols="50" name="choice_text" rows="3"></textarea><br>
  人员ID:<br><textarea cols="50" name="choice_personnel" rows="3"></textarea><br>
  部门ID:<br><textarea cols="50" name="choice_department" rows="3"></textarea>

</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。