一、获取静态数据:
var store = Ext.create('Ext.data.JsonStore', {
fields : ['id', 'title', 'items'],
data : catalog
})
var catalog = Platform.app.serversCatalog;
Platform.app = {
serversCatalog: [
{
"id": "subsys",
"title": "10.24.1.18",
"items": [
{
"id": "'opermain'",
"text": "subsys",
"url": "'front'",
"ip":"'10.24.1.18'",
"icon": "front.png",
"desc": "子系统",
"status": "online"
},
{
"id": "'front'",
"text": "front",
"url": "'front'",
"ip":"'10.24.1.18'",
"icon": "front.png",
"desc": "前台柜面",
"status": "online"
}
]
}
]
};
二、json从后台获取动态数据:
var store = Ext.create('Ext.data.JsonStore', {
fields : ['id', 'title', 'items'],
proxy: {
type: 'ajax',
url: '../../../subSystemServlet.do?',
reader: {
type: 'json',
root: 'root'
}
}
});
store.load();
后台:
String result="[\r\n"+
"{\r\n"+
"\"title\": \"127.0.0.1\","+
"\"items\": ["+
"{"+
"\"id\": \"\'opermain\'\","+
"\"text\": \"subsys\","+
"\"url\": \"\'front\'\","+
"\"ip\":\"\'10.24.1.18\'\","+
"\"icon\": \"front.png\","+
"\"desc\": \"子系统\","+
"\"status\": \"online\""+
"},"+
"{"+
"\"id\": \"\'front\'\","+
"\"text\": \"front\","+
"\"url\": \"\'front\'\","+
"\"ip\":\"\'10.24.1.18\'\","+
"\"icon\": \"front.png\","+
"\"desc\": \"前台柜面\","+
"\"status\": \"online\""+
"}"+
"]"+
"},"+
"{"+
"\"title\": \"10.24.1.32\","+
"\"items\": ["+
"{"+
"\"id\": \"\'cnaps1\'\","+
"\"text\": \"cnaps1\","+
"\"url\": \"\'cnaps1\'\","+
"\"ip\":\"\'10.24.1.32\'\","+
"\"icon\": \"cnaps1.gif\","+
"\"desc\": \"一代支付系统\","+
"\"status\": \"down\""+
"}"+
"]"+
"}"+
"]";
req.setCharacterEncoding("gbk");
resp.setContentType("text/json; charset=GBK");
resp.getWriter().println(result);
相关推荐
EXTJS接收到JSON数据后,可以解析并渲染到界面上,实现数据的动态展示和更新。 在实际项目中,"webRebuild"可能是一个包含整个Web应用重建过程的压缩包,其中可能包含以下内容: 1. HTML模板文件:EXTJS的界面布局...
EXTJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。它允许用户以交互方式查看、编辑和管理大量结构化数据。在EXTJS Grid中,数据通常以行和列的形式呈现,支持排序、分页、过滤、拖放...
在.NET环境中,可以使用ASP.NET AJAX UpdatePanel或自定义WCF服务来实现异步数据获取。YuiGrid的Store组件配置了proxy属性,可以设置为ScriptProxy或JsonPProxy,与服务器端进行异步通信。 5. **示例代码** 在`...
标题“extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面”直接指出本文内容的重点在于使用Ext JS 3.31版本的TreeGrid组件加载静态页面中的JSON数据。描述部分简要介绍实现这一功能是作者对现有功能的小改进,...
- **JSON 格式**:通常使用 JSON 格式的 Reader 和 Writer,因为 JSON 是一种轻量级的数据交换格式,易于处理。 - **XML 格式**:对于需要使用 XML 格式的场景,也提供了相应的 Reader 和 Writer 类。 #### 六、...
在本教程中,我们将深入探讨ExtJS中的"RemoteCheckboxGroup",这是一个用于处理远程数据源的动态复选框组件。这个组件通常用于显示从服务器获取的动态选项,它允许用户根据需要选择或取消选择多个选项,同时将这些...
1. 定义数据源,可以是静态数据或动态获取的服务器数据。 2. 创建`Ext.tree.Panel`实例,配置数据源、渲染器和事件监听器。 3. 使用`proxy`配置实现异步加载子节点数据。 4. 动态操作树节点,如添加、删除和修改。 ...
2. **定义数据源**:创建符合JSON Tree格式的数据,可以是服务器端动态生成,也可以是静态数据。 3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如...
因此,`JSONHelper.cs` 可能包含将数据库查询结果转换为JSON对象的方法,以便于ExtJS可以解析和显示数据。例如,它可能有一个`ToJson`方法,将数据实体转换为JSON字符串,或者一个`FromJson`方法,将接收到的JSON...
在ExtJS 4中,STOREMENU 是一种特定的功能,它将数据存储(Store)与菜单(Menu)相结合,提供了一种动态创建菜单项的方法,这些菜单项可以根据存储的数据进行更新。这种功能在需要根据用户权限或实时数据动态展示...
在这个系统中,尽管使用的是静态数据模拟,但你可以看到如何设置数据源(DataSource),并与Grid或Form进行数据绑定,实现数据的动态加载、增删改查操作。此外,ExtJs3还提供了数据代理(Data Proxy)和数据模型...
数据可以是静态的,也可以动态从服务器加载。 2. 创建模型(Model):定义store中数据字段的结构。这有助于保持数据的一致性和完整性。 3. 创建chart:定义图表的基本配置,如类型(折线图)、颜色、系列等。 4. ...
如果数据是静态的,也可以在初始化时直接赋值给`root`属性。 5. **监听事件**:EXTJS提供多种事件监听,如`itemclick`、`beforeload`、`load`等,可用于处理用户交互和数据加载的逻辑。 6. **调试与测试**:确保你...
数据源可以是服务器返回的JSON格式数据,也可以是在客户端预先定义的静态数组。 3. **配置TreePanel**:使用`Ext.tree.Panel`或其子类来创建Tree组件。在配置对象中,你可以设置诸如根节点、可展开/折叠行为、选择...
7. **Ajax和JSON**:EXTJS内置了与服务器进行异步通信的Ajax功能,支持JSON格式的数据交换,使得前后端通信更加便捷。 8. **主题和皮肤**:EXTJS支持更换主题和自定义皮肤,允许开发者根据项目需求定制界面风格。 ...
Store会从后台获取数据(通常是通过Struts Action返回的JSON格式数据)。 2. 定义Model,描述图书的数据结构,如ID、书名、作者等字段。 3. 创建Grid面板展示图书列表,Grid的store绑定到上面创建的Store。 4. 在...
- **数据交互**:在ASP中处理业务逻辑和数据库操作,然后通过JSON或XML格式将数据传递给ExtJS。ExtJS的Store组件可以方便地接收并解析这些数据,用于显示在Grid、Tree或其他组件中。 - **Ajax通信**:ExtJS的Ajax...
这个组件可以静态填充数据,也可以动态从服务器获取数据。 创建一个基本的下拉列表需要以下步骤: 1. **创建 Store**: 首先,你需要定义一个数据存储(Store),用于存储下拉列表的选项。例如,你可以创建一个 ...
7. **数据绑定**:EXTJS的树结构通常与后台数据源(如JSON或XML)绑定。当对树进行编辑时,相应的数据模型也需要同步更新。可以使用`store.load`或`store.sync`方法将更改同步到服务器。 8. **拖放操作**:EXTJS...
例如,你可以创建一个ExtJS的Grid面板,通过Ajax调用Java后端服务获取数据,并将其展示在表格中。 接下来,让我们详细了解如何在Java项目中集成ExtJS: 1. **设置环境**:确保你的项目已经配置了ExtJS库,可以通过...