这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容。之后会发一个最近写的结合MVC项目的grid布局的案例。

上一篇关于ExtJS的学习资料什么的都已经更在上一篇了，这里只是对一些代码的记录。

【学习资料】（ExtJS4中的Grid、Tree、Form）http://www.cnblogs.com/niejunchan/p/4998512.html

【效果】

Array_Grid

Tree_Grid

【代码】

[Array_Grid的代码]

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <script src="Scripts/Extjs/ext-all.js"></script>
  8.     <script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
  9.     <script src="Scripts/Extjs/ux/app.js"></script>
  10.     <link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
  11.     <!--<script type="text/javascript">
  12.         //测试上面js,css文件是否连接进来用的
  13.         Ext.onReady(function () {
  14.             Ext.Msg.alert("hh", "welcome");
  15.             var win = new Ext.Window({ title: "hello", width: , height: , html: '<h1>ok....just  a  test....</h1>' });
  16.             win.show();
  17.         });
  18.     </script>-->
  19.     <script type="text/javascript">
  20.         Ext.onReady(function () {
  21.             var userStore = Ext.create("Ext.data.Store", {
  22.                 fields: ["account", "name", "sex", "age", "role"],
  23.                 data: [
  24.                     ["zhanglei", "张磊", "男", "", "管理员"],
  25.                     ["liming", "黎明", "男", "", "主编"],
  26.                     ["liuying","刘颖","女","","内容编辑"]
  27.                 ]
  28.             });
  29.  
  30.             Ext.create("Ext.grid.Panel", {
  31.                 title: '多表头Grid',
  32.                 margin: ,
  33.                 width: ,
  34.                 height: ,
  35.                 border: true,
  36.                 //添加左边的checkbox
  37.                 selModel: {
  38.                     type:"checkboxmodel"
  39.                 },
  40.                 store: userStore,//加载数据
  41.                 columns: [{
  42.                     text: "账号",
  43.                     dataIndex: "account",
  44.                     flex: ,
  45.                     align:'center',
  46.  
  47.                 }, {
  48.                     text: "基本信息",
  49.                     flex: ,
  50.                     align: 'center',
  51.                     columns: [{
  52.                         text: '姓名',
  53.                         dataIndex: 'name',
  54.                         align:'center'
  55.                     }, {
  56.                         text: '性别',
  57.                         dataIndex: 'sex',
  58.                         align:'center'
  59.                     }, {
  60.                         text: '年龄',
  61.                         dataIndex: 'age',
  62.                         align:'center'
  63.                     }]},
  64.                      {
  65.                          text: '角色',
  66.                          dataIndex: 'role',
  67.                          flex:,
  68.                          align:'center'
  69.                      }, ],
  70.                 //增加分页控件
  71.                 bbar: {
  72.                     xtype: 'pagingtoolbar',
  73.                     store: userStore,
  74.                     displayInfo:true
  75.                 },
  76.                 renderTo:Ext.getBody()
  77.             });
  78.  
  79.         });
  80.     </script>
  81.  
  82. </head>
  83. <body>
  84.  
  85. </body>
  86. </html>

