Ext form layout example code_extjs

Copy code The code is as follows:

Ext.onReady(function(){
Ext.QuickTips. init();
//The purpose of the first sentence is to provide prompt information for the required components. The main prompt information of the form is the error message of the client verification.
Ext.form.Field.prototype.msgTarget. = 'under';
//The purpose of the second sentence is to set the error message display position of the control. The main optional positions are:
var tdate = new Ext.form.DateField({
fieldLabel: 'Date',
emptyText: 'Please select a date',
format: 'Y-m-d',
disabledDays: [0, 7]
});
var txt = new Ext .form.TextField({
fieldLabel: 'Please enter your name',
allowBlank: false,
emptyText: 'Empty',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//Leave 10 spaces for the error message,
});
var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'Online Editor',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks :true,
enableLists:true,
enableSourceEdit:true
});
var txt2 = new Ext.form.TextField({
fieldLabel: 'Please enter your name',
allowBlank: false,
emptyText: 'empty',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'
//Leave 10 spaces for error prompts
});
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,// Pay attention to modifying the width of the title
title: 'form1',
frame: true,
width: 700,
url: 'sender/data.aspx',
items: [{
layout: 'column',//The right point is here, it means that the next items are sorted by column "Column"
items: [{
columnWidth: .5,
layout: 'form' , //The content in the first column is sorted by the form, from top to bottom
items: [txt2]
},
{
columnWidth: .5,
layout: 'form' , //The content in the second column is sorted by the form, from top to bottom
items: [txt, tdate]
}]
}, htmlEdt]
});
frm1. render("frm");
});