0

我在这里粘贴我更新的代码。请看一下，让我知道我在这里犯了什么错误。在表单本身中，我也显示了grid。

因此，当我单击要编辑的记录时，我需要填充可以编辑相应记录详细信息并更新到 DB 的表单。

var grid = new Ext.grid.GridPanel({
    frame: true,
    store: store,
    selModel: sm,
    enableHdMenu: false,
    stripeRows: true,
    autoScroll: true,
    trackMouseOver: true,
    disableSelection: false,
    loadMask: true,
    enableColumnMove: false,
    height: 350,
    width: 960,
    title: 'Edit Contractor Details',

    columns: [{
            header: "Requestor Name",
            width: 75,
            sortable: true,
            dataIndex: 'requestorname'
        }, {
            header: "Start Date",
            width: 85,
            sortable: true,
            xtype: 'datecolumn',
            dataIndex: 'startdate',
            dateFormat: 'n/j/Y'
        }, {
            header: "Supervisor",
            width: 75,
            sortable: true,
            dataIndex: 'supervisor'
        }, {
            header: "Company",
            width: 100,
            sortable: true,
            dataIndex: 'company'
        }, {
            header: "Last Name",
            width: 75,
            sortable: true,
            dataIndex: 'lastname'
        }, {
            header: "First Name",
            width: 75,
            sortable: true,
            dataIndex: 'firstname'
        },
        sm
    ],

    tbar: [{
        iconCls: 'contractor-add',
        text: 'Edit Employee',
        handler: function(grid, rowIndex, colIndex) {
            alert("test");
            var editWindow = new Ext.Window({
                id: 'id_editWindow',
                title: 'Edit',
                closable: true,
                width: 750,
                height: 380,
                plain: true,
                layout: 'fit',
                items: simple,
                listeners: {
                    show: function EditUser(rec) {
                        var formpanel = Ext.getCmp('formPanel');
                        formpanel.getForm().loadRecord(rec);
                    }
                }
            });
            editWindow.show();

        }
    }],

    // customize view config
    viewConfig: {
        forceFit: true,
        enableRowBody: true,
        showPreview: true,
        getRowClass: function(record, Index) {}
    },
    // paging bar on the bottom
    bbar: new Ext.PagingToolbar({
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying Records {0} - {1} of {2}',
        emptyMsg: "No cases to display"
    })
});

//Form Creation
var simple = new Ext.form.FormPanel({
    standardSubmit: true,
    frame: true,
    xtype: 'form',
    // id: 'tabForm',
    id: 'formPanel',
    bodyPadding: 5,
    width: 1000,
    border: false,
    bodyBorder: false,
    fieldDefaults: {
        labelWidth: 75,
        msgTarget: 'side'
    },
    items: {
        xtype: 'tabpanel',
        id: 'tabpanel',
        activeTab: 0,
        defaults: {
            bodyPadding: 10,
            layout: 'anchor'
        },

        items: [{
            title: 'New Contractor Details',
            defaultType: 'textfield',
            defaults: {
                anchor: '100%'
            },

            items: [{
                //Requestor Info

                xtype: 'fieldset',
                title: 'Requestor Details',
                defaults: {
                    width: 150
                },
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 300
                },
                defaultType: 'textfield',
                layout: 'column',
                labelWidth: 150,
                defaults: {
                    anchor: '100%'
                },
                items: [{ // column #1
                    xtype: 'container',
                    columnWidth: .5,
                    layout: 'form',
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Requestor Name',
                        afterLabelTextTpl: required,
                        labelStyle: 'color:#000000',
                        name: 'requestorname',
                        id: 'requestorname',
                        //hasfocus:true,
                        anchor: '80%',
                        allowBlank: false,
                        listeners: {
                            afterrender: function(field) {
                                field.focus(false, 1000);
                            }
                        }
                    }, {
                        title: 'Manage Contractor Details',
                        // renderTo: bd,

                        // activeTab: 0,     // first tab initially active
                        defaults: {
                            bodyPadding: 10
                        },
                        items: [grid]
                    }]
                }],

                buttons: [{
                    text: 'Submit',
                    formBind: true,
                    handler: function() {
                        var requestorname = Ext.getCmp('requestorname').getValue();
                        var form = Ext.getCmp('formPanel').getForm();

                        if (form.isValid()) {
                            //alert('Tests');
                            Ext.Ajax.request({
                                url: 'NewHireDetailsInsertion?firstname=' + firstname + '&' + 'middlename=' + middlename + '&' + 'lastname=' + lastname +
                                    '&' + 'suffix=' + suffix + '&' + 'company=' + company + '&' + 'requestorname=' + requestorname + '&'...so on...
                                    method: 'POST',
                                submitEmptyText: false
                            });
                            simple.getForm().getEl().dom.action = 'NewHireDetailsInsertion';
                            //Ext.Msg.maxWidth =2000;
                            Ext.Msg.alert('Message', "New Hire information Submitted");
                            simple.getForm().reset();
                        } else {
                            Ext.Msg.alert('Message', "Please enter all required fields");
                        }
                    }
                }, {
                    text: 'Reset',
                    handler: function() {
                        simple.getForm().reset();
                    }
                }]
            }]
        }]
    });
});
simple.render('mydiv');
4

