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 ...
随机推荐
- MySQL基础篇(07)：用户和权限管理，日志体系简介
本文源码:GitHub·点这里 || GitEE·点这里 一.MySQL用户 1.基础描述 在数据库的使用过程中,用户作为访问数据库的鉴权因素,起到非常重要的作用,安装MySQL时会自动生成一个roo ...
- RabbitMQ 在Ubuntu18.04上的安装
1.安装erlang由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang2.安装Rabbitmq更新源 ...
- 题解 P1052 【过河】
显然是\(dp\),是用\(STL\)当中的\(map\)可以做到30分 #include <bits/stdc++.h>//万能头文件 using namespace std; int ...
- Codeforce219C-Color Stripe
E. Color Stripe time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 一些js 概念 整理
1.原型链 prototype 这个属性 是一个指针,指向一个对象 这个对象 包含 所有实例共享的属性和方法,即这个原型对象是用来给实例共享属性和方法的. 而每个实例内部 ...
- 通过源码理解Spring中@Scheduled的实现原理并且实现调度任务动态装载
前提 最近的新项目和数据同步相关,有定时调度的需求.之前一直有使用过Quartz.XXL-Job.Easy Scheduler等调度框架,后来越发觉得这些框架太重量级了,于是想到了Spring内置的S ...
- HDU - 1166 树状数组模板（线段树也写了一遍）
题意: 汉语题就不说题意了,用到单点修改和区间查询(树状数组和线段树都可以) 思路: 树状数组的单点查询,单点修改和区间查询. 树状数组是巧妙运用二进制的规律建树,建树就相当于单点修改.这里面用到一个 ...
- Fiddler抓取数据包分析案例
案例:利用Fiddler抓取苏宁易购网站数据包分析 抓包软件:Fiddler4 请求名字:www.suning.com 详细内容: 一.了解数据包区域的字段含义 图1数据包区域 #:顺序号,按照抓包的 ...
- Spring - 数据库开发概述
Spring 数据库开发 Spring 的 JDBC 模块负责数据库资源管理和镨误处理,大大简化了开发人员对数据库的操作,使得开发人员可以从繁琐的数据库操作中解脱出来,从而将更多的精力投入到编写业 ...
- 字符串中的count（）方法
描述 Python count() 方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. 语法 count()方法语法: str.count(sub, start= 0,e ...