zoukankan      html  css  js  c++  java
  • ExtJS border Layout

    View Code
    <script type="text/javascript">
            Ext.require(['*']);
            Ext.onReady(function () {
                var cw;//表示的是window 组件
                function closeRegion(e, target, header, tool) {
                    var panel = header.ownerCt;//获取持有Container元素
                    newRegions.unshift(panel.initialConfig); //unshift 把元素添加到数组的最前面
                    viewport.remove(panel);
                }
                var newRegions = [{
                    region: 'north',
                    title: 'North 2',
                    height: 100,
                    collapsible: true,
                    weight: -120
                }, {
                    region: 'east', //
                    title: 'East 2',
                     100,
                    collapsible: true
                }, {
                    region: 'west',
                    title: 'West 2',
                    collspsible: true,
                    100,
                    weight: -100
                }];
                var viewport = Ext.create('Ext.Viewport', {
                    layout: {
                        type: 'border',
                        padding: 5
                    },
                    defaults: {
                        split: true //箭头
                    },
                    items: [{
                        region: 'north',
                        colllapsible: true,
                        title: 'North',
                        split: true,
                        height: 100,
                        minHeight: 60,
                        html: 'north'
                    }, {
                        region: 'west',
                        collapsible: true,
                        title: 'Start at width 30%',
                        split: true,
                         '30%',
                        minWidth: 100,
                        minHeight: 140,
                        html: 'west<br>I am floatable'
                    }, {
                        region: 'center',
                        html: 'Center Center',
                        title: 'Center',
                        minHeight: 80,
                        items: [cw = Ext.create('Ext.Window', {
                            xtype: 'window',
                            closable: false, //不可关闭的
                            minimizable: true,
                            title: 'Constrained Window',
                            height: 200,
                             300,
                            constrain: true,//强迫在 父元素里面
                            html: 'I am in a Container',
                            itemId: 'center-window',
                            minimize: function () { //最小化按钮执行的事件
                                this.floatParent.down('button#toggleCw').toggle(); //查询父容器 下的按钮 id为 toggleCw的 并执行他的toggle事件
                            }
                        })],
                        bbar: ['Text followed by a spacer', '| ', {
                            itemId: 'toggleCw',
                            text: 'Contrained Window',
                            enableToggle: true,
                            toggleHandler: function () {
                                cw.setVisible(!cw.isVisible());//设置窗体的显示. 循环显示和隐藏window窗体
                            }
                        }, {
                            text: 'Add Region',
                            listeners: {
                                click: function () { //单击事件
                                    if (newRegions.length) {
                                        var region = newRegions.pop();//pop方法移除数组的最后一个对象,并返回这个对象.使用pop方法的元素必须包含length属性
                                        region.tools = [{ type: 'close', handler: closeRegion}]; //region 其实就是一个Panel对象,panel对象工具栏 添加 关闭按钮,关闭按钮的事件为 closeRegion
                                        viewport.add(region);
                                    }
                                    else {
                                        Ext.Msg.Show({
                                            title: 'All Added',
                                            msg: 'Close on of the dynamic regions first,关闭其中一个region!',
                                            //minWidth:Ext.Msg.minWidth
                                            buttons: Ext.Msg.OK,
                                            icon: Ext.Msg.ERROR
                                        });
                                    }
                                }
                            }
                        }, {
                            text: 'Change Title',
                            listeners: {
                                click: function () {
                                    var panels = viewport.query('panel');//component query
                                    Ext.each(panels, function (panel) {
                                        panel.setTitle(panel.title + "!");
                                    });
                                }
                            }
                        }]
                    }, {
                        region: 'east',
                        collapsible: true,
                        floatable: true,
                        split: true,
                         200,
                        minWidth: 120,
                        minHeight: 140,
                        title: 'east',
                        layout: {
                            type: 'vbox',
                            padding: 5,
                            align: 'stretch' //伸展
                        },
                        items: [{
                            xtype: 'textfield',
                            labelWidth: 70,
                            fieldLabel: 'Text field'
                        }, {
                            xtype: 'component',
                            html: 'I am floatable'
                        }]
                    }, {
                        region: 'south',
                        height: 100,
                        split: true,
                        collapsible: true,
                        title: 'Splitter above me',
                        minHeight: 60,
                        html: 'center south',
                        weight: -100
                    }, {
                        region: 'south',
                        title:'south',
                        collapsible: true,
                        split: true,
                        height: 200,
                        minHeight: 120,
                        layout: {
                            type: 'border',
                            padding: 5
                        },
                        items: [{
                            region: 'center',
                            title: 'South Central', //中心的主要的
                            minWidth: 80,
                            html: 'South Central'
                        }, {
                            title: 'South Eastern',
                            region: 'east',
                            flex: 1,
                            minWidth: 80,
                            html: 'South western - not resizable',
                            collapsible: true,
                            split:true
                        }, {
                            title:'South Western - not resizable',
                            region: 'west',
                            flex: 1,
                            minWidth: 80,
                            html: 'South Western<br> I collapse to nothing',
                            split: true,
                            collapsible: true,
                            splitterResize: true,
                            collapseMode: 'mini'
                        }]
                    }]
                });
    
    
    
    
            });
        </script>

  • 相关阅读:
    51nod 1087 1 10 100 1000(找规律+递推+stl)
    51nod 1082 与7无关的数 (打表预处理)
    51 nod 1080 两个数的平方和
    1015 水仙花数(水题)
    51 nod 1003 阶乘后面0的数量
    51nod 1002 数塔取数问题
    51 nod 1001 数组中和等于K的数对
    51 nod 1081 子段求和
    51nod 1134 最长递增子序列 (O(nlogn)算法)
    51nod 1174 区间中最大的数(RMQ)
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/2993922.html
Copyright © 2011-2022 走看看