extjs4中Ext.window.Window窗口控件的介绍

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

文章来介绍了这个extjs4的控制是一个窗口控件,窗口控件与面板控件基本类似，只不过他看起来像一个窗口，具备最大化，最小化，打开关闭、拖动等窗口操作，下面看看窗口生成代码

下面看看面板生成代码：

[html]

代码如下
<h1>窗口</h1> <div class="content" style="height:300px"> <button id="button1">打开窗口</button> <div id="win1"></div> </div>

[Js]

代码如下

Ext.onReady(function () {
    var window1 = Ext.create('Ext.window.Window', {
        applyTo: 'win1',
        layout: 'table',            //内部元素布局方式{absolute accordion anchor border card column fit form table}
        width: 500,
        height: 200,
        closeAction: 'hide',        //窗口关闭的方式：hide/close
        plain: true,
        title: "窗口标题",
        maximizable: true,          //是否可以最大化
        minimizable: true,          //是否可以最小化
        closable: false,            //是否可以关闭
        modal: true,                //是否为模态窗口
        resizable: false,           //是否可以改变窗口大小
        items: [{
            text: '按钮',
            xtype: "button"
        }, {
            width: 214,
            minValue: 0,
            maxValue: 100,
            value: 50,
            xtype: "slider"
        }, {
            xtype: "button",
            text: '一个菜单',
            width: "60px",
            height: "15px",
            menu: {
                items: [
                            new Ext.ColorPalette({
                                listeners: {
                                    select: function (cp, color) {
                                        Ext.Msg.alert('颜色选择', '你选择了' + color + '。');
                                    }
                                }
                            }), '-',
                            { text: '菜单项1' }, { text: '菜单项2' }, { text: '菜单项3' }
                        ]
            }
        }],

        buttons: [{
            text: '确定',
            disabled: true
        }, {
            text: '取消',
            handler: function () {
                window1.hide();
            }
        }]
    });
    Ext.fly("button1").on("click", function () {
        window1.show(Ext.get("button1"));
    });
});

效果如下：