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

来源:互联网 发布:域名续费越来越贵 编辑:程序博客网 时间:2024/06/07 02:32

  在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
                    }
                }
            });