如何在EXTJS網格中插入數據？

Question

我有一個搜索文本框，搜索按鈕和網格控件的EXTJS窗體。一旦在搜索按鈕單擊事件上生成了表單，我向AJAX請求發送一個AJAX請求到JSON數據，並且需要將它放入網格。如何在表單呈現後將數據放入網格中？我是這個編程的新手。示例代碼非常感謝。

Ext.onReady(function(){ 

    Ext.QuickTips.init(); 

    var xmlhttp = new getXMLObject(); 
    var result = null; 


    //Search 
    var searchNum = function(){   
     if(xmlhttp) { 
      var srItem = Ext.getCmp("srItem").getValue(); 

      xmlhttp.open("POST","searchServlet", true); 
      xmlhttp.onreadystatechange = 
       function(){ 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
         result = JSON.parse(xmlhttp.responseText); 
         // returns data in JSON Fromat[{column1:11, column2:11, column3:11}];      
        } 
      }; 

      //handleServerResponse; 
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
      xmlhttp.send("srItem=" + srItem.trim()); 
     }  
    }; 



    // MODEL  
    Ext.define('SearchGrid', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      {name:'column1'}, 
      {name: 'column2'}, 
      {name: 'column3'} 
     ] 
    }); 



    // create the data store 
    var store = Ext.create('Ext.data.JsonStore', { 
     model: 'SearchGrid', 
     data: result 
    }); 


    /*=========================================== 
    * Generate a Form 
    *=========================================== 
    */ 
    var search = Ext.create('Ext.form.Panel', { 
     frame:true, 
     title: 'Form', 
     bodyStyle:'padding:5px 5px 0', 
     width: 400, 
     fieldDefaults: { 
      msgTarget: 'side', 
      labelWidth: 100 
     }, 
     defaultType: 'textfield', 
     defaults: { 
      anchor: '80%' 
     }, 

     items: [{ 
      fieldLabel: 'Search Number', 
      name: 'srItem', 
      id: 'srItem', 
      allowBlank:false 
     }, 
     { 
      xtype: 'gridpanel', 
      store: store, 
      stateful: true, 
      title: 'My Grid Panel', 
      height: 200, 
      width: 400, 
      columns: [ 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'column1', 
        text: 'Column 1' 
       }, 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'column2', 
        text: 'Column 2'       
       }, 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'column3', 
        text: 'Column 3' 
       } 
      ], 
      viewConfig: { 
       stripeRows: true, 
       enableTextSelection: true 
      } 
     } 

     ], 

     buttons: [{ 
      text: 'Search', 
      handler: function(){ 
       if(search.getForm().isValid()){ 
        search(); 
       } 
      } 
     }] 
    }); 


    search.render("searchForm");  
}); 

Answer 1

Discalimer：我之前沒有使用過EXTJS 2.x版本。

有了你已經寫了什麼，該解決方案可以像

result = JSON.parse(xmlhttp.responseText); 
for (var i = 0; i < result.length; i++){ 
    store.add(result[i]); 
} 

但據我所知，這不是做正確的方式這
無需使用原始的XmlHttpRequest因爲分機提供包裝器ajax和存儲加載數據從您可以使用基於代理的店面

Answer 2

我不完全得到這背後的想法遠程來源：

//Search 
var searchNum = function(){   
    if(xmlhttp) { 
     var srItem = Ext.getCmp("srItem").getValue(); 

     xmlhttp.open("POST","searchServlet", true); 
     xmlhttp.onreadystatechange = 
      function(){ 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
        result = JSON.parse(xmlhttp.responseText); 
        // returns data in JSON Fromat[{column1:11, column2:11, column3:11}];      
       } 
     }; 

     //handleServerResponse; 
     xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     xmlhttp.send("srItem=" + srItem.trim()); 
    }  
}; 

你不能在商店中使用代理嗎？它會自動將數據重新加載到store.load（）中的網格上，並且您將能夠指定要添加到查詢中的代理參數。

var store = Ext.create('Ext.data.JsonStore', { 
    model: 'SearchGrid', 
    autoLoad: true, 
    proxy: { 
     type:'ajax', 
     method:'POST', 
     url:'searchServlet', 
     extraParams: { 
      param1: 'String to be sent in POST array with key name "param1"' 
     } 
    }, 
    reader: { 
     type:'json', 
     root:'data' 
    } 
}); 

的Json必須是這樣的：

{ 
    data: [ 
     {column1:11, column2:11, column3:11}, 
     {column1:22, column2:22, column3:22} 
    ] 
}