extjs 4.2 教程 - 04 - Window - 2018
原创    xingfu2017    发表于:2018-01-26 15:43:35
  阅读 :60   收藏   编辑

上一节:extjs 4.2 教程 - 03 - 对话框之Ext.MessageBox - 2018

本节,为大家介绍Ext中另一个比较常用的控件,window就是在页面中创建一个窗口,我们可以把它称作为一个容器,并且可以向容器中添加button,form,grid,等控件,来应对复杂的业务需求。

创建window,设置相关属性,window的常用属性及说明,我已经写在下面的注释中,还没向大家介绍form,grid等组件,所有window内并没有相关内容

实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/ext-all.js" ></script>
        <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
        <script>
            Ext.onReady(function(){
               var win = Ext.create("Ext.window.Window", {
                    id:"win",
                    title:"Ext window 介绍",
                    width:700,
                    height:400,
                    draggable : false,//是否可拖拽
                    closable: true,//是否能关闭window
                    plain : true,
                    resizable: false,//是否允许用户从window的四边和四角改变window的大小
                    modal : true,//是否遮罩
                    autoShow: false,//默认是否显示,这里不显示
                    maximizable: true,//是否可最大化
                    minimizable: false,//是否可最小化,默认情况下,点击最小化的时候是没有任何操作的。我们需要手动处理minimize事件
                    border: false,
                    closeAction:'hide',//点击右上角的关闭是,默认执行的“destroy”,改为“hide”,当执行destory时,是无法再显示的。
                    buttons: [
                        { xtype: "button", text: "确定", handler: function () { 

                            Ext.Msg.alert("提示","点击了确认按钮")

                            } 
                        },
                        { xtype: "button", text: "取消", handler: function () {

                               //点击取消是,执行的方法,这里是隐藏
                                win.hide();

                            }
                        }
                    ]


               });

              Ext.get('btn').on('click',function(){

                  win.show();//调用show()方法,显示窗口

              })

            })
        </script>
    </head>
    <body>
        <input id="btn" value="显示窗口" type="button"/>
    </body>
</html>

运行点击后显示的效果

引用另外一个页面显示,也是常说的iframe,这里我们直接引用百度首页页面,在上面同样的代码中,我们新增一个html属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/ext-all.js" ></script>
        <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
        <script>
            Ext.onReady(function(){
               var win = Ext.create("Ext.window.Window", {
                    id:"win",
                    title:"Ext window 介绍",
                    width:700,
                    height:400,
                    draggable : false,//是否可拖拽
                    closable: true,//是否能关闭window
                    plain : true,
                    resizable: false,//是否允许用户从window的四边和四角改变window的大小
                    modal : true,//是否遮罩
                    autoShow: false,//默认是否显示,这里不显示
                    maximizable: true,//是否可最大化
                    minimizable: false,//是否可最小化,默认情况下,点击最小化的时候是没有任何操作的。我们需要手动处理minimize事件
                    border: false,
                    closeAction:'hide',//点击右上角的关闭是,默认执行的“destroy”,改为“hide”,当执行destory时,是无法再显示的。
                    html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.baidu.com" frameborder="0"></iframe>',
                    buttons: [
                        { xtype: "button", text: "确定", handler: function () { 

                            Ext.Msg.alert("提示","点击了确认按钮")

                            } 
                        },
                        { xtype: "button", text: "取消", handler: function () {

                               //点击取消是,执行的方法,这里是隐藏
                                win.hide();

                            }
                        }
                    ]


               });

              Ext.get('btn').on('click',function(){

                  win.show();//调用show()方法,显示窗口

              })

            })
        </script>
    </head>
    <body>
        <input id="btn" value="显示窗口" type="button"/>
    </body>
</html>

运行效果如下

引用一个DIV,在上面同样的代码中,我们新增一个contentEl属性。在页面新增一个div,ID设置为“content”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/ext-all.js" ></script>
        <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
        <script>
            Ext.onReady(function(){
               var win = Ext.create("Ext.window.Window", {
                    id:"win",
                    title:"Ext window 介绍",
                    width:700,
                    height:400,
                    draggable : false,//是否可拖拽
                    closable: true,//是否能关闭window
                    plain : true,
                    resizable: false,//是否允许用户从window的四边和四角改变window的大小
                    modal : true,//是否遮罩
                    autoShow: false,//默认是否显示,这里不显示
                    maximizable: true,//是否可最大化
                    minimizable: false,//是否可最小化,默认情况下,点击最小化的时候是没有任何操作的。我们需要手动处理minimize事件
                    border: false,
                    closeAction:'hide',//点击右上角的关闭是,默认执行的“destroy”,改为“hide”,当执行destory时,是无法再显示的。
                    contentEl: "content",
                    buttons: [
                        { xtype: "button", text: "确定", handler: function () { 

                            Ext.Msg.alert("提示","点击了确认按钮")

                            } 
                        },
                        { xtype: "button", text: "取消", handler: function () {

                               //点击取消是,执行的方法,这里是隐藏
                                win.hide();

                            }
                        }
                    ]


               });

              Ext.get('btn').on('click',function(){

                  win.show();//调用show()方法,显示窗口

              })

            })
        </script>
    </head>
    <body>
        <input id="btn" value="显示窗口" type="button"/>
    </body>

    <div id="content"> 

        div 内容
    </div>


</html>

运行效果如下

评论
条评论