ボタンをクリックした後にExtJs：グリッドを表示

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に割り当てます。