ExtDesigner顶用jsonstore给girdpanel绑定数据
日期：2014-05-16 浏览次数：20392 次
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 + "',d
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
