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

àì夳堔傛蜴生んèń 2022-08-08 05:27 144阅读 0赞

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里，就实现了显示和编辑功能