ExtJS4リロードグリッドパネルのボタンハンドラー

Question

私はExtJS4を使っていて、フォームを使って検索機能を構築しようとしています。フォームが表示され、ユーザーが4つの条件のいずれかを入力して[検索]をクリックすると、グリッドが作成され、JSON呼び出しの結果が表示されます。

私が達成しようとしているのは、ユーザーが別の検索条件を入力して再度検索をクリックし、グリッドを更新して新しい結果を表示できるようにすることです。私の最初の試みではグリッドは検索のクリックごとにレンダリングされ、2回目の試行では前のエントリを削除せずに検索の結果をグリッドにプッシュするだけです。

は、ここに私の現在の設定です：私は、グリッドをリフレッシュし、負荷を（）の呼び出しを試みた

Ext.define('job',{ 
     extend:'Ext.data.Model', 
     fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version'] 
}) 

Ext.onReady(function(){ 

    var formPanel = Ext.widget('form', { 
     renderTo: 'search', 
     frame: true, 
     width: 350, 
     bodyPadding: 5, 
     bodyBorder: false, 
     title: 'Search', 

     defaults: { 
      anchor: '100%' 
     }, 
     { 
      xtype: 'combo', 
      name: 'jobyear', 
      fieldLabel: 'Job Year', 
      store: 
       new Ext.data.SimpleStore({ 
        fields: ['year'], 
        data: [ 
         ['2008'],['2009'],['2010'],['2011'],['2012'] 
        ] //end of data 
      }), 
      displayField: 'year', 
      typeAhead: true, 
      emptyText: 'Select a year' 
     }], //end of items 

     dockedItems: [{ 
      xtype: 'container', 
      dock: 'bottom', 
      layout: { 
       type: 'hbox', 
       align: 'middle' 
      }, 
      padding: '10 10 5', 

      items: [{ 
       xtype: 'component', 
       id: 'formErrorState', 
       baseCls: 'form-error-state', 
       flex: 1 
      }, { 
       xtype: 'button', 
       formBind: true, 
       id: 'search', 
       disabled: true, 
       text: 'Search', 
       width: 140, 
       height: 35, 
       handler: function() { 
        var columns = [ 
        {xtype: 'rownumberer',sortable: true}, 
        {text: 'School Name', sortable:true,dataIndex:'account_name'}, 
        {text: 'Acct Number', sortable:true,dataIndex:'account_number'}, 
        {text: 'Job Number',sortable:true,dataIndex:'job_number'}, 
        {text: 'Version',sortable:true,dataIndex:'version'}, 
        {text: 'Contract Year',sortable:true,dataIndex:'contract_year'}, 
        {text: 'Program', sortable:true,dataIndex:'program'}, 
        {text: 'Job Type', sortable:true,dataIndex:'type'} 
        ]; // end columns 

        var userGrid = new Ext.grid.Panel({ 
        id: 'FOO', 
        multiSelect:true, 
        store: store, 
        columns: columns, 
        stripeRows: true, 
        title: 'Results', 
        renderTo: Ext.get('results'), 
        dockedItems: [{ 
         xtype: 'pagingtoolbar', 
         store: store, 
         dock: 'bottom', 
         displayInfo: true 
        }], 
        }) 
        var form = this.up('form').getForm(); 
        var store = new Ext.data.Store({ 
         model: 'job', 
         pageSize: 10, 
         autoLoad: true, 
         remoteSort:true, 
         proxy: { 
          actionMethods: { 
           read: 'POST' 
          }, 
          type: 'ajax', 
          fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'], 
          url: '/search?'+ form.getValues(true), 
          reader:{ 
           type: 'json', 
           root: 'results', 
           totalProperty: 'totalCount'}, 
         }, //end proxy 
         sorters:[{ 
          property:'version', 
          direction:'ASC' 
         }] 
        }).on('load', function(){ 
         userGrid.reconfigure(this); // ??? 
         }); 
      } // end button handler 
     }] //end items 
    }] // end dockeditems 

}); 
}); 

が、私は右の組み合わせでまだヒットしてきたとは思いません。グリッドの内容を、/ searchへの最新のajax呼び出しからのものに置き換えてください。

Answer 1

