ExtJS使用相同的窗口编辑和添加记录

时间:2014-06-28 17:56:03

标签: extjs extjs4 extjs4.1 extjs4.2 extjs-mvc

我有我的ExtJS 4.2.1 MVC应用程序。

在我的应用程序中,我有一个带工具栏的网格。工具栏有2个按钮,“添加新”和“编辑记录”。

在我的Controller.js中,我听我的工具栏按钮点击事件。

 this.control({
         'toolbar #newRecord': {
                        click: this.addRecord
                    },
    'toolbar #editRecord': {
                        click: this.editRecord
                    },
    '[xtype=editshiftcode] button[action=commit]': {
            click: this.saveRecord // here I have to add or edit
        }
}

然后我有一个Window,我想用它来编辑和添加记录:

Ext.define('App.view.EditShiftCode', {
    extend: 'Ext.window.Window',
    alias: 'widget.editshiftcode',

    height: 250,
    width: 550,
    title: 'Add / Edit Shift',
    modal: true,
    resizable: false,
    layout: 'fit',
    glyph: Glyphs.PENCIL,
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'container',
                //height: 175,
                layout: {
                    type: 'hbox',
                    align: 'strech'
                },
                items: [{
                    xtype: 'form',
                    bodyPadding: 10,
                    autoScroll: false,

                    itemId: 'editForm',
                    defaults: { // defaults are applied to items, not the container
                        allowBlank: false,
                        allowOnlyWhitespace: false,
                        msgTarget: 'side',
                        xtype: 'textfield'
                    },
                    items: [
                     {
                         xtype: 'textfield',
                         name: 'ShiftCode',
                         fieldLabel: 'Code'
                     },
                    {
                        xtype: 'textfield',
                        name: 'Description',
                        fieldLabel: 'Description'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'ShiftType'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'ShiftTypeId'
                    },

                    {
                        xtype: 'textfield',
                        name: 'Hours',
                        fieldLabel: 'Hours per Day'
                    },
                    {
                        xtype: 'colorcombo',
                        name: 'ColorHex',
                        fieldLabel: 'Color'
                    },
                    {
                        xtype: 'checkbox',
                        fieldLabel: 'Active',
                        name: 'IsActive',
                    }
                    ],
                }]
            }],
            buttons: [
                          {
                              text: 'OK',
                              action: 'commit',
                              glyph: Glyphs.SAVE
                          },
            {
                text: 'Cancel',
                action: 'reject',
                glyph: Glyphs.CANCEL
            }]
        });

        me.callParent(arguments);
    },

});

我的editRecord功能是:

editRecord: function (button, e, options) {

var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();

},

我的addRecord功能是:

addRecord: function (button, e, options) {

var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();

},

我的saveRecord功能是:

saveRecord: function (button, e, options) {

    // here i need to know what operation im going to perform.
    // if Im going to edit then I have to update my form record to my store record
    // if im going to add then I need to add a new item to my store.
}

这是对的吗?要使用相同的功能执行2个不同的操作?如果是这样,我怎么知道我将要采取什么行动以及如何做?

由于

1 个答案:

答案 0 :(得分:0)

这种方式总是对我有用:

  1. 用户选择网格中的记录
  2. 用户点击"编辑记录"
  3. 我使用loadRecord
  4. 的形式加载所选记录
  5. 当他点击“确定”时,我会拨打updateRecord
  6. 如果用户点击"添加记录"我创建了一个新的空白记录并转到第3步
  7. 如果他在添加记录后单击“确定”,我只需将新记录添加到网格中 - 您可以通过检查phantom标志轻松了解记录是新记录还是现有记录。因此,如果record.phantom === true则是新的。