ExtJS5.1学习笔记5——创建复杂的表单

来源：互联网发布：神经网络蜂群算法代码编辑：程序博客网时间：2024/05/21 10:58

效果图如下：

下面是代码：

Ext.onReady(function(){var form = Ext.create('Ext.form.Panel', {title: 'form',frame: true,width: 500,height: 400,margin: 20,renderTo: 'form',collapsible: true,autoScroll: true,defaultType: 'textfield',defaults: {anchor: '100%'},fieldDefaults: {labelWidth: 50,labelAlign: 'left',margin: 5,flex: 1},items: [{xtype: 'container',layout: 'hbox',items: [{xtype: 'textfield',name: 'name',fieldLabel: '姓名',allowBlank: false}, {xtype: 'numberfield',name: 'age',fieldLabel: '年龄',decimalPrecision: 0,vtype: 'age',maxValue: 120,minValue: 0}]}, {xtype: 'container',layout: 'hbox',items: [{xtype: 'textfield',name: 'phone',fieldLabel: '电话',allowBlank: false,emptyText: '电话号码或手机号码'}, {xtype: 'textfield',name: 'phone',fieldLabel: '邮箱',allowBlank: false,emptyText: 'Email地址'}]}, {xtype: 'textareafield',name: 'remark',fieldLabel: '备注',height: 50}],buttons: [{text: '保存'}]});});

0 0