0

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

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();
        });
  1. 如何在“搜索用户”窗口内调整网格
  2. 在网格中添加一个图标，以便通过单击该图标，必须将网格中的值填充到输入表单以进行更新。在此处输入图像描述
4

1 回答 1

0

在您的代码中，我发现了一些东西：

  • 用于renderTo: "searchUsers"FormPanel 和 Grid：您将 FormPanel 添加到窗口，因此此配置不应该存在（请参阅renderTo文档）。所以删除它们。
  • 用于frame: trueFormPanel 和 Grid：您将窗口作为容器，因此 Form 和 Grid 一直在framed里面。所以删除它们。
  • 您在搜索时动态添加 Grid：我建议您将结果 Grid 创建为单独的组件（不在成功的结果内），并将 Form 和 Grid 指定items为 window 的 ' 组件。您仍然可以使用hidden. 当 Ajax 成功时，您可以用返回的数据填充 Grid 并显示它。

  • “在网格中添加一个图标”：您可以在网格中指定一个新列，columns并使用renderer网格面板的配置来显示按钮。例如：

    渲染器：function(v) { return "<input type='button'.../>"; }

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

于 2012-05-04T16:02:20.593 回答