Question

我有一个网格面板如下。

var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex,
            colIndex, store) {
        var refColor = record.data.tourTypeColor;
        //console.log(record);
        metaData.attr = 'style="background-color:' + refColor + ';"';
        return record.get('locationName');
    }
}, {
    xtype : 'actioncolumn',
    header : "GPS",
    items : [ {
        icon : 'images/gps.jpg',
        tooltop : 'Get GPS',
        handler : function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Edit " + rec.get('locationName'));
            mapWin.show();
        }
    } ]
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
}, {
    header : "",
    sortable : true,
    dataIndex : 'colorCode',
    width : 30
} ]),

sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
listeners: {
    rowclick: function(grid, idx){
        Ext.getCmp('btnHold').enable();
    }
}
//renderTo : document.body
});

这是我计划的网店。

var plannedGridStore = new Ext.data.JsonStore({
fields: ['locationName', 'estimatedTime', 'city', 'type', 'tourTypeColor'],
data: [],
autoLoad: true
});

我发送了一个Ajax请求。

if (status) {
                        alert("true");
                        Ext.Ajax.request({
                              method: 'GET',
                              loadMask: true,
                              scope: this,
                              url: "http://" + host + "/" + projectName + "/"
                                    + "GetTourDetails",
                              success: function (response, request) {
                                Ext.MessageBox.alert('success', response.responseText);
                                var jsonData = Ext.util.JSON.decode(response.responseText);  
                                console.log(jsonData);
                                if (jsonData.tourDetails.length > 0) {
                                    //plannedGrid.getStore().add(records);
                                    plannedGrid.getStore().loadData(jsonData);
                                }
                                Ext.Msg.show({
                                      title: 'Success',
                                      msg: 'success GetTourDetails',
                                      buttons: Ext.MessageBox.OK,
                                      icon: Ext.MessageBox.INFO
                                });

                              },
                              failure: function (response, request) {
                                Ext.MessageBox.alert('failure', response.responseText);
                                Ext.Msg.show({
                                      title: 'Error',
                                      msg: 'error GetTourDetails',
                                      buttons: Ext.MessageBox.OK,
                                      icon: Ext.MessageBox.ERROR
                                });
                              },
                              params : {
                                headerCode : Ext.getCmp('idTourCode').getValue(),
                              }
                         });
                    }

我的GetTourDetails.java servlet看起来：

//imports
 public class GetTourDetails extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public GetTourDetails() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
 *      response)
 */
protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    processRequest(request, response);
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 *      response)
 */
protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    processRequest(request, response);
}

protected void processRequest(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();

    ServletContext context = getServletContext();

    String dbName = context.getInitParameter("ConnectionDB");
    String connectionHost = context.getInitParameter("ConnectionHost");
    String connectionUser = context.getInitParameter("ConnectionUser");
    String connectionPassword = context
            .getInitParameter("ConnectionPassword");
    String port = "5433";

    Statement statement = null;
    ResultSet rs = null;
    Connection pgConnection = null;
    // String lineString = "";

    try {
        pgConnection = ConnectionManager.getPostgresConnection(
                connectionHost, connectionUser, connectionPassword, dbName,
                port);
        // out.println(connectionHost+","+ connectionUser+","+
        // connectionPassword+","+ dbName);
        statement = pgConnection.createStatement();
        // out.print(pgConnection);

        int headerCode = Integer.parseInt(request
                .getParameter("headerCode"));

        String sql = "";

        sql += "SELECT tourheadercode, tourdetailcode, visitsequence, locationname, cityname, type, status, typecolor, statuscolor";
        sql += " FROM hoobttourdetails";
        sql += " WHERE tourheadercode = "
                + headerCode + "";
        sql += " ORDER BY visitsequence";

        rs = statement.executeQuery(sql);

        String jsonData = "{'tourDetails':[";

        while (rs.next()) {
            jsonData += "{ 'hCode' : '";
            jsonData += rs.getString(1).trim();
            jsonData += "', ";
            jsonData += "'dCode' : '";
            jsonData += rs.getString(2).trim();
            jsonData += "', ";
            jsonData += "'visitSq' : '";
            jsonData += rs.getString(3).trim();
            jsonData += "', ";
            jsonData += "'locationName' : '";
            jsonData += rs.getString(4).trim();
            jsonData += "', ";
            jsonData += "'city' : '";
            jsonData += rs.getString(5).trim();
            jsonData += "', ";
            jsonData += "'type' : '";
            jsonData += rs.getString(6).trim();
            jsonData += "', ";
            jsonData += "'status' : '";
            jsonData += rs.getString(7).trim();
            jsonData += "', ";
            jsonData += "'tourTypeColor' : '";
            jsonData += rs.getString(8).trim();
            jsonData += "', ";
            jsonData += "'statusColor' : '";
            jsonData += rs.getString(9).trim();

            if (rs.isLast()) {
                jsonData += "' }  ";
            } else {
                jsonData += "' } , ";
            }
        }

        jsonData += "]}";
        out.print(jsonData);

    } catch (Exception e) {
        // TODO Auto-generated catch block
        out.println(e.toString());
        e.printStackTrace();

    }

}

}

我想要的是，

我需要将此Ajax响应设置为我的网格存储。我需要在网格面板中显示此响应数据。我试过跟随但没有运气。

var jsonData = Ext.util.JSON.decode(response.responseText);  
                                console.log(jsonData);
                                if (jsonData.tourDetails.length > 0) {
                                    //plannedGrid.getStore().add(records);
                                    plannedGrid.getStore().loadData(jsonData);
                                }

它从dsatabase获取数据，我的Json数据是：

{'tourDetails':[{ 'hCode' : '5', 'dCode' : '1', 'visitSq' : '1', 'locName' : 'Sam Stores', 'city' : 'Galle', 'type' : '3', 'status' : '1', 'typeColor' : '#009900', 'statusColor' : 'blue' } , { 'hCode' : '5', 'dCode' : '2', 'visitSq' : '2', 'locName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'type' : '1', 'status' : '1', 'typeColor' : '#FFFF00', 'statusColor' : 'blue' } , { 'hCode' : '5', 'dCode' : '3', 'visitSq' : '3', 'locName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'type' : '1', 'status' : '1', 'typeColor' : '#FFFF00', 'statusColor' : 'blue' } , { 'hCode' : '5', 'dCode' : '4', 'visitSq' : '4', 'locName' : 'Wijesingha Hardware', 'city' : 'Galle', 'type' : '3', 'status' : '1', 'typeColor' : '#009900', 'statusColor' : 'blue' } ]}

如何在网格面板中显示此响应数据？

我正在使用ExtJs 3.4。

亲切的问候

Answer 1

尝试此解决方案...您的商店无法读取加载的结果

var plannedGridStore = new Ext.data.JsonStore({
    root: 'tourDetails',
    autoLoad: true,
    fields: ['locationName', 'estimatedTime', 'city', 'type', 'tourTypeColor'],
});

ExtJs 3.4：在网格面板中显示Ajax响应数据

1 个答案: