周末对ext布局进行了研究，发现以前觉得比较麻烦的东西，现在看来十分简单

最新推荐文章于 2025-12-30 15:17:26 发布

原创最新推荐文章于 2025-12-30 15:17:26 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #stylesheet #function #html #generator #layout

本文分享了作者周末研究Ext布局的心得体会，通过示例代码展示了如何利用Ext JS创建灵活的表格布局，包括自定义宽度、行列配置及按钮事件处理。

周末对ext布局进行了研究，发现以前觉得比较麻烦的东西，现在看来十分简单。ext的使用不是特别困难，但是如何才可以保证ext可以满足各种变态的页面需求的同时又可以使开<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled 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 type="text/javascript">
    function getBodyWidth(){
        return document.body.clientWidth-15;
    }

    function func_submit_onclick(){
        alert('hello');
    }
    var _bodyWidth = getBodyWidth();
    var _columns = 3 * 2;
    var _perWidth = _bodyWidth/_columns;

    Ext.onReady(function(){

        Ext.QuickTips.init();
        var tableForm=new Ext.FormPanel({
            name:'tableForm',
            id:'tableForm',
            frame:true,
            layout:'table',
            style:'height:100%',
            layoutConfig: {columns:_columns},
            title:'TableForm',
            defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_perWidth*2,height:30}
        });
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:1,width:_perWidth,items:{xtype:'datefield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:1,width:_perWidth,labelAlign:'center',items:{xtype:'datefield',fieldLabel:'to',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:2,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});
        tableForm.add({colspan:4,width:_perWidth*4,items:{xtype:'textfield',fieldLabel:'First Name',anchor:'100%'}});

        tableForm.addButton({text:'submit',handler:func_submit_onclick});
        tableForm.addButton({text:'cancel'});

        tableForm.render(Ext.getBody());
    });
    </script>
    </body>
</html>