这是之前学习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. fatal error LNK1201:写入程序数据库“***.pdb”时出错；请检查是否是磁盘空间不足、路径无效或权限不够

    问题很简单,是因为你的程序正在运行,或者windbg工具在执行dump文件,文件被占用,所以无法写入:

  2. Django连接mysql数据库

    1.app中对应的models.py配置相关表结构信息 from django.db import models class Question(models.Model): question_text ...

  3. XMind入门教程

    最近在总结一些框架知识的时候,总找不到一款好的软件来画流程图,后来在网上查找这方面的东西,找到了 XMind,发现用来画思维导图还挺好的,看起来思路清晰,美观.那么便将使用的一些经验分享给大家. 1. ...

  4. 公司python入职培训流程

     时间分为4周,全部自学,仅提供大纲.适用于Web方向:1.Week1:读完<简明Python教程>,适应Python开发环境2.Week2:写个爬虫,需要深入了解re.urllib2.s ...

  5. Apache Camel之FTP组件学习

    写在最前面 哎,最近提了离职,手头的活也基本上清理的差不多了.想着这个把月可以舒服的晃悠晃悠的离开,但是运维的小伙伴总是不架势,走之前还是提了个新需求. 先说下需求吧,我们的系统概括的讲就是一个接口系 ...

  6. Java面试系列之HashMap大扫盲汇总

    PS:整理的稍微有点急,不足之处,望各路道友指正,List相关可以查看前一篇随笔! HashMap的工作原理是近年来常见的Java面试题,几乎每个Java程序员都知道HashMap,都知道哪里要用Ha ...

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

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

  8. None是什么？

    None是什么,是空,就是空即是色,色即是空.是一个真的很特别的值,下面比较了下 0,True,False (python 的比較) >>> None == 0False>&g ...

  9. IOS学习【VMware 12 安装 Mac OS X 10.11】-Day1

    1.下载安装VMware 12 pro  (32位不能安装) 虚拟机 VM12密钥 5A02H-AU243-TZJ49-GTC7K-3C61N 2.unlock206 用于VMware 12识别tac ...

  10. 基于NIOS-II的示波器：PART2 界面动态显示功能

    本文所有的硬件基础以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. version 0.2 界面动态显示功能 界面显示功能原理 显示波形有如下两个方案: 每一帧直接重绘显示界面,再显示下一帧图形 ...