各検索ボタンクリックに新しいパネルとストアを作成しないでください。ボタンハンドラから移動してください。ユーザーが検索ボタンを押すと、グリッドのストアでload（{params：{search： 'whatever'}}）を呼び出すだけで、自動的にグリッドに新しいデータが設定されます。グリッドを再設定する必要はありません。基本的にグリッドはストアにバインドされ、ストアデータが変更されると、グリッドの背後のビューが自動的に更新されます。

Answer 2

ドミトリーBのアドバイスの一部を参考にして解決しました。私はこのコードを継承し、いくつかのマッサージの後、私はそれが意図したとおりに動作するようにしました。以下は私の最終的な解決策です。ボタンのハンドラー関数では、store.load（）を呼び出すときに正しいように、ストアで定義されているプロキシのURLを確認して更新する必要があります。

Ext.require([ 
    'Ext.form.*', 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.dd.*' 
    //'extjs.SlidingPager' 
]); 

    /*Setup Data Model*/ 
    Ext.define('job',{ 
     extend:'Ext.data.Model', 
     fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version'] 
}) 


Ext.onReady(function(){ 

    var formPanel = new Ext.widget('form', { 
     renderTo: 'search', 
     frame: true, 
     width: 350, 
     bodyPadding: 5, 
     bodyBorder: false, 
     title: 'Search', 

     defaults: { 
      anchor: '100%' 
     }, 

     fieldDefaults: { 
      labelAlign: 'left', 
      msgTarget: 'none' 
     }, 

     items: [{ 
      xtype: 'textfield', 
      name: 'jobnumber', 
      fieldLabel: 'Job Number', 
      allowBlank: true, 
      minLength: 7, 
      maxLength: 7 
     }, { 
      xtype: 'textfield', 
      name: 'accountnumber', 
      fieldLabel: 'Account Number', 
      allowBlank: true, 
      minLength: 6, 
      maxLength: 7 
     }, { 
      xtype: 'textfield', 
      name: 'customername', 
      fieldLabel: 'Customer Name', 
      allowBlank: true, 
     }, { 
      xtype: 'combo', 
      name: 'jobyear', 
      fieldLabel: 'Job Year', 
      store: 
       new Ext.data.SimpleStore({ 
        fields: ['year'], 
        data: [ 
         ['2008'],['2009'],['2010'],['2011'],['2012'] 
        ] //end of data 
      }), 
      displayField: 'year', 
      typeAhead: true, 
      emptyText: 'Select a year' 
     }], //end of items 

     dockedItems: [{ 
      xtype: 'container', 
      dock: 'bottom', 
      layout: { 
       type: 'hbox', 
       align: 'middle' 
      }, 
      padding: '10 10 5', 

      items: [{ 
       xtype: 'button', 
       formBind: true, 
       id: 'search', 
       disabled: true, 
       text: 'Search', 
       width: 140, 
       height: 35, 
       handler: function() { 
        store.proxy.url = '/search?' + formPanel.getForm().getValues(true) 
        store.load(); 
       } // end button handler 
      }] //end items 
     }] // end dockeditems 
    }); 

    var store = new Ext.data.Store({ 
     model:'job', 
     pageSize:10, 
     autoLoad: false, 
     remoteSort:true, 
     proxy:{ 
      type:'ajax', 
      fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'], 
      url: '', 
      reader:{ 
       totalProperty:'totalCount', 
       type: 'json', 
       root: 'results' 
      }, 
      actionMethods: 'POST' 
     }, 
     sorters:[{ 
      property:'version', 
      direction:'ASC' 
     }] 
    }); 

    var columns = [ 
     {xtype: 'rownumberer',sortable: true}, 
     {text: 'School Name', sortable:true,dataIndex:'account_name'}, 
     {text: 'Acct Number', sortable:true,dataIndex:'account_number'}, 
     {text: 'Job Number',sortable:true,dataIndex:'job_number'}, 
     {text: 'Version',sortable:true,dataIndex:'version'}, 
     {text: 'Contract Year',sortable:true,dataIndex:'contract_year'}, 
     {text: 'Program', sortable:true,dataIndex:'program'}, 
     {text: 'Job Type', sortable:true,dataIndex:'type'} 
    ]; // end columns 

    var userGrid = new Ext.grid.Panel({ 
     id: 'userGrid', 
     multiSelect: false, 
     store: store, 
     columns: columns, 
     stripeRows: true, 
     title: 'Results', 
     renderTo: 'results', 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      store: store, 
      dock: 'bottom', 
      displayInfo: true 
     }], 
    }) 
});