Javascript 从JSONObject创建ExtJS网格

我是extjs新手，我尝试从servlet发送的JSONObject使用extjs创建网格

下面是我的客户端代码：假设发送了JSONObject

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
    response.setContentType("text/html");
    String nameSent = request.getParameter("name"); 
    String dobSent = request.getParameter("dob"); 
    String addrSent = request.getParameter("addr");
    System.out.println("Name : " +nameSent+ " - Dob : " +dobSent+ " - Addr : " +addrSent);

    JSONObject toSendBack = new JSONObject(); 
    toSendBack.put("nameSent", nameSent); 
    toSendBack.put("dobSent", dobSent); 
    toSendBack.put("addrSent", addrSent); 
    toSendBack.put("success",true);
    response.getWriter().print(toSendBack.toString());
    response.setStatus(HttpServletResponse.SC_OK);
}

所以，我有3个字符串，只要单击submit，我就会将其放入extjs网格中

下面是我的ExtJS代码：至少是最重要的部分

var form = Ext.create('Ext.form.Panel', {
        renderTo : 'form', 
        frame : true, 
        title : 'Subscription', 
        width : 250, 
        url : 'TestServlet', 
        method : 'POST', 

        fieldDefaults : {
            labelAlign : 'left', 
            labelWidth : 90, 
            anchor : '100%'
        },

        items : [{
            xtype : 'textfield', 
            fieldLabel : 'Name ', 
            name : 'name',
            allowBlank : false
        }, {
            xtype : 'datefield', 
            fieldLabel : 'Dob ', 
            name : 'dob'
        }, {
            xtype : 'textfield', 
            fieldLabel : 'Address ', 
            name : 'addr'
        }, {
            xtype : 'radiogroup', 
            columns : 1, 
            fieldLabel : 'Gender ',
            name : 'gender', 
            items : [{
                name : 'male',
                boxLabel : 'Male', 
                inputValue : 'male'
            }, {
                name : 'female', 
                boxLabel : 'Female',
                inputValue : 'female'
            }]
        }, {
            xtype : 'button', 
            text : 'Submit', 
            handler : function(){
                var dataToSend = this.up('form').getForm(); 
                dataToSend.submit(
                {
                    success:function(form,action)
                    {
                        alert("success");
                        var result=Ext.JSON.decode(action.response.responseText);
                        resultPanel.items.items[0].setValue(result.nameSent);
                    },
                    failure:function(form,action)
                    {
                        alert("failure");                           
                    }
                }
                ); 
            }
        }]
    });

问题是：我不知道如何创建网格，以及如何定义网格的模型

---

你能帮我吗

您好，我建议您创建一个网格和相应的存储区，然后在成功加载存储区的数据并显示网格。 下面是一个非常简单的示例，其中我以json的形式从java层获取系统属性 下面是json

{"OSArchitectire":"amd64","OSVersion":"6.1","JVMVersion":"1.7.0_51","JVMVendor":"Oracle Corporation","OSName":"Windows 7","JVMVendorURL":"http://java.oracle.com/"} 

我正在以以下方式映射存储

 success: function(response){

      var store =     Ext.create('Ext.data.Store', {
                            fields: ['JVMVendor', 'JVMVersion', 'OSName'],
                            proxy: {
                                type: 'memory',
                                reader: {
                                    type: 'json'
                                }
                            }
                        }); 

                        store.loadRawData(Ext.decode(response.responseText));
                        var grid=  Ext.create('Ext.grid.Panel', {
                                title: 'Simpsons',
                                floating: true,
                                id:'gridStore',
                                store: store,
                                columns: [{
                                    header: 'Name',
                                    dataIndex: 'JVMVendor'
                                }, {
                                    header: 'Version',
                                    dataIndex: 'JVMVersion',
                                    flex: 1
                                }, {
                                    header: 'OsName',
                                    dataIndex: 'OSName'
                                }],
                                height: 200,
                                width: 400,
                            });

                        grid.show();
}

---

希望对您有所帮助。

谢谢！现在我有了一个网格，但是我不能用我收到的数据填充它。为了获得正确的JSONPart，我必须在dataIndex中添加什么？我的JSon是这样的：{dobSent:07/08/2014，success:true，addrSent:sdf，nameSent:namename}将您的数据索引映射到JSon键。像dobSent，addrSent，nameSent。您的列看起来像{header:'Address Sent'，dataIndex:'addrSent'，flex:1}。希望对您有所帮助。@sree这对我不起作用。.我得到以下错误：Uncaught TypeError:无法调用undefined的方法'loadRawData'。。你能帮我吗？@user3604227你检查过你是否得到加载存储的json响应吗？@Sreek521我得到了json响应，但是当我通过填写表单并提交来添加一些新数据时，网格没有显示已添加的新记录。现在，在onSubmitSuccess方法中，我有这个.getBookStore.sync并同时加载这两个..但它不起作用。。