`

EXTJS4 Form表单中Combox取值与设置值问题

 
阅读更多
extjs中combobox取值会取到显示值,取不到value值,所以在表单提交的时候不能用form.submit();要把所有的值都取出来用ajax提交。
ComboBox代码
Ext.define('App.view.RoleComboBox',{
    extend:'Ext.form.ComboBox',
    alias:['widget.roleComboBox'],
    fieldLabel:'Role',
    valueField:'id',
    displayField:'name',
    name:'role',
    hiddenName:'role',
    triggerAction:'all',
    labelAlign:'right',
    typeAhead:true,
    minChars:1,
    editable:false,
    store:'RoleStore',
    pageSize:10,
    selectOnFocus:true,
    matchFieldWidth:false,
    listConfig:{
        width:240
    }
});

设置值代码:
if(data.roleId){
            this.roleComboBox.setValue(data.roleId);
            this.roleComboBox.setRawValue(data.roleName);
        }

取值代码:
注意:var roleBox = me.getUserUpdateView().roleComboBox;
        var roleValue = roleBox.value;
这两句代码一定要在form.getValues();前面,要不然取到的值是空的。
var roleBox = me.getUserUpdateView().roleComboBox;
        var roleValue = roleBox.value;
        var formPanel = btn.up('form');
        var form = formPanel.getForm();
        var values = form.getValues();//取到表单数据
        Ext.apply(values,{role:roleValue});


表单提交代码:
Ext.Ajax.request({
                url:formatUrl('user/userUpdate.do'),
                method:'POST',
                params :values,
                success:function(response){
                    var responseText = response.responseText;
                    var obj = Ext.JSON.decode(responseText);
                    if(obj.success == 'ok'){
                        form.reset();
                        btn.up('window').hide();
                        Ext.Msg.alert('系统提示','用户修改成功');
                        me.search();
                    }else{
                        Ext.Msg.alert('系统提示','修改失败,'+obj.msg);
                    }
                },
                failure:function(response){
                    var responseText = response.responseText;
                    var obj = Ext.JSON.decode(responseText);
                    Ext.Msg.alert('系统提示','修改失败'+obj.msg);
                }
            });
分享到:
评论

相关推荐

    ExtJs 动态添加表单

    在ExtJS中,我们可以使用`Ext.container.Container`类来创建一个容器,然后设置布局为`form`,以便容纳表单字段。例如: ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    ExtJs获取表单元素的值

    这里,`Ext.getCmp('searchlist')`用于获取ID为`searchlist`的组件,然后调用`getForm()`方法获取与该组件关联的表单对象,最后调用`getValues()`方法来获取表单中的所有字段值,并将其存储在`objectjson`变量中。...

    Extjs之旅-combox之远程加载数据

    在Combox中,我们通常会配置一个与服务器交互的Store,并设置它的proxy属性为AjaxSource,这样每次用户在输入框中输入内容时,Store都会自动发送一个Ajax请求,请求参数通常是用户输入的关键词。 配置远程加载的...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    extjs4 入门基础,form、grid、tree

    在ExtJS中,表单是数据输入和验证的重要部分。表单组件包括文本框、复选框、单选按钮、下拉列表等。你可以使用`Ext.form.Panel`创建一个基本的表单,通过`items`配置项添加表单字段。每个字段可以通过` xtype`属性...

    Extjs4 Combox tree

    ExtJS4中的ComboxTree是一种将下拉列表与树形结构结合的组件,它扩展了标准的ComboBox,提供了更丰富的用户交互体验。这种组件在数据展示和选择时特别有用,尤其是在处理具有层级关系的数据时,比如部门结构、地区...

    extjs-form组件配置参数详解

    `Ext.form.Action`是ExtJS中的一个类,用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success**: 执行成功后的回调函数,该函数接收两个参数:`form`(当前...

    解决Extjs4中form表单提交后无法进入success函数问题

    在开发使用Extjs4框架的应用程序时,可能会遇到form表单提交后,无法正确进入success回调函数的问题。针对这个问题,首先需要进行两个方面的检查和确认,以确保form提交操作能够顺利进入success回调函数。 首先,...

    如何提交Extjs 中的表单

    在ExtJS中,提交表单是一项常见的操作,用于将用户在表单中填写的数据发送到服务器进行处理。本文将详细讲解如何在ExtJS环境中实现表单的提交,并结合Java Web后端进行交互。 首先,我们需要了解ExtJS中的表单组件...

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    extjs4 grid(含form)

    extjs4 grid 包括form js代码

    extjs4中文文档

    EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档...同时,文档还可能涵盖了EXTJS4的升级、调试、性能优化等相关内容,帮助开发者解决实际开发过程中遇到的问题。

    ExtJs4.0 表单提交Demo

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

    Extjs4--Form登录功能,结合struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架集成,构建一个功能完善的登录表单。ExtJS 4是一个强大的JavaScript库,用于创建富客户端应用程序,而Struts2是一个流行的Java服务器端MVC框架,常用于处理...

    ExtJs 4 API中文

    ExtJs 4 API 中文

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    ExtJs中表单formPanel的横向布局

    在ExtJs框架中,表单的设计与布局是一个关键部分,特别是在需要创建复杂、响应式界面时。本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照...

    extjs动态表单

    6. **事件处理(Event Handling)**:动态表单中的事件处理机制使得开发者能够响应用户操作,例如点击按钮、改变字段值等,从而实现复杂的业务逻辑。 7. **插件和工具(Plugins and Tools)**:ExtJS有许多内置的...

Global site tag (gtag.js) - Google Analytics