`

Extjs json获取动态数据及静态数据

    博客分类:
  • web
阅读更多

一、获取静态数据:

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 + Struct +mysql +json

    EXTJS接收到JSON数据后,可以解析并渲染到界面上,实现数据的动态展示和更新。 在实际项目中,"webRebuild"可能是一个包含整个Web应用重建过程的压缩包,其中可能包含以下内容: 1. HTML模板文件:EXTJS的界面布局...

    静态EXTJS GRID

    EXTJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。它允许用户以交互方式查看、编辑和管理大量结构化数据。在EXTJS Grid中,数据通常以行和列的形式呈现,支持排序、分页、过滤、拖放...

    ExtJS的.NET控件_YuiGrid(数据绑定.同步_异步取值)

    在.NET环境中,可以使用ASP.NET AJAX UpdatePanel或自定义WCF服务来实现异步数据获取。YuiGrid的Store组件配置了proxy属性,可以设置为ScriptProxy或JsonPProxy,与服务器端进行异步通信。 5. **示例代码** 在`...

    extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面

    标题“extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面”直接指出本文内容的重点在于使用Ext JS 3.31版本的TreeGrid组件加载静态页面中的JSON数据。描述部分简要介绍实现这一功能是作者对现有功能的小改进,...

    extjs4中文视频下载地址

    - **JSON 格式**:通常使用 JSON 格式的 Reader 和 Writer,因为 JSON 是一种轻量级的数据交换格式,易于处理。 - **XML 格式**:对于需要使用 XML 格式的场景,也提供了相应的 Reader 和 Writer 类。 #### 六、...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    在本教程中,我们将深入探讨ExtJS中的"RemoteCheckboxGroup",这是一个用于处理远程数据源的动态复选框组件。这个组件通常用于显示从服务器获取的动态选项,它允许用户根据需要选择或取消选择多个选项,同时将这些...

    EXTJS动态树的实现

    1. 定义数据源,可以是静态数据或动态获取的服务器数据。 2. 创建`Ext.tree.Panel`实例,配置数据源、渲染器和事件监听器。 3. 使用`proxy`配置实现异步加载子节点数据。 4. 动态操作树节点,如添加、删除和修改。 ...

    Extjs Combotree

    2. **定义数据源**:创建符合JSON Tree格式的数据,可以是服务器端动态生成,也可以是静态数据。 3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如...

    ExtJS4.2后台分页需要的几个文件

    因此,`JSONHelper.cs` 可能包含将数据库查询结果转换为JSON对象的方法,以便于ExtJS可以解析和显示数据。例如,它可能有一个`ToJson`方法,将数据实体转换为JSON字符串,或者一个`FromJson`方法,将接收到的JSON...

    Extjs4下的STOREMENU

    在ExtJS 4中,STOREMENU 是一种特定的功能,它将数据存储(Store)与菜单(Menu)相结合,提供了一种动态创建菜单项的方法,这些菜单项可以根据存储的数据进行更新。这种功能在需要根据用户权限或实时数据动态展示...

    ExtJs3 演示系统

    在这个系统中,尽管使用的是静态数据模拟,但你可以看到如何设置数据源(DataSource),并与Grid或Form进行数据绑定,实现数据的动态加载、增删改查操作。此外,ExtJs3还提供了数据代理(Data Proxy)和数据模型...

    EXTJS 折线 chart action 代码示例

    数据可以是静态的,也可以动态从服务器加载。 2. 创建模型(Model):定义store中数据字段的结构。这有助于保持数据的一致性和完整性。 3. 创建chart:定义图表的基本配置,如类型(折线图)、颜色、系列等。 4. ...

    EXTJS动态树的实现举例示例代码

    如果数据是静态的,也可以在初始化时直接赋值给`root`属性。 5. **监听事件**:EXTJS提供多种事件监听,如`itemclick`、`beforeload`、`load`等,可用于处理用户交互和数据加载的逻辑。 6. **调试与测试**:确保你...

    extjs的tree的使用

    数据源可以是服务器返回的JSON格式数据,也可以是在客户端预先定义的静态数组。 3. **配置TreePanel**:使用`Ext.tree.Panel`或其子类来创建Tree组件。在配置对象中,你可以设置诸如根节点、可展开/折叠行为、选择...

    extjs.zip包

    7. **Ajax和JSON**:EXTJS内置了与服务器进行异步通信的Ajax功能,支持JSON格式的数据交换,使得前后端通信更加便捷。 8. **主题和皮肤**:EXTJS支持更换主题和自定义皮肤,允许开发者根据项目需求定制界面风格。 ...

    Extjs+Struts整合入门实例

    Store会从后台获取数据(通常是通过Struts Action返回的JSON格式数据)。 2. 定义Model,描述图书的数据结构,如ID、书名、作者等字段。 3. 创建Grid面板展示图书列表,Grid的store绑定到上面创建的Store。 4. 在...

    extjs+asp例子

    - **数据交互**:在ASP中处理业务逻辑和数据库操作,然后通过JSON或XML格式将数据传递给ExtJS。ExtJS的Store组件可以方便地接收并解析这些数据,用于显示在Grid、Tree或其他组件中。 - **Ajax通信**:ExtJS的Ajax...

    extjs2.0 下拉列

    这个组件可以静态填充数据,也可以动态从服务器获取数据。 创建一个基本的下拉列表需要以下步骤: 1. **创建 Store**: 首先,你需要定义一个数据存储(Store),用于存储下拉列表的选项。例如,你可以创建一个 ...

    extjs目录树编辑

    7. **数据绑定**:EXTJS的树结构通常与后台数据源(如JSON或XML)绑定。当对树进行编辑时,相应的数据模型也需要同步更新。可以使用`store.load`或`store.sync`方法将更改同步到服务器。 8. **拖放操作**:EXTJS...

    java extjs 实例教程

    例如,你可以创建一个ExtJS的Grid面板,通过Ajax调用Java后端服务获取数据,并将其展示在表格中。 接下来,让我们详细了解如何在Java项目中集成ExtJS: 1. **设置环境**:确保你的项目已经配置了ExtJS库,可以通过...

Global site tag (gtag.js) - Google Analytics