extjs_02_grid显示本地数据、显示跨域数据

yizhihongxing

现在我来详细讲解“extjs_02_grid显示本地数据、显示跨域数据”的完整攻略。

1. Grid 显示本地数据

1.1 示例说明

下面是一个简单的示例,演示如何创建 Ext JS Grid 并显示本地数据。

Ext.application({
    name: 'MyApp',
    launch: function() {
        // 创建数据模型
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'id', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'email', type: 'string' },
                { name: 'phone', type: 'string' }
            ]
        });

        // 创建数据源
        var store = Ext.create('Ext.data.Store', {
            model: 'User',
            data: [
                { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13800138000' },
                { id: 2, name: '李四', email: 'lisi@example.com', phone: '13800138001' },
                { id: 3, name: '王五', email: 'wangwu@example.com', phone: '13800138002' }
            ]
        });

        // 创建 Grid
        var grid = Ext.create('Ext.grid.Panel', {
            title: '用户列表',
            store: store,
            columns: [
                { text: 'ID', dataIndex: 'id' },
                { text: '姓名', dataIndex: 'name' },
                { text: '邮箱', dataIndex: 'email' },
                { text: '电话', dataIndex: 'phone' }
            ],
            height: 200,
            width: 500,
            renderTo: Ext.getBody()
        });
    }
});

1.2 说明

上面的示例中,我们创建了一个 Ext JS 应用程序,并在其 launch 方法中创建了一个数据模型 User,该模型定义了用户的数据结构。然后,我们创建了一个数据源,该数据源使用了定义好的模型并设置了一些用户的数据。最后,我们创建了一个 Ext JS Grid 并将数据源和列的定义传递给了它。最后,我们在页面中渲染出这个 Grid。

2. Grid 显示跨域数据

2.1 示例说明

跨域数据的加载需要特别处理,下面是一个简单的示例,演示如何通过 JSONP 的方式加载跨域数据并在 Ext JS Grid 中进行显示。

Ext.application({
    name: 'MyApp',
    launch: function() {
        // 创建数据源
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'jsonp',
                url: 'http://api.example.com/users',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },
            autoLoad: true
        });

        // 创建 Grid
        var grid = Ext.create('Ext.grid.Panel', {
            title: '用户列表',
            store: store,
            columns: [
                { text: '姓名', dataIndex: 'name' },
                { text: '邮箱', dataIndex: 'email' },
                { text: '电话', dataIndex: 'phone' }
            ],
            height: 200,
            width: 500,
            renderTo: Ext.getBody()
        });
    }
});

2.2 说明

上面的示例中,我们创建了一个 Ext JS 应用程序,并在其 launch 方法中创建了一个数据源 store,该数据源使用了 jsonp 类型的代理来加载跨域数据。数据源中还指定了数据和 reader 的配置。读取器将接受返回的 JSON 数据,并查找名为 data 的属性,以在我们的 Ext JS Grid 中显示纪录。最后,我们创建了一个 Ext JS Grid 并将数据源和列定义传递给了它。最终,我们在页面中渲染出这个 Grid。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:extjs_02_grid显示本地数据、显示跨域数据 - Python技术站

(0)
上一篇 2023年6月16日
下一篇 2023年6月16日

相关文章

  • 多数据源@DS和@Transactional实战

    下面我将详细讲解“多数据源@DS和@Transactional实战”的完整攻略。 一、多数据源@DS实战 1.1 添加多数据源配置 首先,在Spring Boot项目中添加多数据源配置。在application.yml文件中添加: spring: datasource: test1: driver-class-name: com.mysql.jdbc.Dri…

    Java 2023年5月20日
    00
  • Java实现字符串切割的方法详解

    Java实现字符串切割的方法详解 在Java开发中,经常需要将一个字符串按照特定规则进行切割,切割后的字符串可以使用来进行各种操作。本文就 Java 实现字符串切割的方法进行详细的讲解 1、使用 split() 方法 Java内置的String类中,提供了 split() 方法,该方法可以实现对字符串按照特定规则进行切割,返回一个字符串数组。下面是使用 sp…

    Java 2023年5月26日
    00
  • springboot 配置DRUID数据源的方法实例分析

    SpringBoot配置Druid数据源的方法实例分析 在SpringBoot中,我们可以使用Druid数据源连接数据库,本文将详细讲解如何在SpringBoot中配置Druid数据源的方法。 引入Druid依赖 在pom.xml文件中,添加Druid依赖: <dependency> <groupId>com.alibaba</…

    Java 2023年5月20日
    00
  • Java多线程 ReentrantLock互斥锁详解

    Java多线程 ReentrantLock互斥锁详解 在多线程编程中,为了避免线程间的竞争条件和数据不一致问题,通常需要使用互斥锁来控制线程的访问。 Java中的ReentrantLock是一种可重入的独占锁,它可以用来保护共享资源,避免多个线程同时访问造成数据不一致的问题。下面我们将详细介绍ReentrantLock的用法和注意事项。 1. Reentra…

    Java 2023年5月18日
    00
  • SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化

    简介在前后端分离的开发模式中,前端使用HTML、CSS和JavaScript等技术提供页面交互体验,向后台服务器发送请求获取数据,后台服务器处理请求并返回数据给前端,前端页面呈现出处理后的数据。本次攻略使用SpringBoot+JSON+AJAX+ECharts实现了一个前后端分离开发可视化的实例。具体实现过程如下。 技术栈 SpringBoot:后端框架 …

    Java 2023年5月20日
    00
  • Spring Boot统一接口返回及全局异常处理

    针对这个问题,我需要从以下几个方面来进行讲解: Spring Boot统一接口返回 全局异常处理 Spring Boot统一接口返回 在Spring Boot开发中,我们通常需要采用统一的接口返回格式,以便于前后端进行沟通和交互,同时对于异常情况也需要进行统一处理。 在实现统一接口返回的过程中,我们可以借助Spring Boot提供的ResponseBody…

    Java 2023年5月27日
    00
  • 使用maven整合Spring+SpringMVC+Mybatis框架详细步骤(图文)

    以下是关于“使用maven整合Spring+SpringMVC+Mybatis框架详细步骤(图文)”的完整攻略,其中包含两个示例。 使用maven整合Spring+SpringMVC+Mybatis框架详细步骤(图文) 在本文中,我们将讲解如何使用maven整合Spring+SpringMVC+Mybatis框架。这是一种常用的Web开发框架,可以帮助我们快…

    Java 2023年5月17日
    00
  • Spring Boot教程之提高开发效率必备工具lombok

    关于“Spring Boot教程之提高开发效率必备工具Lombok”的攻略,可以分成以下几个部分进行讲解: Lombok是什么 Lombok的使用方法 Lombok的优点 Lombok的缺点 示例1:使用@Data注解简化Java Bean的实现 示例2:使用@Log注解快速添加日志功能 Lombok是什么 Lombok是一个Java库,可以通过注解的方式自…

    Java 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部