如何在 EXTJS 网格中插入数据？答案

【问题标题】：How to insert data in EXTJS grid?如何在 EXTJS 网格中插入数据？
【发布时间】：2013-05-31 14:53:54
【问题描述】：

我有一个带有搜索文本框、搜索按钮和网格控件的 EXTJS 表单。一旦在搜索按钮单击事件上生成表单，我就会向 servlet 发布 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");    
});

【问题讨论】：

标签： java javascript servlets extjs

【解决方案1】：

Discalimer：在那之后我使用的是 EXTJS 2.x 版本。

根据您已经编写的内容，解决方案可能类似于

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

但是 AFAIK 这不是正确的方法
无需使用原始 XMLHTTPrequest，因为 Ext 为 ajax 提供了一个包装器，并且对于存储从远程源加载数据，您可以使用基于代理的存储

【讨论】：

任何人都可以发布一些正确的代码，其中 EXTJS 表单调用是按钮单击时的 servlet，然后将数据返回到 extjs 网格？

【解决方案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}
     ]
}

【讨论】：