extjs 读取数据并显示在页面同时添加修改功能

1、customer。js   //model类js文件

Ext.define('RCP.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'cusId',
            type: 'string'
        }
        {
            name :'mobile',
            type:'string'
        },
        {
            name:'name',
            type:'string'
        }

    ]
});

2、customerListjs  ：数据和工具条的显示

Ext.define('RCP.view.customer.CustomerList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customerList',

    padding: 5,
    autoScroll: true,
    title: '客户信息',
    emptyText: '客户信息',

    initComponent: function () {
        var me = this;

        var store = Ext.create('Ext.data.Store', {  //store数据存储与交互
            model: 'RCP.model.Customer',//model对象
            proxy: {
                type: 'ajax',
                url: 'customer/ListAction.action',
                reader: {
                    type: 'json',
                    root: 'customerList',//与后台交互的数据,action定义全局变量customerList并提供getset方法即可

                    successProperty: 'success'
                }
            },

            autoLoad: true
        });

        this.columns = [//数据的列名
            {
                header: 'cusId',    
                dataIndex: 'cusId',//不显示 编辑时通过id传值
                hidden:true,
                flex: 1
            },
            {
                header: '姓名',
                dataIndex: 'name',
                flex: 1
            },
            {
                header:'电话',
                dataIndex:'mobile',
                flex:1
            }
            

        ];

        this.store = store;



        var refreshAction = Ext.create('Ext.Action', { //刷新页面功能
            text: '刷新',
            handler: function () {
                store.reload();
            }
        });

        //---------------------修改功能开始--------------------
        var editAction=Ext.create('Ext.Action',{
            text:'编辑',
            handler:function(){
                var record = me.getSelectionModel().getSelection()[0];
                if(record){
                    showEditInvitation(record);
                }
            }
        });
        function showEditInvitation(record) {

            //调用alias名为customerEditWindow的view
            var view = Ext.widget('customerEditWindow', {
                cusId: record.get('cusId')//参数            });            view.on("close", function () {//关闭按钮                if (view.ok)                    store.reload();            });        }

        //------------------------------修改功能结束------------------------------------------
        this.dockedItems = [
            {
                dock: 'top',
                xtype: 'toolbar',
                items: [
                    refreshAction,editAction    //将上面的2个对象添加到工具条dockedItems
                ]
            }
        ];


        this.callParent(arguments);//调用方法initComponent必须调用这个
    }
});
3、EditWindow.js：定义弹出的window

Ext.define('RCP.view.customer.EditWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.customerEditWindow',
    title: '修改客户信息',
    layout: 'fit',
    resizable: false,
    autoShow: true,
    modal: true,

    width: 600,

    initComponent: function () {
        var thisWindow = this;

        //创建Edit
        var invForm = Ext.create('RCP.view.customer.Edit');
        invForm.getForm().load({
            url: 'customer/getOneAction.action',   //读取点击那一行的数据
            method: 'GET',
            waitMsg: 'Loading...',
            params: {
                cusId: this.cusId   //点击行的id，传到后台
            }
        })

        this.items = [  //window的控件按钮
            {
                xtype: 'form',
                bodyPadding: 5,
                border: false,
                fieldDefaults: {
                    labelAlign: 'left',
                    msgTarget: 'side'
                },
                defaults: {
                    anchor: '100%'  //填满
                },

                items: [
                    {
                        items: [invForm]
                    }
                ],
                buttons: [
                    {
                        text: '修改',
                        disabled: true,
                        formBind: true,
                        id: this.ids,
                        handler: function () {
                            var form = this.up('form').getForm();
                            form.submit({
                                method: 'POST',
                                clientValidation: true,
                                url: 'customer/updateAction.action',
                                params: {//传递到后台的参数
                                    cusId:this.cusId,
                                    mobile:invForm.getForm().findField('mobile').getValue(),
                                    name: invForm.getForm().findField('name').getValue()
                                },
                                success: function (form, action) {
                                    if(action.result.success==true){
                                        Ext.MessageBox.alert('系统', action.result.message);
                                        thisWindow.ok = true;
                                        thisWindow.close();
                                    }else{
                                        Ext.MessageBox.alert('系统', '修改失败！');
                                    }
                                }
                            });
                        }
                    },
                    {
                        text: '取消',
                        handler: function () {
                            thisWindow.close();
                        }
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});
4、Edit.js:在上面创建的window里的内容显示
Ext.define('RCP.view.customer.Edit', {
    extend: 'Ext.form.Panel',
    alias: 'widget.customerEdit',
    bodyPadding: 5,
    border: false,



    reader: new Ext.data.JsonReader({
        model: 'RCP.model.Customer',
        record: 'customer',           //与后台交互的数据 在后台定义全局变量customer并提供getset方法
        successProperty: '@success'
    }),

    initComponent: function () {

        this.items = [
            {
                xtype: 'form',
                border: false,
                bodyPadding: 10,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%'
                },

                items: [
                    {
                        hidden: true,
                        fieldLabel: 'cusId',
                        name: 'cusId'
                    },
                    {
                        allowBlank: false,
                        fieldLabel: '客户姓名',
                        name: 'name',
                        emptyText: '输入客户姓名',
                        blankText   : "不能为空"
                    },
                    {

                        allowBlank: false,
                        fieldLabel: '客户电话',
                        name: 'mobile',
                        emptyText: '输入电话号',
                        regex : /^[0-9]\d{10}$/,
                        regexText : '输入正确的电话号',
                        blankText   : "不能为空"
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});
5、model和view添加到controller里，就实现了显示和编辑功能