<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <!--这三条是最基础需要用到的三条-->

    //设置风格

    <link href="extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"

    //重要的js文件

    <script src="extjs4.2/ext-all.js"></script>

    //风格文件需要用到的js文件

    <script src="extjs4.2/ext-theme-neptune.js"></script>rel="stylesheet" />

</head>

<body>

    <script>

        Ext.onReady(function () {

            //创建数据表

            Ext.create('Ext.data.Store', {

                storeId: 'simpsonsStore',

                //field填写字段名字

                fields: ['name', 'email', 'phone'],

                //保存数据的变量,本地数据，如果是从服务端获得数据，则在proxy中设置

                data: {

                    'items': [

                        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },

                        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },

                        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },

                        { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }

                    ]

                },

                proxy: {

                    type: 'memory',

                    reader: {

                        type: 'json',

                        root: 'items'

                    }

                }

            });

            //创建表格格式

            Ext.create('Ext.grid.Panel', {

                title: 'Simpsons',

                store: Ext.data.StoreManager.lookup('simpsonsStore'),

                columns: [

                    { text: 'Name', dataIndex: 'name' },

                    { text: 'Email', dataIndex: 'email', flex: 1 },

                    { text: 'Phone', dataIndex: 'phone' }

                ],

                height: 200,

                width: 400,

                renderTo: Ext.getBody()

            });

        })

    </script>

</body>

</html>

Extjs——简单的Grid panel小实例的更多相关文章

  1. [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

  2. 一个简单的Android小实例

    原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台   3.安装J ...

  3. 从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别

    最近在学struts2,struts2相比以前的JSP+Servlet,在处理流程上的更简单,我们就一个小实例来具体分析一下. 实例内容如下: 实现一个简单的注册页面包括:用户名.密码.重复密码.年龄 ...

  4. VueX（vue状态管理）简单小实例

    VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...

  5. Extjs简单的form+grid组合

    采用的是Extjs4.2版本 http://localhost:49999/GridPanel/Index 该链接是本地连接,只是方便自己访问,读者无法正常访问. <script src=&qu ...

  6. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  7. 【extjs】 extjs5 Ext.grid.Panel 搜索示例

    先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...

  8. 【extjs】 ext5 Ext.grid.Panel 分页,搜索

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  9. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

随机推荐

  1. PTEST 渗透测试标准

    1:前期交互阶段 在前期交互(Pre-Engagement Interaction)阶段,渗透测试团队与客户组织进行交互讨论,最重要的是确定渗透测试的范围.目标.限制条件以及服务合同细节.该阶段通常涉 ...

  2. 2020kali浏览器汉化等配置

    0.修改搜索引擎 1. 2. 3.点击左侧搜索,输入language因为我已经修改为中文所以没有查询到结果 4点击搜索更多语言(未汉化未英文)找到chinese后添加 5.要将chinese上移到第一 ...

  3. hdu3973 AC's String 线段树+字符串hash

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3973/ 题意是:给出一个模式串,再给出一些串组成一个集合,操作分为两种,一种是替换模式串中的一个字符,还有一种是 ...

  4. 拿 C# 搞函数式编程 - 3

    前言 今天和某个人聊天聊到了 C# 的 LINQ,发现我认识的 LINQ 似乎和大多数人认识的 LINQ 不太一样,怎么个不一样法呢?其实 LINQ 也可以用来搞函数式编程. 当然,并不是说写几个 l ...

  5. Mybatis详解系列(一)--持久层框架解决了什么及如何使用Mybatis

    简介 Mybatis 是一个持久层框架,它对 JDBC 进行了高级封装,使我们的代码中不会出现任何的 JDBC 代码,另外,它还通过 xml 或注解的方式将 sql 从 DAO/Repository ...

  6. React入门(1)

    今天继续来学习react 首先,先写几个小demo来感受一下什么是react,以及react的语法规则,来建立对react的一个总体认识 上demo: demo01: demo01涉及的知识点有: 1 ...

  7. NSObject常用方法

    类 @interface NSObject <NSObject> { Class isa OBJC_ISA_AVAILABILITY; } // 初始化加载 + (void)load; / ...

  8. 数字反转 NOIp普及组2011

    当数字位数不确定时,如何反转呢? 本文为博客园ShyButHandsome原创作品,转载请注明出处 使用右侧目录快速浏览文章 题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数. 新数也应满 ...

  9. [讲解]网络流最大流dinic算法

    网络流最大流算法dinic ps:本文章不适合萌新,我写这个主要是为了复习一些细节,概念介绍比较模糊,建议多刷题去理解 例题:codevs草地排水,方格取数 [抒情一下] 虽然老师说这个多半不考,但是 ...

  10. 学习方法，学习方式By:ラピスラズリ(Dawn)20200407

    原创,转载请注明,谢谢!