这是之前学习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. PHP导出excle图片与文字

    try { //CI框架引入PHPExcel $this->load->library('PHPExcel'); $objPHPExcel = new PHPExcel(); //图片处理 ...

  2. hdu 6096---String（AC自动机）

    题目链接 Problem Description Bob has a dictionary with N words in it.Now there is a list of words in whi ...

  3. 题目1522：包含min函数的栈

    #include <iostream> #include <cstdio> #include <stack> using namespace std; int ma ...

  4. sqlserver优化

    有些程序员在撰写数据库应用程序时,常专注于 OOP 及各种 framework 的使用,却忽略了基本的 SQL 语句及其「性能 (performance)优化」问题.版工曾听过台湾某半导体大厂的新进程 ...

  5. 从聚合数据请求菜谱大全接口数据，解析显示到ListView

  6. jQuery学习目录

    前面的话 目前来说,jQuery可能已经不再处于人们的话题中心.人们讨论的更多的是Vue.Angular和React.但是,jQuery的使用量依然广泛,据统计,它仍然是目前使用率最高的javascr ...

  7. 聊聊click延迟和点击穿透

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所 ...

  8. 玩转PS路径，轻松画logo！

    轻松画图标!教你一分钟玩转PS路径描边 推荐: cyRotel    2014/11/24    in PS 教程 & 设计文章    @Micu设计 :Photoshop的路径工具和钢笔工具 ...

  9. IPsec_VPN实现技术【转载】

    GRE Tunnel GRE Tunnel(General Routing Encapsulation 通用路由封装)是一种非常简单的VPN(Virtual Private Network 虚拟专用网 ...

  10. MiniProfiler工具

    MiniProfiler工具介绍   MiniProfiler是一款针对.NET, Ruby, Go and Node.js的性能分析的轻量级程序.可以对一个页面本身,及该页面通过直接引用.Ajax. ...