使用 Modal Window Ext JS 添加数据后自动加载网格

Question

我是 Ext Js 的新手，我有一个网格并尝试使用模态窗口插入新数据。数据输入或保存到商店后，网格应自动刷新。

客户模型

Ext.define('Customer', {
    extend: 'model.Base',
    alias :  'Customer',

    fields: [
        { name : 'id', type :'int', persist : false },
        { name : 'first_name', type : 'string'},
        { name : 'last_name', type : 'string'},
        { name : 'birthday', type : 'date',  dateWriteFormat:'Y-m-d'},
        { name : 'phone_no', type : 'string'},
        { name : 'email', type : 'string'},
        { name : 'username', type : 'string'},
        { name : 'password', type : 'string'},
    ],
});

客户商店

Ext.define('Customer', {
    extend: 'Ext.data.Store',
    alias: 'store.customer',
    model: 'model.Customer',
    pageSize : 25,
    id : 'customerId',
    autoSave : false,
    autoSync : false,

    require :[
        'model.Customer'
    ],

    proxy:{
        type: 'rest',
        enablePaging : true,
        batchActions : true,
        api :{
            read: '/api/Customer/pagination/',
            create: '/api/Customer/',
            update: '/api/Customer/',
            destroy: '/api/Customer/',
        },

        reader: {
            type: 'json',
            rootProperty: 'Customer',
            totalProperty : 'TotalCount'
        },
        writer: {
            type: 'json',
            dateFormat: 'Y-m-d',
            // writeAllFields: false,
        },

        listeners: {
            exception: function(proxy, response, operation, eOpts) {
                if(response.responseJson.Message){
                    this.showToast(response.responseJson.Message);
                }
            },
        },

        showToast: function(s) {     
            Ext.toast({
                html: s,
                closable: false,
                align: 't',
                slideDUration: 400,
                maxWidth: 400
            });
        },
    },
});

客户视图模型

Ext.define('CustomerViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.customer',
    deep : true,

    data: {
        userData : null,
    },

    stores :{
        customerStore :{
            type : 'customer'
        },
    },
});

客户总监

Ext.define('CustomerController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.customer',

    //
    showAddForm : function(){
        var form = Ext.ComponentQuery.query('AddCustomer')[0];
        if (!form) {
            form = Ext.create('VidlyApp.view.customer.AddCustomer');
        }
        if (form.isHidden()) {
            form.show();
        }
    },

    onAddCustomer : function(){
        var me = this;
        var viewmodel  = me.getViewModel();
        var store  = viewmodel.get('customerStore');
        store.add(viewmodel.data.userData);
        // store.insert( 0,viewmodel.data.userData);
        store.sync({
            success: function(response, request) {
                me.showToast("Account Successfully Created!");
                me.getView().destroy();
            },
            failure :function(response){
                store.rejectChanges();
                me.showToast("Operation Failed! Something went wrong!");
            }
        });
    },

    showToast: function(s) {
        Ext.toast({
            html: s,
            closable: false,
            align: 't',
            slideDUration: 400,
            maxWidth: 400
        });
    }

});

客户名单 - 查看

Ext.define('CustomerList', {
    extend: 'Ext.grid.Panel',
    xtype: 'customerlist',
    controller: 'customer',
    title: 'Customer',
    width : '99%',
    height: 700,
    border : 1,

    requires: [
        'VidlyApp.store.Customer',
        'Ext.grid.column.Action',
        'Ext.toolbar.Paging',
    ],

    viewModel: {
        type : 'customer',
    },

    bind : {
        store: '{customerStore}',
    },


    columns: [
        { xtype: 'rownumberer' },
        { text: 'id',  dataIndex: 'id' },
        { text: 'First Name',  dataIndex: 'first_name', flex : 1 },
        { text: 'Last Name',  dataIndex: 'last_name',  flex : 1},
        { text: 'Birthday',  dataIndex: 'birthday', formatter: 'date("m/d/Y")' },
        { text: 'Phone No.', dataIndex: 'phone_no',  flex : 1},
        { text: 'Email', dataIndex: 'email',  flex : 1},
        { text: 'Username', dataIndex: 'username',  flex : 1},
        { text: 'Password', dataIndex: 'password' },
        {
            text: 'Actions',
            xtype:'actioncolumn',
            width:100,
            items: [{
                icon: 'EditIcon.png',
                tooltip: 'Edit',
                handler : 'showEditForm'
            },{
                icon: 'deleteIcon,png',
                tooltip: 'Delete',
                handler : 'onDeleteCustomer'
            }]
        }
    ],
});

AddCustomer（模态窗口）- 查看

Ext.define('AddCustomer', {
    extend: 'Ext.window.Window',
    alias: 'widget.AddCustomer' ,
    controller : 'customer',
    title: 'Add Customer',
    autoDestroy: false,
    viewModel : 'customer',

    items: [
        {
            xtype : 'form',
            reference: 'form',
            layout : 'vbox',
            bodyPadding:20, 
            width:400,
            height:500,
            default :{
                width:400,
                height:500,
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                bind: '{userData.first_name}',
                allowBlank:false,
            }, {
                fieldLabel: 'Last Name',
                bind: '{userData.last_name}',
                allowBlank:false,
            }, {
                xtype: 'datefield',
                format: 'Y-m-d',
                fieldLabel: 'Birth Date',
                bind: '{userData.birthday}',
                maxValue: new Date(),
                allowBlank:false,
            }, {
                xtype: 'textfield',
                fieldLabel: 'Phone No',
                bind: '{userData.phone_no}',
                allowBlank:false,
            }, {
                fieldLabel: 'Email',
                bind: '{userData.email}',
                vtype: 'email',
                allowBlank:false,
            }, {
                fieldLabel: 'Username',
                bind: '{userData.username}',
                allowBlank:false,
            }, {
                fieldLabel: 'Password',
                bind: '{userData.password}',
                inputType : 'password',
                allowBlank:false,
            }, {
                fieldLabel: 'Confirm Password',
                bind: '{userData.confirm_password}',
                inputType : 'password',
                allowBlank:false,
            },
        ],

            buttons: [{
                text: 'Add',
                formBind: true,
                listeners: {
                    click : 'onAddCustomer'
                }
            }],
        }
    ],

    listeners:{
        close: 'close',
    },
});

请帮助我。 TIA.

使用模态窗口添加数据后自动加载网格。