这是之前学习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. 【渗透课程】前言-揭开Web渗透与安全的面纱（必看）

    服务器是怎么被入侵的 攻击者想要对一台计算机渗透必须具备以下条件: 1.服务器与客户端能够正常通讯 (服务器是为客户端提供服务的) 2.服务器向客户端提供的权限(服务)或者说是端口. 服务端所提供的服 ...

  2. hdu3713 Double Maze

    Problem Description Unlike single maze, double maze requires a common sequence of commands to solve ...

  3. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  4. C语言：min和max头文件

    转自:http://www.cppblog.com/jince/archive/2010/09/14/126600.html min和max头文件 虽然说求最大值最小值函数在哪个头文件下并不是非常重要 ...

  5. C#中MessageBox.Show()方法详解

    1. // 摘要: // 显示具有指定文本的消息框. // // 参数: // text: // 要在消息框中显示的文本. // // 返回结果: // System.Windows.Forms.Di ...

  6. php 数据访问练习：租房查询页面

    <html> <head> <title></title> <meta charset="UTF-8"/> <li ...

  7. Linq--一个集合中查找另一个集合，需熟悉这种写法

    //获取科室与病区授权的护士信息        public List<SYS_ZGKSBQDYK> GetUserWardMapByWardCode(string wardCode)   ...

  8. 定时调度框架：Quartz.net

    Quartz.net相关概念 经常出现场景:定时轮询数据库同步,定时邮件通知,定时处理数据等 Scheduler (计划者或调度器) Job (工作对象):将要定时执行的任务代码写到实现Ijob接口的 ...

  9. vue学习日志（一）：vue的优势

    vue的中文官方文档里面有对比其他框架的具体介绍,这里只是做一个概括总结: 1,在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染.你可以理解为每一个组 ...

  10. 非对话框程序创建组合框Groupbox

    对话框程序中的控件,例如button.groupbox之类,是直接放上去的.当然,除groupbox以外,在MFC中其他控件都有相对应的类,以支持程序员在非对话框程序中动态创建控件.而唯独好像没有gr ...