Extjs4 用于更新条目的网格

Extjs4 用于更新条目的网格,extjs4,Extjs4,我执行了以下代码来列出网格中搜索的项目 Ext.onReady(function(){ var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); var searchUsers = new Ext.FormPanel({ renderTo: "searchUsers", frame: true,

我执行了以下代码来列出网格中搜索的项目

Ext.onReady(function(){
            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

            var searchUsers = new Ext.FormPanel({
                renderTo: "searchUsers",
                frame: true,            
                title: 'Search Users',
                bodyStyle: 'padding:5px',           
                width: 500,
                items:[{
                    xtype:'textfield',
                    fieldLabel: 'Username',
                    name: 'userName'            
                }],
                buttons:[
                        { 
                            text:'Search',
                            formBind: true,  
                            listeners: {
                                click: function(){
                                    Ext.Ajax.request({
                                        method:'GET',
                                        url : url+'/lochweb/loch/users/getUser',
                                        params : searchUsers.getForm().getValues(),
                                        success : function(response){
                                             console.log(response); //<--- the server response                           

                                             Ext.define('userList', {
                                                    extend: 'Ext.data.Model',
                                                    fields: [{ name: 'id', mapping: 'id' },
                                                             { name: 'name', mapping: 'name' },
                                                             { name: 'firstName' ,mapping:'personalInfo.firstName'},
                                                             { name: 'lastName' ,mapping:'personalInfo.lastName'}
                                                            ]
                                             });

                                             var store = Ext.create('Ext.data.Store', {
                                                    model: 'userList',
                                                    autoLoad: true,
                                                    proxy: {
                                                        type: 'ajax',
                                                        url : url+'/lochweb/loch/users/getUser',
                                                        reader: {
                                                            type: 'json',
                                                            root: 'Users'
                                                        }
                                                    }
                                             });

                                             var grid = Ext.create('Ext.grid.Panel', {
                                                    renderTo: "searchUsers",
                                                    plugins: [rowEditing],
                                                    width: 900,
                                                    height: 300,
                                                    frame: true,
                                                    title: 'Users',
                                                    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'
                                                        }
                                                    }]
                                                });
                                        }
                                    });
                                }
                            }
                    }
               ]

            });


            var win = new Ext.Window({
                layout:'fit',
                closable: false,
                resizable: true,
                plain: true,
                border: false,
                items: [searchUsers]
            });
            win.show();
        });
如何在搜索用户窗口中调整网格 在网格中添加一个图标,以便通过单击该图标可以从 必须将网格填充到条目表单以进行更新。
在您的代码中,我发现了一些东西:

对FormPanel和网格使用renderTo:searchUsers:将FormPanel添加到窗口中,因此此配置不应存在。请参阅renderTo文档。所以把它们去掉。 对FormPanel和网格都使用frame:true:在这里,窗口作为容器,因此窗体和网格已在内部设置框架。所以把它们去掉。 您可以在搜索时动态添加网格:我建议您将结果网格作为单独的组件创建,而不是在success的结果中,并将表单和网格指定为窗口项的组件。您仍然可以使用hidden配置网格。当Ajax成功时,您可以用返回的数据填充网格并显示它。 在网格中添加图标:您可以在网格的列中指定一个新列,并使用网格面板的渲染器配置来显示按钮。例如:

渲染器:functionv{ 回来 }


最后,您可以捕获网格的itemclick事件,以了解单击的单元格的列是否是包含按钮的单元格,条目将填充到您想要的位置。别忘了将网格的选择模型指定为cellmodel

嗨,我已经编辑了帖子,请查看一下