从JSONObject创建ext-js网格

Question

我是extjs的新手，我尝试使用servlet发送的JSONObject中的ext js创建网格。

这是我的客户端代码：（假设已发送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个String，一旦我点击“ submit”，我就将其放入extjs网格中

这是我的ext-js代码：（至少是mos重要部分）

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");                           
                    }
                }
                ); 
            }
        }]
    });

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

你能帮助我吗 ？

Answer 1

嗨，我建议您创建一个网格和相应的商店，然后在获得成功后，使用数据加载商店并显示网格。 下面是一个非常简单的示例，其中我以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();
}

希望对您有帮助。