您的位置：首页 > Web前端 > extjs > 正文

extjs table布局

更多时间：2013-8-18 类别：Web前端浏览量：18542

extjs table布局

extjs table布局

Ext.layout.TableLayout对应面板布局layout，配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！

在layoutConfi中我们无需指定有几行，只要指定由几列就可以了，有几行往下写几行就可了。另外一点就是对于合并行列的时候记得指明高和宽否则可能出现你合并的行跟未合并的单元格一样高的情况。同Ext中多数布局一样也是在父容器指定对应的布局为"table"，然后子容器设置对应的参数（对table布局就是colspan等）。

一、Table布局实例

JScript 代码复制

new Ext.Panel(...{
    id:'pn',
    title:"新闻",
    renderTo:"liPanel",                    
    width:800,
    height:500,
    layout:"table",
    bodyStyle:'padding:10 10 10 10',
    layoutConfig:...{
        columns:2
    },
    defaults:...{
        height:220,
        width:380,
        frame:true
    },
    items:[
        ...{
            title:'国际',
            html:"第一个子panel(行：1,列：1)",
            bodyStyle:'padding:20'
        },
        ...{
            title:'国内',
            html:"第一个子panel(行：1,列：1)",
            bodyStyle:'padding:20'
        },
        ...{
            title:'新闻组图',
            colspan:2,
            html:"第一个子panel(行：1,列：1)",
            bodyStyle:'padding:20;',
            width:770
        }
    ]
});

附加的CSS样式为：

#pn td

{

padding:5px;

}

效果：

实例二：

JScript 代码复制


 <script type="text/javascript">    
Ext.onReady(function()...{    
    Ext.create('Ext.panel.Panel',...{    
        title:'Ext.layout.container.Table布局示例',    
        layout:...{    
            type:'table',//表格布局    
            columns:4 //设置表格布局默认列数为4列    
        }, 
        frame:true,    
        height:250,    
        width:310,    
        renderTo:Ext.getBody(),    
        defaults:...{    
            bodyStyle:'background-color:#FFFFFF;',    
            frame:true,    
            width:60,    
            height:50    
        },    
        items:[...{    
            title:'子面板一',    
            width:220,    
            colspan:3    
        },...{    
            title:'子面板二',    
            rowspan:2,    
            height:100    
        },...{title:'子面板三'},...{title:'子面板四'},...{title:'子面板五'}]    
    });    
});    
</script>

效果图：

标签：extjs table

上一篇：怎么实现显示用户浏览过的历史记录

下一篇：extjs accordion折叠布局

您可能感兴趣

extjs table布局

extjs table布局

热门推荐

排行榜