ExtJS 4.2 HBox 和 VBox 组合使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="">
        <title>ExtJS Test</title>
        <link rel="stylesheet" href="resources/css/ext-all-neptune-debug.css" />
        <style>
              
        </style>
        <script src="ext-all-debug-w-comments.js"></script>
        <script src="locale/ext-lang-zh_CN.js"></script>
    </head>
    <body>
        <div id="tabContainer" style="margin:10px;"></div>
        <script>
            Ext.onReady(function(){
                   
                 //1.基本的选项卡 
                var tabs1 = Ext.create('Ext.tab.Panel', { 
                    renderTo: 'tabContainer', 
                    activeTab: 0,                       //指定默认的活动tab 
                    plain: true,                        //True表示tab候选栏上没有背景图片(默认为false) 
                    enableTabScroll: true,              //选项卡过多时,允许滚动 
                    defaults: { autoScroll: true }, 
                    items: [{ 
                        id: "tab1", 
                        title: '普通Tab', 
                        items:[{
                            xtype: 'container',
                            height:500,
                            layout: {
                                type: 'vbox',       // 子元素垂直布局
                                align: 'stretch',    // 每个子元素宽度充满子容器
                                padding: 5
                            },
                            items: [{             
                                xtype: 'container',
                                layout: {
                                    type: 'hbox', 
                                    align: 'stretch',
                                    padding: 5
                                },
                                defaults:{
                                    margins: 5
                                },
                                items:[{
                                    flex: 1,
                                    xtype:'panel',
                                    html:'1'
                                },{
                                    flex: 1,
                                    html:'2'
                                }],
                                flex: 1                                       // 占用容器的1/3高度 (在以 Box 为布局中)
                            },{             
                                xtype: 'panel',
                                baseCls:'',
                                layout: {
                                    type: 'hbox', 
                                    align: 'stretch',    
                                    padding: 5
                                },
                                defaults:{
                                    margins: 5
                                },
                                items:[{
                                    flex: 1,
                                    html:'3<br /><br /><br /><br /><br />'
                                },{
                                    flex: 1,
                                    html:'4<br /><br /><br /><br /><br />'
                                }],
                                flex: 1                                       // 占用容器的1/3高度 (在以 Box 为布局中)
                            }, {             
                                xtype: 'panel',
                                baseCls:'',
                                layout: {
                                    type: 'hbox',
                                    align: 'stretch',      
                                    padding: 5
                                },
                                defaults:{
                                    margins: 5
                                },
                                items:[{
                                    flex: 1,
                                    html:'5<br /><br /><br /><br /><br />'
                                },{
                                    flex: 1,
                                    html:'6<br /><br /><br /><br /><br />'
                                }],
                                flex: 1                                       // 占用容器的1/3高度 (在以 Box 为布局中)
                            }]
                        }],
                        closable: true                  //这个tab可以被关闭 
                    }, { 
                        id: "tab2", 
                        title: '内容来至div'
                    }, { 
                        id: "tab3", 
                        title: 'Ajax Tab'
                    }, { 
                        id: "tab4", 
                        title: '事件Tab', 
                        listeners: { activate: handleActivate }, 
                        html: "带事件的Tab。" 
                    }, { 
                        id: "tab5", 
                        title: '不可用Tab', 
                        disabled: true, 
                        html: "不可用的Tab,你是看不到我的。" 
                    }] 
                }); 
                   
                //单击tab4后触发的事件 
                function handleActivate(tab) { 
                    alert(tab.title + ': activated事件触发。'); 
                } 
                   
                var resultsPanel = Ext.create('Ext.panel.Panel', {
                    title: 'Results',
                    width: 600,
                    height: 400,
                    layout: {
                        type: 'vbox',       // 子元素垂直布局
                        align: 'stretch',    // 每个子元素宽度充满子容器
                        padding: 5
                    },
                    items: [{               // 指定一个grid子元素
                        xtype: 'grid',
                        columns: [{header: 'Column One'}],            // 只配置一列显示,没有数据
                        store: Ext.create('Ext.data.ArrayStore', {}), // 设置一个没有数据的store
                        flex: 1                                       // 占用容器的1/3高度 (在以 Box 为布局中)
                    }, {
                        xtype: 'splitter'   //一个分割器在两个子组件之间
                    }, {                    // Details 面板作为一个配置进来的Panel (没有用xtype指定,默认是 'panel').
                        title: 'Details',
                        bodyPadding: 5,
                        items: [{
                            fieldLabel: 'Data item',
                            xtype: 'textfield'
                        }], // 表单元素(文本域)
                        flex: 2             // 占用容器的2/3高度 (在以 Box 为布局中)
                    }]
                });
            });
        </script>
    </body>   
</html>


知识共享许可协议
《ExtJS 4.2 HBox 和 VBox 组合使用》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     152.41ms