这是之前学习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. 将指定目录中的txt文件转化成excel文件

    #!/usr/bin/env python#coding:utf-8import reimport osimport globimport xlwtimport sysdir=r"F:\te ...

  2. Nexus私服搭建使用及发布jar包到私服上供团队其他成员使用

    1.下载maven解压到指定目录,并配置环境变量 M2_HOME为maven解压目录 2.path中增加 %M2_HOME%\bin, 并确认 mvn -v 正确 3.下载nexus http://w ...

  3. Struts2流程分析与工具配置

    1. 运行流程 请求 -- StrutsPrepareAndExecuteFilter 核心控制器 -– Interceptors 拦截器(实现代码功能 ) -– Action 的execuute - ...

  4. python自学1——接口测试

    尝试写了一个简单的接口测试,基于Python3.4,主要用到了Python读取excel以及requests库的知识,也算是对这段时间Python基础知识学习的一个巩固吧. 因为还没有学习到Pytho ...

  5. Redis基本数据类型

    -------------------Redis基本数据类型------------------- 1.String 字符串     1.概念         1.String 是redis最基本的类 ...

  6. SVN 通过IIS设置反向代理访问

    原因 一个字,穷,没办法,只有一台机器 要当测试服务器还要做源码管理. 解决办法 通过IIS配置反向代理访问SVN,给SVN访问的HTTPS绑定上域名,就可以正常访问了. 1.修改SVN配置 把SVN ...

  7. Java8 Stream简介

    Stream是Java 8新增的重要特性, 它提供函数式编程支持并允许以管道方式操作集合. 流操作会遍历数据源, 使用管道式操作处理数据后生成结果集合, 这个过程通常不会对数据源造成影响. lambd ...

  8. Java jdk 快速配置

    JAVA_HOME C:\Program Files\Java\jdk1.8.0_92   Path %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;   CLASSPATH ...

  9. Java设计模式之-------->"代理模式"

    01.什么是代理模式? 解析:代理(Proxy):代理模式的主要作用是为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不想或者不能直接引用另一个对象, 而代理对象可以在客户端和目标 ...

  10. c# List集合中First、Last、Single方法使用

    操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...