ext表單中一行多列的布局

关键字: ext表單中一行多列的布局

 

var simpleForm = new Ext.FormPanel({
            labelAlign : 'left',
            title : '表单例子',
            buttonAlign : 'right',
//            bodyStyle : 'padding:5px',
            width : 600,
            frame : true,
            labelWidth : 80,
            items : [{
                        layout : 'column', // 定义该元素为布局为列布局方式
                        border : false,
                        labelSeparator : '：',
                        items : [{
                                    columnWidth : .5, // 该列占用的宽度，标识为50％
                                    layout : 'form',
                                    border : false,
                                    items : [{ // 这里可以为多个Item，表现出来是该列的多行
                                        cls : 'key',
                                        xtype : 'textfield',
                                        fieldLabel : '用户名',
                                        name : 'name',
                                        anchor : '90%'
                                    }]
                                }, {
                                    columnWidth : .5,
                                    layout : 'form',
                                    border : false,
                                    items : [{
                                                cls : 'key',
                                                xtype : 'textfield',
                                                inputType : 'password',
                                                fieldLabel : '口令',
                                                name : 'passwd',
                                                anchor : '90%'
                                            }]
                                }]
                    }]

        });