form布局中添加红色提示信息

不在一行：

这个比较简单，直接在form布局中添加一个组件label就可以了

// 新增景点表单
var addSpot_form = Ext.create('Haso.Components.InputFormPanel', {
id: id_formPanel,
items: [{
id: id_spotId,
hidden: true,
name: 'viewspotDto.viewspot.id'
}, {
id: id_txtSpotName,
fieldLabel: Res.ViewSpot.NAME, // 名称
emptyText: Res.EmptyText.TEXT_002,// 必填，50个字符以下
name: 'viewspotDto.viewspot.name'
}, {
xtype: 'container',
layout: 'hbox',
defaultType: 'textfield',
margin: '0 0 5 0',
defaults: {
labelWidth: 80
},
items: [{
id: id_city,
fieldLabel: Res.ViewSpot.CITY, // 所在城市
readOnly: true,
emptyText: '必填',
name: 'viewspotDto.viewspot.city.name'
}, {// 清空按钮
xtype: 'haso-ClearButton',
textFieldId: clearArray
}]
}, {
id: id_address,
fieldLabel: Res.ViewSpot.ADDRESS, // 详细地址
emptyText: Res.EmptyText.TEXT_002,// 必填，50个字符以下
name: 'viewspotDto.viewspot.address'
}, {
id: id_telephone,
fieldLabel: Res.ViewSpot.TEL,// 联系方式
emptyText: Res.EmptyText.TEXT_003,// 20个字符以下'
name: 'viewspotDto.viewspot.telphone'
}, {
xtype: 'container',
layout: 'hbox',
defaultType: 'haso-DateField',
margin: '0 0 5 0',
defaults: {
labelWidth: 80
},
items: [{// 工作日
xtype: 'displayfield',
width: 80,
margin: '0 3 0 0',
value: Res.ViewSpot.WEEKDAYS
}, {// 开始时间
xtype: 'haso-TimeField',
id: id_weekday_begintime,
name: 'viewspotDto.viewspot.weekdayBeginDatetime'
}, {// '-'
xtype: 'displayfield',
margin: '0 10 0 10',
value: '-'
}, {// 结束时间
xtype: 'haso-TimeField',
id: id_weekday_endtime,
name: 'viewspotDto.viewspot.weekdayEndDatetime'
}]
}, {
xtype: 'container',
layout: 'hbox',
defaultType: 'haso-DateField',
margin: '0 0 5 0',
defaults: {
labelWidth: 80
},
items: [{// 周末
xtype: 'displayfield',
width: 80,
margin: '0 3 0 0',
value: Res.ViewSpot.WEEKEND
}, {// 开始时间
xtype: 'haso-TimeField',
id: id_weekend_begintime,
name: 'viewspotDto.viewspot.weekendBeginDatetime'
}, {// '-'
xtype: 'displayfield',
margin: '0 10 0 10',
value: '-'
}, {// 结束时间
xtype: 'haso-TimeField',
id: id_weekend_endtime,
name: 'viewspotDto.viewspot.weekendEndDatetime'
}]
}, {
id: id_fee,
fieldLabel: Res.ViewSpot.FEES,// 门票,
emptyText: Res.EmptyText.TEXT_007,// 50个字符以下
name: 'viewspotDto.viewspot.fee'
}, {
id: id_busInfo,
fieldLabel: Res.ViewSpot.BUSINFO, // 乘车信息
emptyText: Res.EmptyText.TEXT_004,// 200个字符以下
name: 'viewspotDto.viewspot.busInfo'
}, {
id: id_website,
fieldLabel: Res.ViewSpot.URL, // 网址,
emptyText: Res.EmptyText.TEXT_005,// 100个字符以下
name: 'viewspotDto.viewspot.url'
}, {
id: id_description,
xtype: 'textareafield',
name: 'viewspotDto.viewspot.description',
emptyText: Res.EmptyText.TEXT_004,// 200个字符以下
fieldLabel: Res.ViewSpot.DESCRIPTION, // 基本说明
height: 120,
grow: true// 文本域会根据输入的内容自动修改自身高度
}, {
id: id_pic,
xtype: 'filefield',
fieldLabel: this.Res.FRM_PIC, // 照片,
name: 'viewspotDto.vsImage',
emptyText: Res.EmptyText.TEXT_001,
allBlank: false,
msgTarget: 'side',// 错误在右边显示
buttonText: Res.Com.CHOOSE// 选择
}, {
xtype: 'combobox',
id: id_type,
name: 'viewspotDto.viewspot.type',
fieldLabel: Res.ViewSpot.TYPE, // 类型
value: '1',// 设置默认选中值
store: Ext.create('Ext.data.Store', {
fields: ['value', 'display'],
data : Com.Const.LONGITUDE_LATITUDE_TYPE
}),
editable: false, // 设置为只可选择，不可编辑
queryMode: 'local',// 本地数据时使用'local'
displayField: 'display',
valueField: 'value'
}, {
id: id_latitude,
fieldLabel: Res.ViewSpot.LATITUDE, // 纬度,
emptyText: Res.EmptyText.TEXT_003,// 20个字符以下
name: 'viewspotDto.viewspot.latitude'
}, {
id: id_longitude,
fieldLabel: Res.ViewSpot.LONGITUDE, // 经度,
emptyText: Res.EmptyText.TEXT_003,// 20个字符以下
name: 'viewspotDto.viewspot.longitude'
}, {
xtype: 'combobox',
id: id_editstatus,
name: 'viewspotDto.viewspot.editStatus',
fieldLabel: Res.ViewSpot.EDIT_STATUS, // 编辑状态
value: '0',// 设置默认选中值
store: Ext.create('Ext.data.Store', {
fields: ['value', 'display'],
data : Com.Const.VIEW_SPOT_EDIT_STATUS
}),
editable: false, // 设置为只可选择，不可编辑
queryMode: 'local',// 本地数据时使用'local'
displayField: 'display',
valueField: 'value'
}, {
xtype: 'label',
html: '<span style=\'color:red\'>编辑中： event页面不能选择该景点</br>已完成： event页面可以选择该景点</span>'
}, {
xtype: 'hiddenfield',
id: id_hidden_picUrl,
name: 'viewspotDto.hiddenUrl',
value: ''
},{
xtype: 'hiddenfield',
id: id_hidden_edit,
name: 'viewspotDto.edit',
value: '0'
},{// 城市ID
id: id_cityId,
xtype: 'hiddenfield',
name: 'viewspotDto.viewspot.city.id'
}]
});

