`

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

  • 大小: 22.8 KB
分享到:
评论

相关推荐

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    在ExtJs框架中,JsonStore是一种非常重要的数据存储器,它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据,以创建一个简单的个人信息表格。 首先,为了使用ExtJs框架,我们...

    Go-JSONStore简单线程安全的内存JSON密钥存储支持后端持久化

    Go-JSONStore是一个针对Go语言设计的轻量级、线程安全的内存数据存储解决方案,特别适用于需要快速存取JSON格式数据的场景。它提供了键值对(Key-Value)存储的功能,并且支持数据的持久化,确保在程序重启后仍能...

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    ext grid网格控件实例

    同时,理解EXT JS的数据模型和数据绑定机制对于深入使用EXT Grid至关重要。 总结起来,EXT Grid网格控件提供了强大的数据展示和管理功能,支持多种数据源,结合JSP和其他J2EE框架,可以构建出高效、动态的Web应用。...

    extjs4 对各类型store各种数据的读取 model 前台 等等

    ExtJS框架支持多种方式将Store中的数据绑定到界面上。常见的绑定方式包括: - **Grid Panel**: 通过Grid Panel组件可以方便地显示表格数据。 - **Form Panel**: 可以用来编辑或显示模型的字段。 - **List**: 显示...

    Ext中下拉列表ComboBox组件store数据格式用法介绍

    最后,将JsonStore实例赋值给ComboBox的`store`属性,完成数据绑定。 在实际应用中,根据需求,你可以选择合适的数据格式和数据加载方式来创建和配置ComboBox组件。通过这种方式,ComboBox不仅可以提供丰富的用户...

    Python库 | jsonstore-1.1.4-py2.7.egg

    `jsonstore`库是一个轻量级的数据存储解决方案,它主要的功能是将数据以JSON格式存储和读取,方便进行数据持久化操作。 一、Python库与`py2.7.egg`格式 Python库是一系列预编译的模块,提供了特定功能,便于开发者...

    ext 基本知识-store-proxy-reader-ext-connection-实例

    三、Ext.data.StoreExt.data.Store是ExtJS中用于管理数据集的核心组件,它可以加载并存储数据,同时提供对数据的查询、排序、过滤等功能。在描述中的`var ds = Ext.data.JsonStore({url: 'xxx.jsp',root: 'root',...

    PyPI 官网下载 | jsonstore-1.2.tar.gz

    《PyPI与jsonstore-1.2:Python中的数据存储解决方案》 在Python的世界里,PyPI(Python Package Index)是开发者们分享和获取开源软件包的重要平台。它为Python社区提供了一个集中的仓库,使得安装和管理第三方库...

    extjs实例~~~

    `ext_code.txt`可能包含了EXTJS的一些基础代码结构或特定功能的实现,比如组件创建、事件监听、数据绑定等,对于初学者理解EXTJS的编程模式非常有帮助。 在EXTJS的学习过程中,理解这些核心概念和组件的使用是至关...

    Ext_Js分页显示案例详解

    1. **Store对象**:Store是Ext_Js中用于存储和管理数据的对象。当数据量较大时,通常不会一次性加载所有数据到Store中,而是根据用户的操作(如翻页、排序等)动态加载所需的部分数据。 2. **PagingToolbar组件**...

    ext TreeGrid分页可编辑

    - 使用`Ext.PagingToolbar`来实现分页导航,并将其绑定到`JsonStore`。 ```javascript me.bbar = new Ext.PagingToolbar({ pageSize: itemsPerPage, store: me.treeStore2, displayInfo: true, displayMsg: '...

    PyPI 官网下载 | jsonstore-1.1.4.tar.gz

    `jsonstore`很可能是一个Python库,它提供了与JSON格式数据交互的功能,并且可能具备了分布式系统中的数据一致性保障,如通过ZooKeeper实现分布式锁或者配置管理。ZooKeeper是一个开源的分布式协调服务,常用于管理...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

    Ext 根据数据库返回json动态生成grid列表实例

    在"Ext 根据数据库返回json动态生成grid列表实例"中,我们学习了如何使用ExtJS创建一个动态的Grid,它的列和数据都依赖于服务器返回的JSON数据。这个过程包括了Grid的基本配置、数据存储的设定以及如何处理和解析...

    多年积攒下来的EXT3.3例子大放送

    例如,`Ext.data.JsonStore`可以用来加载JSON格式的后台数据,而`Ext.data.HttpProxy`则负责发起HTTP请求。开发者可能在示例中看到如何配置这些对象以实现数据的获取和更新。 3. **报表**:EXTJS提供了创建复杂报表...

    ExtJS深入浅出介绍之数据存储于传输

    三、数据绑定 1. **ViewModel和Data Binding**:ExtJS 5及更高版本引入了ViewModel和Data Binding概念,实现了视图和数据模型的双向绑定。当数据发生变化时,视图会自动更新,反之亦然。 2. **Form表单**:ExtJS的...

    EXT3.2 多选下拉框

    需要注意的是,EXT JS的事件处理和数据绑定也是重要的部分。例如,当用户选择或取消选择选项时,可以监听`select`事件,获取当前选中的值。同时,如果你的多选下拉框是动态加载数据的,可能还需要实现远程数据加载和...

    extjs和servlet数据交互的例子

    在提供的 `myserlvet.js` 文件中,我们创建了一个 `JsonStore` 对象,它是ExtJS中用来存储和管理JSON数据的类。`JsonStore` 配置了 `url` 属性,指定了Servlet的地址,这样它就能向服务器发起请求获取数据。同时,`...

Global site tag (gtag.js) - Google Analytics