Ext Table复合表头

最新推荐文章于 2014-05-09 15:49:50 发布

原创最新推荐文章于 2014-05-09 15:49:50 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #ext #stylesheet #html #function #layout

Ext 专栏收录该内容

10 篇文章

订阅专栏

本文展示了一个使用ExtJS框架实现的column布局示例。该示例通过设置不同列的比例宽度，展示了如何在一个面板中组织三列内容。第一列和第二列各占25%的宽度，第三列则占50%。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
   <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
</head>

<body>
    <script>

    Ext.onReady(drawTable);

    function drawTable(){
             var p = new Ext.Panel({
             title: 'column布局',
             width:500,
             height:100,
             layout:'column',//声明布局类型为column
             renderTo:'show',//填充到id为show的区域
             items: [{
                title: '列1',//标题
                html:'<p>列1内容</p>',
                //width:100,//采用固定像素宽度
                columnWidth: .25 //采用比例宽度，相当于百分比，总和为1，这里相当于25%，columnWidth总和必须为1
             },{
                title: '列2',
                html:'<p>列2内容</p>',
                //width:100,
                columnWidth: .25
             },{
                title: '列3',
                html:'<p>列3内容</p>',
                //width:300,
                columnWidth: .5
             }]
        });
    }
    </script>

<div id='show'></div>
</body>
</html>