这是之前学习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布局的更多相关文章

  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. 【技术分享】手把手教你使用PowerShell内置的端口扫描器

    [技术分享]手把手教你使用PowerShell内置的端口扫描器 引言 想做端口扫描,NMAP是理想的选择,但是有时候NMAP并不可用.有的时候仅仅是想看一下某个端口是否开放.在这些情况下,PowerS ...

  2. Java入门（2） —— 变量详解、运算符、定义类和定义方法以及方法的调用

    1.变量 1.定义变量 1.声明的同时直接赋值 数据类型 变量名 = 值; 2.先声明,后赋值 声明: 数据类型 变量名; 赋值: 变量名 = 值; 2.数据类型 基本数据类型:4类8种 整数 --- ...

  3. SpringMVC简单入门

    SpringMVC简单入门 与大家分享一下最近对SpringMVC的学习,希望本文章能对大家有所帮助. 首先什么是SpringMVC? Spring 为展现层提供的基于MVC设计理念的优秀的Web框架 ...

  4. python爬虫之一---------豆瓣妹子图

    #-*- coding:utf-8 -*- __author__ = "carry" import urllib import urllib2 from bs4 import Be ...

  5. element-ui更换主题色

    1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...

  6. 最常见的三个排序(冒泡、直接插入、快速)的JS实现

    //冒泡排序function bubble(arr){ for(var i=0;i<arr.length;i++){ for(var j=0;j<arr.length-i;j++){ if ...

  7. JVM中锁优化，偏向锁、自旋锁、锁消除、锁膨胀

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt364 本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同 ...

  8. 制作Visual Studio 2017 (VS 2017) 离线安装包

    史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...

  9. 转：【Java集合源码剖析】Vector源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35793865   Vector简介 Vector也是基于数组实现的,是一个动态数组,其容量 ...

  10. Http协议详解，获取doPost，doGet提交的数据，以及编码问题

    一 什么是Http协议 http协议: 浏览器客户端 和  服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...