学习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 总是用于网页的样式设置,但它并没有起到 ...
随机推荐
- jQuery圣诞雪花
<script type="text/javascript"> $(function(){ var d="<div class='y_snow'> ...
- python自学1——代码优化1
优化了上次的代码,请求方式可接收get和post两种,代码中对两种方式做了判断. 测试结果中提取了测试用例的名称.请求返回的状态.请求的时间. #coding:utf-8 import xlrd im ...
- Wifi长距离传输
本人从事Linux驱动开发.现在要实现两端之间wifi长距离(1km左右)传输视频数据(全向天线)的功能.目前用的平台是Atheros AR9342.我在网上查到一些资料是关于禁用802.11的CSM ...
- 设置Linux环境变量的方法与区别（Ubuntu）
设置 Linux 环境变量可以通过 export 实现,也可以通过修改几个文件来实现,有必要弄清楚这两种方法以及这几个文件的区别. 通过文件设置 Linux 环境变量 首先是设置全局环境变量, ...
- Ubuntu部署可视化爬虫Portia2.0环境
部署portia环境官方文档给出的方法太过简单,对于初学者来说是很难根据那一两行字成功部署portia环境的.对于部署portia这只可爱的爬虫的过程还是有很多坑的,主要写一篇portia2.0版本的 ...
- Apple公司开发者账号申请(2017包含邓白氏码申请)
1.首先看需要那种账号 2.这个需要的是公司开发者账号,首先我们注册一个普通apple账号 打开网址 https://developer.apple.com 进入点击Account 进入登录页面,点击 ...
- Java IO包装流如何关闭
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt381 问题: (1)JAVA的IO流使用了装饰模式,关闭最外面的流的时候会自 ...
- java.lang.ClassNotFoundException: com.sun.jna.Native
在使用sprng boot加elasticsearch的时候遇到 java.lang.ClassNotFoundException: com.sun.jna.Native,百度之后要我导入 <d ...
- Java基础学习 —— 对象的克隆
对象的克隆分为对象的浅克隆和深克隆 一.对象的浅克隆 注意事项: 1.如果一个对象需要调用clone的方法克隆,那么该对象必须要实现Cloneable接口 2.Cloneable对象只是一个标识对象, ...
- JavaSE（十）集合之List
前面一篇的corejava讲的是集合的概述,这一篇我将详细的和大家讲解一下Collection下面的List.set.queue这三个子接口.希望大家能得到提升. 一.List接口 1.1.List接 ...