Question

我有一个表单，一旦显示表单就会填充网格的值。但是我需要在根据文本框值单击按钮后填充网格。

ExtJs的：

var url = location.href.substring(0,location.href.indexOf('/', 14));        
        var grid;
        var store;
        var userStore;
        Ext.onReady(function(){
            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

            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'},
                         { name: 'gender' ,mapping:'personalInfo.gender'},
                         { name: 'email' ,mapping:'personalInfo.address.email'}
                        ]
             });

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

            function swapStrore(){
                 //userStore = store;                
                 userStore = Ext.create('Ext.data.Store', {
                        model: 'userList',
                        autoLoad: true,
                        proxy: {
                            type: 'ajax',
                            url : url+'/lochweb/loch/users/getUser',
                            reader: {
                                type: 'json',
                                root: 'Users'
                            }
                        }
                    });
                 Ext.getCmp('userGrid').getView().refresh();
                 return userStore;
            }

            function updateUsers(id){
                 window.location = url+'/lochportal/createUser.do';
            }

            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],
                        id:'userGrid',
                        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: 50,
                             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'));
                                    }
                                }]

                        }]
                    })]     
            });


            var win = new Ext.Window({
                layout:'fit',
                closable: false,
                resizable: true,
                plain: true,
                border: false,
                items: [searchUsers]
            });
            win.show();
        });

如何在点击搜索按钮后填充网格？

由于

Answer 1

使用网格的bindStore()方法将新的或不同的商店分配给已经显示的网格。如果您想首先显示一个空网格 - 要么过滤掉所有记录，要么最初将store属性分配给null。

ExtJs：单击按钮后显示网格

1 个答案: