1.所有组件都可以放入window,此时子组件不需要配置renderTo,只需要将它们作为window的items子项即可。

2.items子项必须先创建,最后创建window,否则子项不会显示。

3.应在关闭window之前(beforeclose事件)销毁它

Ext.create("Ext.window.Window", {
    id: "AuthorizationWin",
    title: "正在编辑……",
    autoShow: true,
    style: "border:none;padding:10px;",  //去除window组件dom元素的边框
    border: false, // 去除window组件的边框
    modal: true,  //添加遮罩
    layout: "anchor",
    width: ,
    height: ,
    items: [
            Ext.getCmp("gridPanel")
    ],
    listeners: {
        beforeclose: function () { //关闭前销毁window,不能在close时销毁,否则遮罩没法清除
            this.destroy();
        },
        close: function () { }
    }
});

登录框

Ext.onReady(function () {
    //创建表单
    Ext.create("Ext.form.Panel", {
        id: "formLogin",
        border: false, // 去除panel组件的边框
        defaultType: "textfield",
        defaults:{style:"margin-top:10px;"},
        layout: {
            type: 'vbox',
            align: 'center'
        },
        items: [
                {
                    height: ,
                    emptyText:"用    户",
                    fieldStyle: { background: '#ffffff url(/Img/Ico/user.png) no-repeat 8px center', paddingLeft: '33px' }
                },
                {
                    height: ,
                    emptyText: "密    码",
                    fieldStyle: { background: '#ffffff url(/Img/Ico/block.png) no-repeat 8px center', paddingLeft: '33px' }
                },
                {
                    xtype:"button",
                    style: "border:none;background:#16699E;margin-top:10px;",
                    iconCls:"btnIco",
                    width: ,
                    height:,
                    frame:false,
                    border: false,
                    text:"登  入"
                }
        ]            
    });

Ext.create("Ext.window.Window", {
        title: "Drugs ERP Login",
        bodyPadding: ,
        autoShow: true,
        style: "border:none;padding:10px;",  //去除window组件dom元素的边框
        border: false, // 去除window组件的边框       
        closable: false,
        draggable:false,
        layout: "anchor",
        width: ,
        height:,
        items: [
                Ext.getCmp("formLogin")
        ],
        listeners: {
            beforeclose: function () { //关闭前销毁window,不能在close时销毁,否则遮罩没法清除
                this.destroy();
            },
            close: function () { }
        }
    });
});

/*按钮内图标*/
.btnIco {
    background: url(../../Img/Ico/login.png);
    margin-left:78px;
}

Javascript - 学习总目录

Javascript - ExtJs - Window组件的更多相关文章

  1. Javascript - ExtJs - GridPanel组件

    GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...

  2. 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件

    上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...

  3. Extjs window组件 拖动统制

    Extjs window组件 拖动控制有时候一拖就拖出了浏览器,在想拖回来就不好办了: 解决办法:参考以下代码,在加载Ext核心库以后执行: Ext.override(Ext.Window, {    ...

  4. Javascript - ExtJs - TreePanel组件

    TreePanel组件(Ext.tree.TreePanel)logogram:Ext.tree.Panel | xtype:treepanel 树与节点 树面板组件的根是源头,从根上拓展出其它的子节 ...

  5. Javascript - ExtJs - ToolTip组件

    一个浮动的提示信息组件…… Ext,                               //可选 指定箭头的位置     anchor: 'buttom',                  ...

  6. Javascript - ExtJs - XTemplate组件

    XTemplate组件(Ext.XTemplate) 如果有一些重复的html代码需要装入数据,可以考虑使用XTemplate模板组件.XTemplate可以填入数组.对象,支持条件判断.for循环. ...

  7. Javascript - ExtJs - GridPanel组件 - 编辑

    GridPanel组件 - 编辑 Ext.grid.plugin.Editing 如果要对表格使用列编辑器控件,则需要完成以下几步 1.将columns中需要编辑的列设为editor并提供编辑列时所要 ...

  8. Javascript - ExtJs - TabPanel组件

    示例 Ext.create('Ext.tab.Panel', {     width: "100%",     renderTo: "tabBox",      ...

  9. 无废话ExtJs 入门教程三[窗体:Window组件]

    无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...

随机推荐

  1. okhttp 内网可以有,但外网访问数据返不回来,代码一样

    :1.问题点在于 下图红框里写成 text/html了,需要改成application/json,造成的问题有:unexpected end of stream  这个是406错误:加上日志之后okh ...

  2. (二叉树 BFS DFS) leetcode 111. Minimum Depth of Binary Tree

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  3. 数据库中in和exists关键字的区别

    数据库中in和exists关键字的区别 in 是把外表和内表作hash join,而exists是对外表作loop,每次loop再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的 ...

  4. Storm中重要对象的生命周期

    Spout方法调用顺势 declareOutputFields()(调用一次) open() (调用一次) activate() (调用一次) nextTuple() (循环调用 ) deactiva ...

  5. go 实现用户特权判断的例子

    需求:实现用户特权,可以满足下面1个或多个条件 红名 达人 vip会员 vip超级会员 蓝钻用户 红钻用户 1.实现方法一:可以根据数据库字段,每个特权用一个字段,进行判断缺点:每增加一个特权,要进行 ...

  6. REST_返回形式

    摘录: "Web resources" were first defined on the World Wide Web as documents or files identif ...

  7. flask 渲染jinja2模版和传参

    渲染模版(html文件) A.模版文件(html)放入到template目录下,项目启动的时候会从template目录里查找, B.从flask中导入“render_tempalte”函数 C.在视图 ...

  8. eclipse没有server选项

    摘录自:https://www.cnblogs.com/xiaoxiaoweng/p/7298183.html 问题描述:eclipse没有server选项 解决问题:找到Help->Insta ...

  9. 10.外观模式(Facade Pattern)

    动机(Motivate):    在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序与子系统之间的交互接口?如何将复杂系统的 ...

  10. POJ - 2057 The Lost House(树形DP+贪心)

    https://vjudge.net/problem/POJ-2057 题意 有一只蜗牛爬上某个树枝末睡着之后从树上掉下来,发现后面的"房子"却丢在了树上面,.现在这只蜗牛要求寻找 ...