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) {
}
%>
运行后的效果:
![](http://dl.iteye.com/upload/attachment/554376/85169a8e-c70e-3c60-b8ee-9618f3d6361e.jpg)
以上除了jsp生成的json的页面不是ExtDesigner的外,其他都是通过Ext Designer界面工具下面的Export Project到导出的,直接点击xds_index.html 看效果
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0055/4376/85169a8e-c70e-3c60-b8ee-9618f3d6361e-thumb.jpg)
- 大小: 22.8 KB
分享到:
相关推荐
在ExtJs框架中,JsonStore是一种非常重要的数据存储器,它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据,以创建一个简单的个人信息表格。 首先,为了使用ExtJs框架,我们...
Go-JSONStore是一个针对Go语言设计的轻量级、线程安全的内存数据存储解决方案,特别适用于需要快速存取JSON格式数据的场景。它提供了键值对(Key-Value)存储的功能,并且支持数据的持久化,确保在程序重启后仍能...
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
同时,理解EXT JS的数据模型和数据绑定机制对于深入使用EXT Grid至关重要。 总结起来,EXT Grid网格控件提供了强大的数据展示和管理功能,支持多种数据源,结合JSP和其他J2EE框架,可以构建出高效、动态的Web应用。...
最后,将JsonStore实例赋值给ComboBox的`store`属性,完成数据绑定。 在实际应用中,根据需求,你可以选择合适的数据格式和数据加载方式来创建和配置ComboBox组件。通过这种方式,ComboBox不仅可以提供丰富的用户...
`jsonstore`库是一个轻量级的数据存储解决方案,它主要的功能是将数据以JSON格式存储和读取,方便进行数据持久化操作。 一、Python库与`py2.7.egg`格式 Python库是一系列预编译的模块,提供了特定功能,便于开发者...
extjs4 对多种store数据 ,以多种方式绑定到界面上,以一例子以说明编写
《PyPI与jsonstore-1.2:Python中的数据存储解决方案》 在Python的世界里,PyPI(Python Package Index)是开发者们分享和获取开源软件包的重要平台。它为Python社区提供了一个集中的仓库,使得安装和管理第三方库...
`ext_code.txt`可能包含了EXTJS的一些基础代码结构或特定功能的实现,比如组件创建、事件监听、数据绑定等,对于初学者理解EXTJS的编程模式非常有帮助。 在EXTJS的学习过程中,理解这些核心概念和组件的使用是至关...
`jsonstore`很可能是一个Python库,它提供了与JSON格式数据交互的功能,并且可能具备了分布式系统中的数据一致性保障,如通过ZooKeeper实现分布式锁或者配置管理。ZooKeeper是一个开源的分布式协调服务,常用于管理...
在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...
在"Ext 根据数据库返回json动态生成grid列表实例"中,我们学习了如何使用ExtJS创建一个动态的Grid,它的列和数据都依赖于服务器返回的JSON数据。这个过程包括了Grid的基本配置、数据存储的设定以及如何处理和解析...
例如,`Ext.data.JsonStore`可以用来加载JSON格式的后台数据,而`Ext.data.HttpProxy`则负责发起HTTP请求。开发者可能在示例中看到如何配置这些对象以实现数据的获取和更新。 3. **报表**:EXTJS提供了创建复杂报表...
三、数据绑定 1. **ViewModel和Data Binding**:ExtJS 5及更高版本引入了ViewModel和Data Binding概念,实现了视图和数据模型的双向绑定。当数据发生变化时,视图会自动更新,反之亦然。 2. **Form表单**:ExtJS的...
需要注意的是,EXT JS的事件处理和数据绑定也是重要的部分。例如,当用户选择或取消选择选项时,可以监听`select`事件,获取当前选中的值。同时,如果你的多选下拉框是动态加载数据的,可能还需要实现远程数据加载和...
在提供的 `myserlvet.js` 文件中,我们创建了一个 `JsonStore` 对象,它是ExtJS中用来存储和管理JSON数据的类。`JsonStore` 配置了 `url` 属性,指定了Servlet的地址,这样它就能向服务器发起请求获取数据。同时,`...
EXT-JS的Grid组件是一个强大的数据展示工具,它可以显示大量数据并提供多种交互功能。在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS...
如果数据需要从后台获取,我们可以使用`Ext.data.JsonStore`或`Ext.data.Store`与`Ext.Ajax.request`结合。例如: ```javascript Ext.Ajax.request({ url: 'getData.php', // 后台数据接口 success: function...
总结来说,ExtJS 3.1的下拉框结合ASP.NET可以实现灵活的数据绑定和交互,为Web应用程序提供动态、丰富的用户体验。通过理解Store、Display Field、Value Field以及Query Mode等核心概念,你可以根据实际需求定制出...