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

最新推荐文章于 2024-04-11 16:42:06 发布
最新推荐文章于 2024-04-11 16:42:06 发布
阅读量1.8k 收藏
点赞数
分类专栏： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snn1410/article/details/9216219
版权

不在一行：

这个比较简单，直接在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要稍作布局修改

效果图：


snn1410
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Laravel开发-formbuilder
08-28
在视图中，FormBuilder 会自动处理这些错误并显示相应的提示信息。 ### 4. 动态表单构建 FormBuilder 还支持动态生成表单元素。例如，如果你有一个数组，你可以用它来动态创建多个输入框： ```php $inputs = ['...
donation-form
04-06
当用户填写的信息不符合要求时，可以通过CSS改变错误信息的样式，如红色字体和下划线，以醒目地提醒用户。 综上所述，"donation-form"是一个涉及CSS技术的重要话题，通过合理的设计和CSS应用，我们可以创建出既美观...
ExtJS4为form表单必填项添加红色*标识
weixin_30894583的博客
12-10 337
通常情况下，ExtJS4的form表单必填项在输入状态下会有特殊提示，非输入状态下，显示却和其他项没有任何区别。为使必填项更加容易区分，我们需要根据allowBlank的属性值，为form表单中的必填项添加红色*标识 在ExtJS4的form表单中，常用组件的继承关系图1-1： //为form表单中必填项添加红色*号标志 Ext.override(Ext.form.fi...
Extjs中Textfiled后面加上红星提示
vickyfei的专栏
12-13 2958
界面布局采用Extjs，说实话，Ext挺华丽的，就是使用有点麻烦，参考的书籍也比较少。做表单的时候，有好几项是必填项，一般都会在输入框后面加上 * 作为标记。但是，好像Extjs的TextField没有直接添加的组件，在此贴出一份解决方法，方便自己日后使用，代码如下：   var nameField=new Ext.form.TextField({                    f
Vue3指令篇 -- 通过实现Element Plus Form添加Tip提示
最新发布
qq_41068362的博客
04-11 773
正常情况下，如果我们想实现给每个 **Form Item** 添加提示，一般的UI设计如下图，一般都是类似于这样的在 label 后面添加一个图标，hover 显示对应的 Tip 内容。这样的话具体的代码实现如下。如果 Form 表单很多，这样就会导致这个文件的代码过于冗长。以此为初衷，下面我们将实现通过指令的方式在所有表单页为**所需的表单项**添加 Tip 提示组件。
select显示form表单提示文字
热门推荐
erdouzhang
03-23 1万+
在做form表单下拉框时的提示性文字。html：<select> <option value="1" style="color: #b6b6b6" disabled selected>请选择水果</option> <option value="2">苹果</option> <option value="3">香蕉</option> <option value="4">橘子</opti
给form输入框添加提示信息
weixin_33877885的博客
12-29 733
受magento头部搜索栏的启发，稍微简化改写了一下js 代码如下 /**简化重命名后的js源代码，参考Varien.searchForm*Forminputhelpinfomationclientmodel*/Varien.helpInfo=Class.create();Varien.helpInfo.prototype={...
<转>Extjs中的提示信息用法
战斗机
04-18 256
ExtJS.form中msgTarget Ext表单提示方式：msgTarget:有4中方式：qtip,title,under,side [code="js"] Ext.onReady(function(){ Ext.BLANK_IMAGE_URL="resources/images/default/s.gif"; Ext.QuickTips.init();// 初始化显示提...
sandbox_form_validation
02-20
在表单验证中，CSS可以用来创建吸引人的提示信息、错误消息或者改变输入字段的外观，以反馈用户的输入状态。例如，可以使用CSS为正确填写的输入框添加绿色边框，为未通过验证的输入框添加红色边框，以增强用户体验。...
布局常用CSS命名.pdf
11-28
以下是对"布局常用CSS命名.pdf"文件中提到的一些关键知识点的详细解释： 1. **布局命名**： - `warp/wrapper`：通常用于表示页面的最外层容器，包裹整个页面内容。 - `content`：代表页面的主要内容区域。 - `...
Validation-Form:使用JavaScript，Html，Css的验证表单
03-31
此外，CSS还可以用来显示错误提示，比如为无效输入的字段添加红色边框或背景色。 然后，JavaScript是实现动态验证的关键。在用户提交表单之前，JavaScript代码会检查每个输入字段的值是否符合预定义的规则。例如，...
js注册表单错误输入框红色圆角提示效果
06-12
类似这种注册页面，国外已经很普遍了，只是国内的还比较少。火狐浏览器下，提示框为圆形渐隐渐现效果，IE浏览器下则差一点儿，为长方形效果
C#表单填写 红框标识错误配合ToolTip
Friendly_Blake的博客
02-19 291
只能利用失去焦点和按钮点击事件判断，不能使用keyup，因为双向绑定是在失去焦点后赋值 代码量增加了一倍，前端增加了border，后端增加了提示初始化和失去焦点的错误判断或者点击的错误判断 用户体验和弹窗差不多 ...
form表单，在label中加入icon图标和tooltip提示语？
SM_Cute的博客
04-07 1754
form表单，在label中加入icon图标和tooltip提示语？
【react】form表单中文本框超出提示的方法以及文本框特殊字符计算方法
m0_52743009的博客
10-09 567
form表单中文本框超出提示的方法以及文本框特殊字符计算方法
Flex中如何改变TextInput输入框得到焦点时边框颜色
xiaolong2006的专栏
11-04 179
以下的例子演示了Flex中如何通过设置themeColor属性，改变TextInput输入框得到焦点时边框的颜色。 '; } else { whichEl.style.display = 'none'; sb.innerHTML='显示代码'; whichEl.witdh="300px"; } } 隐藏代码 DE&lt;&lt;?xml version="1...
form表单校验，有数据，但是提示文字不消失
细节怪的博客
12-26 1372
自定义form表单验证，符合表单规则后，提示文字仍然不消失。
ant-design中form组件的item在typescript环境下自定义提示文字（Form.Item的tooltip属性）及提示图标
Yukinoshita_kino的博客
08-11 7069
ant-design中form组件的item在typescript环境下自定义提示文字（Form.Item的tooltip属性）及提示图标；label标签显示文字后面的问号图标进行自定义，并且自定义提示的文字。
a-form-item展示提示信息
08-30
在 Ant Design 中，`a-form-item` 组件可以用来展示表单项，并且支持展示提示信息。你可以通过 `help` 属性来设置提示信息的内容，它会显示在输入框下方。下面是一个示例代码： ```jsx import { Form, Input } from...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值