Ext Table复合表头

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

weoln

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

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext 文章标签： table ext stylesheet html function layout

本文链接：https://blog.youkuaiyun.com/weoln/article/details/2652196

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>