1 回答 1

1

您本可以提供更多示例代码，并确保您提供的代码格式正确......因此，如果我了解您想要实现的目标，我提供的示例应该会引导您朝着正确的方向前进.

将逻辑放入您的视图中非常混乱，这就是我看到您在提供的代码中所做的事情。ExtJS MVC 中控制器的作用是观察视图（或其他控制器！）触发的事件并做出相应的反应。

您可以通过refs在 Controller 上为常用组件建立引用 ( ) 来节省大量时间和头疼的问题。在您的场景中，您的 Grid 和 Window 都可以作为参考。

查看控制器文档以更全面地解释ref功能以及控制器的control功能：http ://docs.sencha.com/extjs/4.1.3/#!/api/Ext.app.Controller

Ext.define('My.controller.Grid', {
    extend: 'Ext.app.Controller',
    /** List required views, models, stores here */
    refs: [
      {
         name: 'grid',
         selector: '',
         xtype: 'my-grid' // Defined in the Grid's config i.e., alias: 'widget.my-grid'
      },{
         name: 'editWindow',
         selector: '',
         xtype: 'my-edit-window',
         autoCreate: true // Automatically create this if it isn't already created
      }     
    ],

    init:function(app){

        /** Observe your Views by their itemId or any valid ComponentQuery selector */
        '#my-grid-panel': {
             itemdblclick: { fn: this.onGridRecordDoubleClick, scope: this }
        },
        '#my-edit-window': {
             afterrender: { fn: this.editWindowDidRender, scope: this },
                   close: { fn: this.onWindowClose, scope: this }
        }
    },

    onGridRecordDoubleClick: function(grid, record, element, index, event){
           /** save a reference to the selected record on the controller instance */
           this.selectedRecord = record;

           /** Show the 'Edit' Window if possible */
           if(!this.activeWindow)
                this.getEditWindow(); // Magic method created by Controller Reference
    },

    editWindowDidRender: function(view){
          /** Get the Form by its itemId */
          var myForm = view.down('#my-form');

          /** Load the selected record into the form */
          myForm.loadRecord(this.selectedRecord);

          /** Save a reference to the window, why not? */
          this.activeWindow = view;
    },

    onWindowClose: function(){
          /** remove the reference to the window and selected record */
          this.activeWindow = undefined;
          this.selectedRecord = undefined;

          /** Clear selection on the grid */
          this.getGrid().getSelectionModel().clearSelections();
          this.getGrid().reconfigure();
    }
});
于 2013-06-28T16:58:34.290 回答