ExtJs4.1布局具体解释

最新推荐文章于 2025-06-30 12:03:45 发布

转载最新推荐文章于 2025-06-30 12:03:45 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/llguanli/p/6937885.html

本文介绍了一个使用ExtJS创建的Border布局示例。该示例展示了如何在一个Viewport容器内通过Border布局来组织五个不同区域（north、south、west、center、east）的内容，并设置各区域的样式和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Border布局：

Ext.onReady(function(){
   Ext.QuickTips.init();
   Ext.create('Ext.container.Viewport', {   //通常是渲染到viewport中
        title: "table布局的面板",
        layout:'border',
       defaults: {
            collapsible: true, //可收起
            split: true,
            bodyStyle: 'padding:15px'
       },
       items: [{
            title: '上面north',
            region: 'north',      //位置
            height: 100
       },{
            title: '以下south',
            region: 'south',    //位置
            height: 150,
            minSize: 75,
            maxSize: 250
       },{
            title: '左面west',
            region:'west',    //位置
            margins: '5 0 0 0',
            width: 175,
            minSize: 100,
            maxSize: 250
       },{
            title: '中间Content',
            collapsible: false, //不可收起
            region:'center',    //位置
            margins: '5 0 0 0'
       },{
            title: '右面east',
            width: 175,
            region:'east',   //位置
            margins: '5 0 5 5'
       }]
   });
})