ExtJs学习笔记(16)_Form布局

时间:2022-04-24
本文章向大家介绍ExtJs学习笔记(16)_Form布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

这是最重要的一个布局,几乎所有的表单界面都可以采用form布局,详细的用法本文不作讨论(可以查阅官方API文档),这里只给出一个简单的示例

<script type="text/javascript">

    Ext.onReady(function() {

        var win = new Ext.Window({

            title: "form Layout",

            height: 150,

            width: 230,

            plain: true,

            bodyStyle: 'padding:15px',

            items: 

            {

                xtype: "form",

                labelWidth: 30,

                defaultType: "textfield",

                frame:true,

                items: 

                [

                    {

                        fieldLabel:"姓名",

                        name:"username",

                        allowBlank:false

                    },

                    {

                        fieldLabel:"呢称",

                        name:"nickname"

                    },

                    {

                        fieldLabel: "生日",

                        xtype:'datefield',

                        name: "birthday",

                        width:127

                    }

                ]

            }

        });

        win.show();

    });

</script>

效果图: