首页
学习
活动
专区
圈层
工具
发布

Form 表单在数栈的应用(下):深入篇

​ 这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程,通过介绍一些 Form 表单中常用到的方法,来理解部分设计思想,加深我们对技术的追求。...在 Form 表单在数栈的应用(上): 校验篇 中提到,我们生在一个最好的时代,其实是别人造好轮子帮我们做了一些事情,那我们今天看一看,别人的轮子是怎么造的,我们自己能不能实现。...createBaseForm 方法,这个方法起到装饰器的作用,在 props 中包装了一个默认为 form 的变量,在这个变量中完成 Form 的所有功能。...方法来自 createForm.js,在 props 中包装一个 formPropName 变量,默认为 form [formPropName]: this.getForm(), };...装饰器可以简单理解为:能对一些 对象 进行修改,然后返回一个被包装过的 对象。

1.2K20

Form 表单在数栈的应用(下):深入篇

这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程,通过介绍一些 Form 表单中常用到的方法,来理解部分设计思想,加深我们对技术的追求。...在 Form 表单在数栈的应用(上): 校验篇 中提到,我们生在一个最好的时代,其实是别人造好轮子帮我们做了一些事情,那我们今天看一看,别人的轮子是怎么造的,我们自己能不能实现。...createBaseForm 方法,这个方法起到装饰器的作用,在 props 中包装了一个默认为 form 的变量,在这个变量中完成 Form 的所有功能。...方法来自 createForm.js,在 props 中包装一个 formPropName 变量,默认为 form [formPropName]: this.getForm(), };...装饰器可以简单理解为:能对一些 对象 进行修改,然后返回一个被包装过的 对象。

1.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Antd Form 实现机制解析

    背景 “在中后台业务中,表单页面基础的场景包括组件值的收集、校验和更新。...在 to B 业务中,表单页面的需求往往更复杂和定制化,除了上述的基本操作,还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景,在一些大型表单页面中还要考虑性能的问题,表单页面的需求往往是新同学摔得第一个跤...,在事件的回调中,通过默认的 getValueFromEvent 方法或者组件配置的 getValueFromEvent 方法,可以从参数 event 中正确的拿到组件的值。...未命名文件 复杂表单场景的最佳实践 看完了上面的 Form 内部的运行流程,下面我们一起来看看 Form 还提供了哪些机制方便我们解决一些复杂场景问题。...field,在获取表单值的时候已经被转换成了对应路径结构的对象或数组,如下面所示: { nested:{ fieldObj:{ name:'嵌套对象的值' }, fieldArray

    3.2K20

    ExtJs二(实现登录)

    第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...因为Img对象的实例在刷新图片的时候还要用到,因而最好用一个属性来指向对象实例,这样就可以通过该属性在类的内部访问到实例了。...在创建表单的前面添加以下创建Img对象实例的代码: me.image = Ext.create(Ext.Img, { src: "/VerifyCode" });  千万不要在创建表单后面创建...,不然在表单内插入图片的时候就找不到对象了。...登录按钮预设为禁用的。formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮,这个设计在Ext JS4也是新加入的,很方便,不再需要自己去写代码实现这个了。

    2.9K10

    Extjs form 组件

    1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例对象更方便的进行字段的配置...'//在字段的右面展示数据     重要的方法     Ext.form.field.ComboBox     控件支持自动完成、远程加载、和许多其他特性。...这个类的实例只在Form 提交的时候创建。     ...提交之前调用了isValid方法确保每个表单字段都已经填写正确    3.最后调用submit方法,并传递了两个回调函数success和failure,在这两个回调函数的参数中,action.result...可以引用到服务器端返回JSON的解析后的对象   数据可以通过loadRecord方法直接从Model加载进入Form Panel:    Ext.ModelMgr.getModel('User').load

    2.6K50

    ExtJs二(实现登录)

    第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。...因为Img对象的实例在刷新图片的时候还要用到,因而最好用一个属性来指向对象实例,这样就可以通过该属性在类的内部访问到实例了。...在创建表单的前面添加以下创建Img对象实例的代码: me.image = Ext.create(Ext.Img, { src: "/VerifyCode" });  千万不要在创建表单后面创建...,不然在表单内插入图片的时候就找不到对象了。...登录按钮预设为禁用的。formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮,这个设计在Ext JS4也是新加入的,很方便,不再需要自己去写代码实现这个了。

    2.6K20

    带你用React从零实现一个Antd4 Form表单

    前言 在cms后台管理系统中,大家一定绕不开对Form表单的使用,接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。...属性被初始化为传入的参数(initialValue),返回的 ref 对象在组件的整个生命周期内保持不变。...完成表单校验之后,接下来我们要在FormStore中实现表单提交方法,即onFinish与onFinishFailed方法。...由于这两个方法是Form组件的props参数,那么我们可以在FormStore中定义this.callbacks,然后再定义setCallbacks方法记录这两个方法: // FormStore...总不能不让类组件使用Form表单吧。 这个问题其实很好解决,我们用useForm得到的就是个被记录的对象而已,这个对象地址在组件的任何生命周期都不变。

    1.8K20

    基于华为AppCube搭建图书管理系统

    主要方向是在平台理论实践指导基础上,对应用开发的路线进行大致的梳理,帮助参赛者去进行应用的构建,促进应用成型落地。...该应用为图书管理系统,应用设计主要分为四步走: 1.确定应用功能 最基本的就是贡献图书、借阅图书、归还图书这三个功能点; 2.数据库设计 功能确定之后,需要一个数据库表用于存储数据,这里利用的是平台的对象建立功能...,用于存储图书的各种信息; 3.前端展示 有了数据之后,还需要前端页面展示,因此需要用到平台的标准页面,在模型视图中添加对应的数据模型映射到我们之前建好的数据对象,然后由页面上的组件去从模型中获取数据,...答案是建立一个脚本去操作数据对象,对数据进行增删改查等。完成脚本功能之后还需要回到标准页面,将脚本和对应的组件去进行绑定。...*******************/ // 当前组件 let _component = context.getCurrentComponent(); //校验表单 _component.getForm

    74230

    EXT表单

    ; ========================================= //ExtJs 表单提交   form.getForm().submit({       success:function...method=login',             method : 'post',           // 如果有表单以外的其它参数,可以加在这里。...我这里暂时为空,也可以将下面这句省略               params : '',            // 第一个参数是传入该表单,第二个是Ext.form.Action对象用来取得服务器端传过来的...                params: {                    form.getForm().getValues()   //取出表单所有值            },          ...true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条', emptyMsg: "没有数据"})   });   //如果store设置了url属性,可重新指定url的参数

    6.9K30

    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同

    Ext.Ajax.request和formPanel.getForm().submit()两种提交方法的异同: 1、 相同点: a) 都是使用异步提交的方式; b) 默认都是使用POST方式来提交数据;...2、 不同点: a) Request方法不可以使用waitMsg属性来设置在等待响应过程中显示的信息,而submit方法提交时这个设置是可用的(可以看到效果,而前面说的不可用是指设置了看不到效果);...b) Request方法必须将要提交的参数手动组织好然后作为名为params的参数的值才能提交到服务器,而submit方法会将表单内所有input元素组织好提交; c)  Request方法提交时,回调函数中会传入两个参数...),第二个参数是提交的参数对象,一般不需要用到,如果要读取返回的响应信息,要先用Ext.decode方法将其resonseText属性值转换成json对象才可以读取;如服务器端返回的是一个json格式的字符串...,所以,只有在出现网络错误,连不到服务器或找到响应页面(404)时,failure回调方法才会被执行;而Submit方法在返回的结果中,如果success为true的,就会自动执行success:function

    50610

    最熟悉的陌生人 rc-form

    上面的图片中可以看出这个函数利用闭包特性返回一个新函数,这个函数的参数其实就是你的业务组件对象,经过 createBaseForm 内部加工之后返回给你的是一个注入了 form 对象的组件。...首先对传入的表单组件调用 getFieldProps 方法进行了 props 的构建处理,接着返回一个函数,这个函数参数就是我们使用 getFieldDecorator 传入的表单组件,调用 fieldsStore...中的 getFieldMeta 获取表单组件的配置数据,兼容原有组件的配置属性以及对不支持 ref 组件的处理,最终返回一个克隆后的挂载处理后的一些配置对象的组件!...,如果用户没有设置 trigger 和 valuePropName 则使用默认值,随后调用 fieldsStore 中的getFieldMeta 方法,fieldsStore 实例对象在整个过程中尤为关键...name 属性获取数据中心的 fieldMeta,如果没有则默认空对象,也就是首次渲染返回初始值。

    1.5K20

    Ext常用组件

    表单是客户端和服务器交互的一种重要方式,Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力,表面上,表单控件只是添加了一些 CSS样式,但它在数据校验方面非常灵活。...在默认的情况下,表单验证的输入控件会监听blur事件,数据验证失败则会根据 msgTarget的设置显示错误消息。...最后看Ext的按钮,在【提交】按钮上,使用listeners配置项处理事件,值是一个JSON对象,该JSON对象的属性是事件名称,值是事件处理函数。...在本例中当点击按钮后,获取FormPanel包含的BasicForm对象,然后再调用submit()函数即可完成提交。 在本例中的提交到的后台程序login_action.jsp代码如下所示。...在默认情况下,表单验证的输入控件会监听blur事件,如果数据验证失败,则根据msgTarget的设置显示错误消息。

    1.4K00

    k3cloud单据插件

    OnInitialize是继承自动态表单的方法,主要应用在动态表单中已介绍。...OnBillInitialize中主要是加载单据参数BillOpenParameter,该参数继承自DynamicFormOpenParameter。 可以在OpenParameter增加自定义参数。...例如: 获取参数,设置单据的显示标题,初始化状态变量。...为此,BOS平台在操作上提供了校验服务,这样在系统内部通过插件调用服务前会自动执行校验服务。而外部系统访问的是BOS操作发布的服务本身也带有校验。...操作控制类校验在表单的操作前插件检查; 3. 业务控制类校验在表单校验服务校验。 该事件中可以通过设置参数的Cancel终止保存操作。 下面例子是保存前更新数据(信用评分单据保存设置信用等级标准)。

    1.3K10

    RCurl中这么多get函数,是不是一直傻傻分不清!!!

    以下两个也是get请求函数(参数可以写在单独的查询参数中) getForm #单独提交查询参数的get请求函数 getFormParams 可以根据带参数的URL,分解出原始参数对 容错与配置句柄函数...curl参数是一个句柄函数,它的参数指定对象是一个内嵌函数,通常是curl = getCurlHandle(),getCurlHandle()函数内同样是配置信息,不过curl句柄函数内的所有配置信息是可以提供给全局使用的...(.opts内的声明的配置参数会覆盖curl中的默认参数) .encoding="utf-8" ###编码参数 ) ?...下载到本地之后,打开正常! ? 你可以使用%>%管道函数把两句封装在一起,使用起来非常方便,比自带的download函数代码参数还少。...getForm getForm发送单独携带查询参数的get请求,这在之前的趣直播数据抓取中已经演示过了。

    3.1K50

    codereview-s8

    efficiencyView方法,但因为事件冒泡机制,也会间接的调用stepView方法 最佳实践 angular中可以使用内置的 $event 对象来解决相应问题 首先声明使用$event对象并传参...datepicker时,踩了一些坑,如下: 只有设置了position属性的元素的z-index才会生效 当父容器的z-index小于元素A时,其子容器的z-index无论多大都无法覆盖元素A 最佳实践...最佳实践 解决方法在这里,这种解决方法算是一种workaround,即在组件中使用另一个对象来储存父组件需要更新的那个值,算是做了一种类似中间件的处理,之后因为双向绑定自动更新机制对于对象的更新时更具reference...HTML5 最佳实践 比如我们想要限制上传文件类型为excel文件类型,只需要创建如下标签: 这样这个文件表单对话框被激活时...,默认会选取以.xls和.xlsx结尾的文件。

    2.2K30

    构建可维护的大规模应用:框架架构的最佳实践

    此外,框架还提供了标准化的开发流程和组件,使得团队能够更快地开发和部署应用程序。 最佳实践 下面是一些框架架构的最佳实践,可以帮助您构建可维护的大规模应用程序。 1....这样,某个模块的更改不会影响到其他模块,从而降低了代码出错的风险。在Java中,可以使用Spring Boot的依赖注入(DI)机制来实现模块化设计。 2....以下是一些Django的最佳实践。 分割视图和模板:分割视图和模板可以使代码更加清晰和易于维护。避免在视图中进行复杂的HTML或CSS操作,这些应该放在模板中实现。...缓存:对于读密集型应用,利用Django的缓存系统可以提高Web应用的执行效率 在本文中,我们探讨了构建可维护的大规模应用时,框架架构的最佳实践。...我们通过Java的Spring Boot框架和Python的Django框架的示例来展示了这些最佳实践的应用。

    63810

    构建可维护的大规模应用:框架架构的最佳实践

    此外,框架还提供了标准化的开发流程和组件,使得团队能够更快地开发和部署应用程序。 最佳实践 下面是一些框架架构的最佳实践,可以帮助您构建可维护的大规模应用程序。 1....这样,某个模块的更改不会影响到其他模块,从而降低了代码出错的风险。在Java中,可以使用Spring Boot的依赖注入(DI)机制来实现模块化设计。 2....以下是一些Django的最佳实践。 分割视图和模板:分割视图和模板可以使代码更加清晰和易于维护。避免在视图中进行复杂的HTML或CSS操作,这些应该放在模板中实现。...缓存:对于读密集型应用,利用Django的缓存系统可以提高Web应用的执行效率 在本文中,我们探讨了构建可维护的大规模应用时,框架架构的最佳实践。...我们通过Java的Spring Boot框架和Python的Django框架的示例来展示了这些最佳实践的应用。

    64610
    领券