Extjs——简单的Grid panel小实例
<!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小实例的更多相关文章
- [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- 一个简单的Android小实例
原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台 3.安装J ...
- 从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别
最近在学struts2,struts2相比以前的JSP+Servlet,在处理流程上的更简单,我们就一个小实例来具体分析一下. 实例内容如下: 实现一个简单的注册页面包括:用户名.密码.重复密码.年龄 ...
- VueX（vue状态管理）简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
- Extjs简单的form+grid组合
采用的是Extjs4.2版本 http://localhost:49999/GridPanel/Index 该链接是本地连接,只是方便自己访问,读者无法正常访问. <script src=&qu ...
- ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- 【extjs】 extjs5 Ext.grid.Panel 搜索示例
先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
随机推荐
- Flutter 实现不同样式(有样式) 的TextField (可自定义)，类似微博#话题#、@用户，（给TextField加TextSpan）
描述 先上效果图 在项目中,有 @ 和 话题功能,需要在编辑时即可回显,但是官方原生的TextField不支持对部分文字定义不同的样式,所以封装了一个. 注意:这不是富文本插件,不支持在输入框中显示图 ...
- 洛谷1063 +区间dp（经典问题）
题目网址:https://www.luogu.com.cn/problem/P1063 题意大致是:给定一个序列An,第i个元组表示为(Ai,Ai+1),序列位置不变,当合并一个区间[l,l+1]时开 ...
- 基于Modbus三种CRC16校验方法的性能对比
目录 1.背景介绍 2. CRC校验的三种方法 2.1. 直接计算CRC校验 2.2. 查短表法计算CRC16校验 2.3.查大表法计算CRC16校验 3.三种校验方式的测试方法 3.1.直接计算CR ...
- [概率] HDU 2019 Multi-University Training Contest 10 - Valentine's Day
Valentine's Day Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others ...
- 如何设置mysql远程访问
如何设置mysql远程访问 Mysql默认是不可以通过远程机器访问的,通过下面的配置可以开启远程访问 在MySQL Server端: 执行mysql 命令进入mysql 命令模式, mysql> ...
- CF 631C report
Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...
- 深度学习vs机器学习 | 这些本质区别你知道多少？
目录: 数据相关性 硬件依赖性 特征工程 解决问题方法 执行时间 可解释性 一.数据相关性 深度学习与传统机器学习最重要的区别是,随着数据量的增加,其性能也随之提高.当数据很小的时候,深度学习算法并不 ...
- Word文档转html并提取标题
最近做了一个功能,需要将word文档转化成html的格式,并提取出标题生成导航.考虑到功能的复杂程度,将需要降低为对“标题1”这种格式进行提取. docx为后缀的文档(word2007)支持XML的文 ...
- 学习 MyBatis 的一点小总结 —— 底层源码初步分析
目录 MyBatis 如何获取数据库源? MyBatis 如何获取 sql 语句? MyBatis 如何执行 sql 语句? MyBatis 如何实现不同类型数据之间的转换? 在过去程序员使用 JDB ...
- 《带你装B，带你飞》pytest成魔之路4 - fixture 之大解剖
1. 简介 fixture是pytest的一个闪光点,pytest要精通怎么能不学习fixture呢?跟着我一起深入学习fixture吧.其实unittest和nose都支持fixture,但是pyt ...