Extjs4中用到RESTful風格表格問題(update/保存按鈕變灰無法使用)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章