{
xtype: 'label',
html: '<span style=\'color:red\'>编辑中： event页面不能选择该景点</br>已完成： event页面可以选择该景点</span>'
}

这个就是新加的label组件，用于解释，上一个控件的作用的

效果图：

第二种是在同一行显示的：

var formPanel = Ext.create('Haso.Components.InputFormPanel', {
id: id_formPanel,
region: 'north',
split: false,
items: [{// 用户名
id: id_txtLonginName,
fieldLabel: Res.User.LOGIN_NAME,
name: 'UserInfo.UserId',
emptyText: Res.EmptyText.TEXT_001, // '必填',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {// 密码
id: id_txtPassword,
fieldLabel: Res.User.PASSWORD,
inputType: 'password', // 隐藏输入内容，显示为“·”号
name: 'UserInfo.PWD',
emptyText: Res.EmptyText.TEXT_001, // '必填',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {// 密码确认
id: id_txtPasswordTwo,
fieldLabel: Res.User.PASSWORD_TWO,
inputType: 'password', // 隐藏输入内容，显示为“·”号
name: 'UserInfo.PWDTwo',
emptyText: Res.EmptyText.TEXT_001, // '必填',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {// 显示名
id: id_txtDisplayName,
fieldLabel: Res.User.DISPLAY_NAME,
name: 'UserInfo.UserName',
//                        emptyText: this.Res.EMPTY_TEXT, // '50个字符以下,例如：学生半价',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {// U8用户名
id: id_txtU8UserName,
fieldLabel: Res.User.U8_USER_NAME,
name: 'UserInfo.UserId_U8',
emptyText: Res.EmptyText.TEXT_001, // '必填',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {
xtype: 'panel',
border: false,
layout: 'column',
defaults: {
labelWidth: 80
},
items: [{ // 是否是管理员
id: id_chkAdmin,
xtype: 'checkboxfield',
fieldLabel: Res.User.IS_ADMIN,
boxLabel: Res.User.ADMIN,
inputValue: true,
name: 'UserInfo.IsAdmin',
flex: 1, // 设定hbox下所占比例
allowBlank: true
}, {
xtype: 'label',
margin: '3 0 0 5',
html: '<span style=\'color:red\'>*设置管理员权限</span>'
}]
}]
});

在form里面要加个column布局，看最后的一段代码就明白了，不过那个文字label要稍作布局修改

效果图：