不在一行:
这个比较简单,直接在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>' }] }] });
效果图: