学习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 总是用于网页的样式设置,但它并没有起到 ...
随机推荐
- Spring同mybatis整合讲义(事物)
1.mybatis的作用. 它是一个数据持久化的解决方案,它是一个ORM的框架. 2.Spring的作用? 备注:将本地jar包拷贝至本地的maven仓库里:oracle的jar包需自己发布到mave ...
- spring boot / cloud (八) 使用RestTemplate来构建远程调用服务
spring boot / cloud (八) 使用RestTemplate来构建远程调用服务 前言 上周因家里突发急事,请假一周,故博客没有正常更新 RestTemplate介绍: RestTemp ...
- hover用法实例
//hover,鼠标移入移出的另一种用法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- Informatica学习：1、安装介质的获取与安装
本文目标: 为方便学习Informatica工具,在个人电脑上部署Informatica Powercenter. 所用系统:win7 64位. Informatica安装包括服务器端.客户端安装两个 ...
- window.requestAnimationFrame() ,做逐帧动画，你值得拥有
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...
- 玩转PS路径，轻松画logo！
轻松画图标!教你一分钟玩转PS路径描边 推荐: cyRotel 2014/11/24 in PS 教程 & 设计文章 @Micu设计 :Photoshop的路径工具和钢笔工具 ...
- 老板让我们去陪睡!-It高管的焦虑
老板是我非常敬重的前领导之一,他的一些管理风格,也影响了后来我对技术团队的管理.就是这样一个非常令人尊敬的领导,为什么会有这么过分的要求,请允许我先卖个关子,接下来就会知道. 理想企业 什么是程序员理 ...
- 【Alpha阶段】第五次 Scrum Meeting
每日任务 1.本次会议为第 五次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在陆大召开,召开本次会议为20分钟,汇报自己的任务和讨论接下来的任务: 一.今日站立式会议照 二.每 ...
- 201521123107 《Java程序设计》第2周学习总结
第2周作业-Java基本语法与类库 1.本周学习总结 要点主要有: (1)String类 String类是本周的一个重点,String类的对象是不可变的,即String对象后就在内存中开辟了一个字符串 ...
- 201521123074 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 用Arrar ...