学习ExtJS的grid布局
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容。之后会发一个最近写的结合MVC项目的grid布局的案例。
上一篇关于ExtJS的学习资料什么的都已经更在上一篇了，这里只是对一些代码的记录。
【学习资料】（ExtJS4中的Grid、Tree、Form）http://www.cnblogs.com/niejunchan/p/4998512.html
【效果】
Array_Grid
Tree_Grid
【代码】
[Array_Grid的代码]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/Extjs/ext-all.js"></script>
<script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script src="Scripts/Extjs/ux/app.js"></script>
<link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!--<script type="text/javascript">
//测试上面js,css文件是否连接进来用的
Ext.onReady(function () {
Ext.Msg.alert("hh", "welcome");
var win = new Ext.Window({ title: "hello", width: , height: , html: '<h1>ok....just a test....</h1>' });
win.show();
});
</script>-->
<script type="text/javascript">
Ext.onReady(function () {
var userStore = Ext.create("Ext.data.Store", {
fields: ["account", "name", "sex", "age", "role"],
data: [
["zhanglei", "张磊", "男", "", "管理员"],
["liming", "黎明", "男", "", "主编"],
["liuying","刘颖","女","","内容编辑"]
]
}); Ext.create("Ext.grid.Panel", {
title: '多表头Grid',
margin: ,
width: ,
height: ,
border: true,
//添加左边的checkbox
selModel: {
type:"checkboxmodel"
},
store: userStore,//加载数据
columns: [{
text: "账号",
dataIndex: "account",
flex: ,
align:'center', }, {
text: "基本信息",
flex: ,
align: 'center',
columns: [{
text: '姓名',
dataIndex: 'name',
align:'center'
}, {
text: '性别',
dataIndex: 'sex',
align:'center'
}, {
text: '年龄',
dataIndex: 'age',
align:'center'
}]},
{
text: '角色',
dataIndex: 'role',
flex:,
align:'center'
}, ],
//增加分页控件
bbar: {
xtype: 'pagingtoolbar',
store: userStore,
displayInfo:true
},
renderTo:Ext.getBody()
}); });
</script> </head>
<body> </body>
</html>
[Tree_Grid的代码]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/Extjs/ext-all.js"></script>
<script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script src="Scripts/Extjs/ux/app.js"></script>
<link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!--<script type="text/javascript">
//测试上面js,css文件是否连接进来用的
Ext.onReady(function () {
Ext.Msg.alert("hh", "welcome");
var win = new Ext.Window({ title: "hello", width: , height: , html: '<h1>ok....just a test....</h1>' });
win.show();
});
</script>-->
<script type="text/javascript">
Ext.onReady(function () {
Ext.define("DeptModel", {
extend: "Ext.data.TreeModel",
fields: [
"DeptName","Leader"
]
}); var store = Ext.create("Ext.data.TreeStore", {
model: "DeptModel",
root: {
expanded: true,
DeptName: "总公司",
Leader: "Lin",
children: [
{ DeptName: "技术部", Leader: "xia", leaf: true },
{ DeptName: "财务部", Leader: "Li", leaf: true }
]
}
});
var viewport = Ext.create("Ext.container.Viewport", {
layout: "auto",
items: [{
xtype: "treepanel",
itemId: "tree",
width: ,
height: ,
store: store,
lines: false,
useArrows: true,
multiSelect:true,
columns: [
{
xtype: 'treecolumn',
text: '部门',
dataIndex: "DeptName",
flex: ,
sortable:false
},
{
text: "领导",
dataIndex: "Leader",
flex: ,
sortable:true }, {
xtype: 'checkcolumn',
header: '选择',
dataIndex: 'done',
flex: ,
stopSelection: false,
menuDisabled:true,
}, {
xtype: 'actioncolumn',
flex: ,
items: [ {
icon: 'Content/images/user_edit.png',//需要自己把图片弄进去才有 tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {//这里的方法只是一个弹出信息，可替换成具体实现
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Edit', rec.get('Leader'));
}
}, {
icon: 'Content/images/user_delete.png', tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Delete', rec.get('Leader'));
}
}
]
}
],
bbar: {
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}, }] }); });
</script>
</head>
<body> </body>
</html>
学习ExtJS的grid布局的更多相关文章
- CSS学习笔记：grid布局
目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- extjs学习（关于grid）
1.想要调整某一列在表格中的顺序,可以使用mapping(索引是从0开始的) var store = new Ext.data.ArrayStore({ data:data, fields:[ {na ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
- [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel
继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
随机推荐
- # hadoop入门第六篇:Hive实例
前言 前面已经讲了如何部署在hadoop集群上部署hive,现在我们就做一个很小的实例去熟悉HIVE QL.使用的数据是视频播放数据包括视频编码,播放设备编码,用户账号编码等,我们在这个数据基础上 ...
- poj3928 la4329 pingpong
Description N(3<=N<=20000) ping pong players live along a west-east street(consider the street ...
- [2016-09-09]IIS站点发布、同步和备份工具MSdeploy(WebDeploy)介绍
前提准备:完整安装Microsoft Web Deploy 3 下载页面:WebDeploy_amd64_zh-CN.msi msdeploy 同步站点 命令所在目录C:\Program Files\ ...
- Day3 - Linux系统安装_Centos6.9
第1章 虚拟机安装 1.1 镜像下载 1.1.1 新版本下载 http://mirrors.aliyun.com #阿里云官方镜像站点 1.1.2 旧版本下载 http://vault.cento ...
- eclipse如何把多个项目用不同的文件夹分隔开
我们有时候用eclipse时,发现Project Explorer下有非常多的项目,如果大部分不用了还好,我们可以从eclipse上删掉,但是如果还经常会用到的话,删掉了,每次用的时候,还得再重新导入 ...
- 循环checked表单 元素
var poject_Array = ""; $('input[name="yearCardPoject"]:checked').each ...
- idea 给maven项目添加依赖（二）
这里接着上一篇来 我们观察目录发现有两个pom.xml(project object module) 项目是里面的,所以外面的先不管它. 点击里面的pom.xml 1.在<url>节点下面 ...
- 跨浏览器tab页的通信解决方案尝试
目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互.其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议.域名和端口),也可以是跨域的. 要实现这个特殊的功能,单单使用 ...
- Java学习5——标识符和关键字
标识符: 1.Java对各种变量.方法和类等要素命名时使用的字符串序列称为标识符.凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 2.Java标识符命名规则: 标识符由字母.下划线&quo ...
- 201521123006 《Java程序设计》 第2周学习总结
1. 本周学习总结 本周进一步学习了java,了解了java编程中一些特定的用法,比如:在编译程序时可以使用import来减少输入包名称.本周还学会了使用枚举类(enum Choice{fab,sor ...