[Tree_Grid的代码]

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <script src="Scripts/Extjs/ext-all.js"></script>
  8.     <script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
  9.     <script src="Scripts/Extjs/ux/app.js"></script>
  10.     <link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
  11.     <!--<script type="text/javascript">
  12.         //测试上面js,css文件是否连接进来用的
  13.         Ext.onReady(function () {
  14.             Ext.Msg.alert("hh", "welcome");
  15.             var win = new Ext.Window({ title: "hello", width: , height: , html: '<h1>ok....just  a  test....</h1>' });
  16.             win.show();
  17.         });
  18.     </script>-->
  19.  <script type="text/javascript">
  20.      Ext.onReady(function () {
  21.          Ext.define("DeptModel", {
  22.              extend: "Ext.data.TreeModel",
  23.              fields: [
  24.                  "DeptName","Leader"
  25.              ]
  26.          });
  27.  
  28.          var store = Ext.create("Ext.data.TreeStore", {
  29.              model: "DeptModel",
  30.              root: {
  31.                  expanded: true,
  32.                  DeptName: "总公司",
  33.                  Leader: "Lin",
  34.                  children: [
  35.                      { DeptName: "技术部", Leader: "xia", leaf: true },
  36.                      { DeptName: "财务部", Leader: "Li", leaf: true }
  37.                  ]
  38.              }
  39.          });
  40.          var viewport = Ext.create("Ext.container.Viewport", {
  41.              layout: "auto",
  42.              items: [{
  43.                  xtype: "treepanel",
  44.                  itemId: "tree",
  45.                  width: ,
  46.                  height: ,
  47.                  store: store,
  48.                  lines: false,
  49.                  useArrows: true,
  50.                  multiSelect:true,
  51.                  columns: [
  52.                      {
  53.                          xtype: 'treecolumn',
  54.                          text: '部门',
  55.                          dataIndex: "DeptName",
  56.                          flex: ,
  57.                          sortable:false
  58.                      },
  59.                      {
  60.                          text: "领导",
  61.                          dataIndex: "Leader",
  62.                          flex: ,
  63.                          sortable:true
  64.  
  65.                      }, {
  66.                          xtype: 'checkcolumn',
  67.                          header: '选择',
  68.                          dataIndex: 'done',
  69.                          flex: ,
  70.                          stopSelection: false,
  71.                          menuDisabled:true,
  72.                      }, {
  73.                          xtype: 'actioncolumn',
  74.                          flex: ,
  75.                          items: [
  76.  
  77.                              {
  78.                                 icon: 'Content/images/user_edit.png',//需要自己把图片弄进去才有
  79.  
  80.                                  tooltip: 'Edit',
  81.                                  handler: function (grid, rowIndex, colIndex) {//这里的方法只是一个弹出信息，可替换成具体实现
  82.                                      var rec = grid.getStore().getAt(rowIndex);
  83.                                      Ext.MessageBox.alert('Edit', rec.get('Leader'));
  84.                                  }
  85.                              }, {
  86.                                  icon: 'Content/images/user_delete.png',
  87.  
  88.                                  tooltip: 'Delete',
  89.                                  handler: function (grid, rowIndex, colIndex) {
  90.                                      var rec = grid.getStore().getAt(rowIndex);
  91.                                      Ext.MessageBox.alert('Delete', rec.get('Leader'));
  92.                                  }
  93.                              }
  94.                          ]
  95.                      }
  96.                  ],
  97.                  bbar: {
  98.                      xtype: 'pagingtoolbar',
  99.                      store: store,
  100.                      displayInfo: true
  101.                  },
  102.  
  103.              }]
  104.  
  105.          });
  106.  
  107.      });
  108.  </script>
  109. </head>
  110. <body>
  111.  
  112. </body>
  113. </html>

学习ExtJS的grid布局的更多相关文章

  1. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

  2. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  3. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  4. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  5. extjs学习（关于grid）

    1.想要调整某一列在表格中的顺序,可以使用mapping(索引是从0开始的) var store = new Ext.data.ArrayStore({ data:data, fields:[ {na ...

  6. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

  7. [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel

    继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...

  8. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  9. CSS Grid布局指南

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

随机推荐

  1. dbUtils的基本使用

    dbUtils是对JDBC的完全封装,只需要导入连接池,添加sql语句,dbUtils就可以返回各种封装形式的结果集. 如果纯手动的话,在DAO层使用JDBC查询一个语句的话,需要以下几步: 1创建C ...

  2. mysql存储过程 基本语法

    话不多说 一.MySQL 创建存储过程 "pr_add" 是个简单的 MySQL 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b& ...

  3. Linux的vi常用命令详解

    1.vi的基本概念  基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下:   ...

  4. Spring-MVC请求参数值和向页面传值

    读取请求参数值 方式一:通过HttpServletRequest req做参数 DispatcherServlet在调用处理的方法之前,利用Java反射分析方法的结构,通过分析,将req对象传过来 方 ...

  5. TP5.0实现无限极回复功能

    最近做项目的时候用到了评论回复,使用ThinkPHP5.0框架做回复碰到了一些问题,简单总结一下.(李昌辉) 1.首先是数据表的设计: create table zy_huifu ( code int ...

  6. django 5 form1

    ---------------------Form表单验证(用户请求验证+生成HTML标签) 示例:用户管理 a. 添加用户页面 - 显示HTML标签 - 提交:数据验证 - 成功之后保存 - 错误显 ...

  7. Mock Server 入门

    Mock Server介绍 什么是mock ? 我在去年的时候介绍一篇幅 python mock的基本使用,http://www.cnblogs.com/fnng/p/5648247.html 主要是 ...

  8. none，hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  9. Seesion工作原理

    session的工作原理一.术语session 在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相 ...

  10. 九度OJ 1006 ZOJ

    #include <iostream> #include <string> using namespace std; int getO(string str,int & ...