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 看效果