学习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 总是用于网页的样式设置,但它并没有起到 ...
随机推荐
- 知名渗透测试利器分享 - Appscan下载
安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的" ...
- Maven详解（七）------ 创建Web工程以及插件原理
1.什么是 Maven 插件? 上一篇博客我们将了 Maven 的生命周期,我们知道 Maven 的核心是生命周期,生命周期指定了 Maven 命令执行的流程顺序.但是真正实现流程的工程是由插件来完成 ...
- Openfire分析之二：主干程序分析
引言 宇宙大爆炸,于是开始了万物生衍,从一个连人渣都还没有的时代,一步步进化到如今的花花世界. 然而沧海桑田,一百多亿年过去了-. 好复杂,但程序就简单多了,main()函数运行,敲个回车,一行Hel ...
- Openfire分析之一：Openfire与XMPP协议
引言 上帝说,要有光,于是就有了光. 有点玄. 如果将时光回溯无数岁月,到几百万年的蛮荒时代,人类史上第一次发生信息交换,会是什么样子?是转一下脑袋,还是眨一下眼? 但不管是什么形式,于是有了信息, ...
- Python 的经典入门书籍有哪些？
是不是很多人跟你说,学Python开发就该老老实实地找书来看,再配合死命敲代码?电脑有了,软件也有了,心也收回来了?万事俱备,唯独只欠书籍?没找到到合适的书籍?可以看看这些. 1.Python基础教程 ...
- 常用Linux操作指令
-------------------------------Linux目录------------------------------- /:根目录,一般根目录下只存放目录,在Linux下有且只有一 ...
- Docker打包 Asp.Net Core应用，在CentOS上运行
本文主要介绍下运用docker虚拟技术打包Asp.net core应用. Docker作为一个开源的应用容器引擎,近几年得到广泛的应用,使用Docker我们可以轻松实现应用的持续集成部署,一次打包,到 ...
- 二：搭建一个webpack3.5.5项目：建立项目的webpack配置文件
第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...
- Java之String、StringBuffer、StringBuilder
String.StringBuffer和StringBuilder的理解 这三个类学过已经有一段时间了,想通过这篇文章再将其复习一下,以求温故知新. 首先说一下三者各自的特性 String: Stri ...
- Project 8:利用递归算法求最大值
目标:用递归算法实现求一个数组中的最大元素. 样例输入 5 1 4 2 5 3 样例输出 5 #include <stdio.h> int max(int *,int); int main ...