Question

我做了以下代码来列出网格中搜索到的项目。

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();
        });

如何在搜索用户窗口中安装网格
在网格中添加一个图标，以便通过单击该图标中的值来实现必须填充网格以进行更新。

Answer 1

这里有你的代码，我找到了一些东西：

对FormPanel和网格使用renderTo: "searchUsers"：您将FormPanel添加到窗口，因此该配置不应存在（请参阅renderTo文档）。所以删除它们。
对FormPanel和Grid使用frame: true：您将窗口作为容器，因此Form和Grid内部为framed。所以删除它们。
您在搜索时动态添加网格：我建议您将结果网格创建为单独的组件（不在成功结果中），并将窗体和网格指定为窗口的items组件。您仍然可以使用hidden配置网格。当Ajax成功时，您可以使用返回的数据填充网格并显示它。
“在网格中添加一个图标”：您可以在网格的columns中指定一个新列，并使用网格面板的renderer配置来显示该按钮。例如：

渲染器：function（v）{ 返回“＆lt; input type ='button'... /＆gt;”; }

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

用于更新条目的网格

1 个答案: