您的位置:首页 > Web前端 > JavaScript

Extjs4中用到RESTful风格表格问题(update/保存按钮变灰无法使用)

2017-06-22 17:26 260 查看
  在rowEditing定义中,listeners下添加edit监听事件,点击保存可以进行相应操作

  var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {

        saveBtnText: '保存',

        cancelBtnText: '取消',

        //errorsText: '错误信息',

        //dirtyText: '已修改,你需要提交或取消变更',

        clicksToEdit: 2,//点击2次进行修改

        autoCancel: false,

        errorSummary: false,    //把自带的验证隐藏

        listeners: {

        edit:function(rowEditing,context) {//点击保存

                Ext.Ajax.request({

                     url : sysPath + '/storeAccount/addOrUpdateAccount',

                     params:context.record.data,//需要保存的内容

                     method:'POST',

                     success: function(action){

                                  Ext.Msg.alert('友情提示','保存成功');

                                  accountChildStore.load();

                           },

                     failure: function(action){

                               Ext.Msg.alert('友情提示','保存失败');

                           }

                  });

            },

            cancelEdit: function(rowEditing, context) {//点击取消

                if (context.record.phantom) {

                    accountChildStore.remove(context.record);

                }

            }

        }
    });

我们在grid.Panel中难免会有部分内容是有要求的,例如不为空

{

        text : '真实姓名',

        sortable : true,

        width : 80,

        dataIndex : 'userName',

        field: {

            xtype: 'textfield',

            allowBlank : false

        }

    }

在上面的userName内容不为空,直接加上allowBlank : false的话,你会发现update(保存)按钮变为灰色无法操作,就算你填写了内容,依然灰色

此时只需要加上如下代码可解决:

    //新增时校验通过显示保存按钮   

    Ext.override(Ext.grid.RowEditor,

            {

                addFieldsForColumn : function(column, initial) {

                    var me = this, i, length, field;

                    if (Ext.isArray(column)) {

                        for (i = 0, length = column.length; i < length; i++) {

                            me.addFieldsForColumn(column[i], initial);

                        }

                        return;

                    }

                    if (column.getEditor) {

                        field = column.getEditor(null, {

                            xtype : 'displayfield',

                            getModelData : function() {

                                return null;

                            }

                        });

                        if (column.align === 'right') {

                            field.fieldStyle = 'text-align:right';

                        }

                        if (column.xtype === 'actioncolumn') {

                            field.fieldCls += ' ' + Ext.baseCSSPrefix

                                    + 'form-action-col-field';

                        }

                        if (me.isVisible() && me.context) {

                            if (field.is('displayfield')) {

                                me.renderColumnData(field, me.context.record,

                                        column);

                            } else {

                                field.suspendEvents();

                                field.setValue(me.context.record

                                        .get(column.dataIndex));

                                field.resumeEvents();

                            }

                        }

                        if (column.hidden) {

                            me.onColumnHide(column);

                        } else if (column.rendered && !initial) {

                            me.onColumnShow(column);

                        }

                        // -- start edit

                        me.mon(field, 'change', me.onFieldChange, me);

                        // -- end edit

                    }

                }

            });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