Блог

Я новичок в extjs и пытаюсь создать сетку, используя ext js, из JSONObject, отправленного сервлетом.

Вот мой код на стороне клиента: (предполагая, что 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 строки, которые я хотел бы поместить в сетку extjs, как только я нажму «отправить»

Вот мой код ext-js: (по крайней мере, самая важная часть)

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

Вопрос в том, что я не знаю, как создать сетку и модель для ее определения.

Вы можете мне помочь?

Привет, я предлагаю вам создать сетку и соответствующее хранилище, а позже, как только вы добьетесь успеха, загрузите хранилище с данными и покажите сетку. Ниже приведен очень простой пример, в котором я получаю системные свойства из java layer в виде json Ниже приведен 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();
}
  

Надеюсь, это поможет вам.