如何更新表单ExtJs Grid

Question

我有以下情况，

1. 用户输入表单，用于输入用户。
2. SearchUser 使用网格和编辑选项更新用户值。当我点击网格中的编辑图标时，页面应重定向到用户输入表单，其中填写了表单中的值以供更新。

SearchUser

var searchUsers = new Ext.FormPanel({
                renderTo: "searchUsers",
                frame: true,            
                title: 'Search Users',
                bodyStyle: 'padding:5px',           
                width: 900,
                items:[{
                    xtype:'textfield',
                    fieldLabel: 'Username',
                    name: 'userName'            
                },{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'firstName'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'lastName'
                },
                {
                    xtype: 'button',
                    text: 'Search',
                    listeners: {
                        click: function(){
                            Ext.Ajax.request({
                                method:'GET',
                                url : url+'/lochweb/loch/users/getUser',
                                params : searchUsers.getForm().getValues(),
                                success : function(response){
                                    //console.log(response);
                                    //swapStrore();
                                }
                            });
                        }                       
                    }
                },{
                    xtype: 'button',
                    text: 'Cancel',
                    listeners: {
                        click: function(){
                             window.location = url+'/lochportal/viewSuccessForm.do';
                        }                       
                    }
                },              
                grid = Ext.create('Ext.grid.Panel', {                   
                        //plugins: [rowEditing],
                        width: 900,
                        height: 300,
                        frame: true,                        
                        store: store,
                        iconCls: 'icon-user',
                        columns: [{
                            text: 'ID',
                            width: 40,
                            sortable: true,
                            dataIndex: 'id'
                        }, 
                        {
                            text: 'Name',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'name',
                            field: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            text: 'FirstName',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'firstName',
                            field: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            text: 'LastName',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'lastName',
                            field: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            text: 'Gender',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'gender',
                            field: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            text: 'Email',
                            flex: 1,
                            sortable: true,
                            dataIndex: 'email',
                            field: {
                                xtype: 'textfield'
                            }
                        },
                        {
                             xtype: 'actioncolumn',
                             width: 100,
                             items:[{
                                    icon   : '/lochportal/extJS/resources/themes/images/access/window/edit.gif',  // Use a URL in the icon config
                                    tooltip: 'Sell stock',
                                    handler: function(grid, rowIndex, colIndex) {
                                        var rec = store.getAt(rowIndex);
                                        //alert("Sell " + rec.get('id'));
                                        updateUsers(rec.get('id'));
                                    }
                                }]

                        }]
                    })]     
            });

CREATEUSER

var userForm = new Ext.FormPanel({      
        renderTo: "userCreation",
        frame: true,
        title: 'Create New User',
        bodyStyle: 'padding:5px',           
            width: 500,
        items: [{
                xtype: 'textfield',
                fieldLabel: 'UserName',
                name: 'userName',
                allowBlank:false
                }{
                xtype:'combo',
                fieldLabel: 'Role',
                name: "role",
                id: "role",
                    queryMode:'local',
                store:role,
                displayField: 'rolename',
                valueField: 'id',            
                emptyText: "Select",
                editable: false,
                allowBlank:false
                    },{
                xtype: 'textfield',
                fieldLabel: 'FirstName',
                name: 'firstName',
                vtype : 'alpha',
                allowBlank:false
                },{
                xtype: 'textfield',
                fieldLabel: 'MiddleName',
                name: 'middleName',
                vtype : 'alpha'             
                },{
                xtype: 'textfield',
                fieldLabel: 'LastName',
                name: 'lastName',
                vtype : 'alpha'
                },{
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email',
                allowBlank:false
                }
    });

Answer 1

您应该首先阅读Sencha指南到他们的MVC架构：http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

ExtJs应用程序通常只有一个页面，所有导航都在内部完成而不更改位置地址。