ExtDesigner顶用jsonstore给girdpanel绑定数据 _JavaScript

ExtDesigner中用jsonstore给girdpanel绑定数据

1、MyStore.js

MyStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(cfg) {
        cfg = cfg || {};
        MyStore.superclass.constructor.call(this, Ext.apply({
            storeId: 'MyStore',
            root: 'root',
            totalProperty: 'totalProperty',
            url: 'http://192.168.0.193:8088/extjs/extJosn.jsp?start=1&limit=100',
            autoLoad: true,
            fields: [
                {
                    name: 'name',
                    type: 'string'
                },
                {
                    name: 'sex',
                    type: 'string'
                }
            ]
        }, cfg));
    }
});
new MyStore();

2、MyWindow.ui.js

MyWindowUi = Ext.extend(Ext.Window, {
    title: 'My Window',
    width: 525,
    height: 322,
    autoScroll: true,
    initComponent: function() {
        this.items = [
            {
                xtype: 'grid',
                title: 'My Grid',
                store: 'MyStore',
                height: 177,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        header: 'name',
                        sortable: true,
                        width: 100,
                        dataIndex: 'name',
                        id: 'name'
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'sex',
                        sortable: true,
                        width: 100,
                        dataIndex: 'sex',
                        id: 'sex'
                    }
                ]
            }
        ];
        MyWindowUi.superclass.initComponent.call(this);
    }
});

3、MyWindow.js

MyWindow = Ext.extend(MyWindowUi, {
    initComponent: function() {
        MyWindow.superclass.initComponent.call(this);
    }
});

4、xds_index.js

Ext.onReady(function() {
    Ext.QuickTips.init();
    var cmp1 = new MyWindow({
        renderTo: Ext.getBody()
    });
    cmp1.show();
});

?5、xds_index.html

<!DOCTYPE html>

<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>project.xds</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="MyWindow.ui.js"></script>
    <script type="text/javascript" src="MyWindow.js"></script>
    <script type="text/javascript" src="MyStore.js"></script>
    <script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>

其中jsonstore的url是提供json数据的页面，在这里我用jsp生成了一组json数据供这里使用

jsp生成json 的代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try {
    int index = Integer.parseInt(start);
    int pageSize = Integer.parseInt(limit);
    String sexv="";
    String json = "{totalProperty:100,root:[";
    
    for (int i = index; i < pageSize + index; i++) {
         if(i%3==0)
           sexv=",sex:'female'";
         else
           sexv=",sex:'male'";
        json += "{id:" + i +sexv+ ",name:'name" + i + "',descn:'descn" + i + "'}";
        if (i != pageSize + index - 1) {
            json += ",";
        }
    }
    json += "]}";
    response.getWriter().write(json);
} catch(Exception ex) {
}
%>

运行后的效果：

以上除了jsp生成的json的页面不是ExtDesigner的外，其他都是通过Ext Designer界面工具下面的Export Project到导出的，直接点击xds_index.html 看效果