<!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. ASP.NET动态网站课程设计——个人网页

    时光荏苒,岁月如梭,又是学期期末时,没错,我又来补课程设计了,hhh. 本文主要讲述如何在用H5+CSS3写的静态网站的基础上,结合ASP.NET动态网站开发,制作一个动态的个人网页. 首先需要熟悉一 ...

  2. 使用VirtualBox 版本 6.1.2 r135662, 安装ubuntu18

    VDI是VirtualBox的基本且独有的格式.目前应该还没有支持这种格式的其他软件. VMDK是专门为VMWare开发,但其他虚机像Sun xVM,QEMU,VirtualBox,SUSE Stud ...

  3. NDCG的理解

    2019-05-29 14:15:44

  4. 使用一行Python代码从图像读取文本

    处理图像不是一项简单的任务.对你来说,作为一个人,很容易看着某样东西然后马上知道你在看什么.但电脑不是这样工作的. 对你来说太难的任务,比如复杂的算术,或者一般意义上的数学,是计算机毫不费力就能完成的 ...

  5. Redis调用lua生成验证码

    场景: ​ 通过微信公众号拿验证码在APP上绑定,为了防止重复,尝试使用reids-lua的方法实现此功能 以下是 php 调用 redis.eval 方法传入的 lua 方法,当然这只是修改后的,保 ...

  6. Mysql数据库的基本操作（1）

    一.启动数据库 1. 我的电脑(此电脑)--->右键点击[管理]--->[服务和应用程序]--->[服务] 找到MySQL8.0可以选择手动启动或者自动启动. 2.可以直接通过命令行 ...

  7. 《带你装B，带你飞》pytest成魔之路4 - fixture 之大解剖

    1. 简介 fixture是pytest的一个闪光点,pytest要精通怎么能不学习fixture呢?跟着我一起深入学习fixture吧.其实unittest和nose都支持fixture,但是pyt ...

  8. AI学习笔记：特征工程

    一.概述 Andrew Ng:Coming up with features is difficult, time-consuming, requires expert knowledge. &quo ...

  9. ajax请求以及递归

    function f1() { console.log("hello"); f1(); }; f1();//浏览器崩溃,因为没有结束条件——死循环 改进如下: var i=0; f ...

  10. Node教程——Node+MongoDB案例实现用户信息的增删改查

    想要获取源代码的同学可以留言,我不做git上传了,案例太简单 没必要 综合演练 用户信息的增删改查 需求:你需要实现这样的结果 点击添加可以添加用户,点击删除可以删除点击修改可以修改 代码分析: 1. ...