今天在家休息，年假不用就作费啊。

看了几部香港老电影，陪爸爸看了勇士占奇才，

然后，测试了一下EXTJS未完的内容，

在京东上订了七本历史普及书，近两百块。。：）

搞定。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <style type="text/css">
      #uses the following css:
      .red-row{ background-color: #F5C0C0 !important; }
      .yellow-row{ background-color: #FBF8BF !important; }
      .green-row{ background-color: #99CC99 !important; }
    </style>

    <script type="text/javascript">
    Ext.onReady(function(){
      function rendererSex(value){
        if (value == 'male') {
          return "<span style='color:red;font-weight: bold;'>男</span>";
        }else {
          return "<span style='color:green;font-weight: bold;'>女</span>";
        }
      };

      function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){
        var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
        "这个单元格的值为: " + value + "\\n" +
        "这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +
        "这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" +
        "这是第" + rowIndex + "行\\n" +
        "这是第" + columnIndex + "列\\n" +
        "这个表格对应的Ext.data.Store在这里： " + store + "， 随便用吧." +
        "\")'>"
        return str;
      }
      function rendererMotif(data, cell, record, rowIndex, columnIndex, store) {
        var value = record.get('color');
        cell.style = "background-color: " + value;
        return data;
      }

      var sm = new Ext.selection.CheckboxModel({stringSelect: true});

      var columns =[
        new Ext.grid.RowNumberer(),
        {header: '编号', dataIndex: 'id', width:80, sortable: false},
        {header: '名称', dataIndex: 'name', width:180},
        {header: '性别', dataIndex: 'sex', renderer: rendererSex, width:120},
        {header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width:400},
        {header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
        {header: 'color', dataIndex: 'color', renderer: rendererMotif, width:200}
      ];

      var data = [
        ['1', 'name1', 'male', '2017-01-15T02:58:04', 'descn1', '#FBF8BF'],
        ['2', 'name2', 'female', '2005-01-15T02:58:04', 'descn2', '#F5C0C0'],
        ['3', 'name3', 'male', '2017-06-15T02:58:04', 'descn3', '#99CC99'],
        ['4', 'name4', 'female', '2017-01-09T02:58:04', 'descn4', '#FBF8BF'],
        ['5', 'name5', 'male', '2017-12-15T02:58:04', 'descn5', '#F5C0C0']
      ];

      var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
          {name: 'name', mapping: 1},
          {name: 'sex', mapping: 2},
          {name: 'id', mapping: 0},
          {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s', mapping: 3},
          {name: 'descn', mapping: 4},
          {name: 'color', mapping: 5}
        ]
      });

      /*
      var store = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({url: 'source.html'}),
        reader: new Ext.data.ArrayReader({}, [
          {name: 'id'},
          {name: 'name'},
          {name: 'descn'}
        ]),
        fields: [
          {name: 'name', mapping: 1},
          {name: 'id', mapping: 0},
          {name: 'descn', mapping: 2}
        ]
      });
      */
      store.load();
      var grid = new Ext.grid.GridPanel({
        enableColumnMove: false,
        enableColumnResize: true,
        stripeRows: true,
        autoHeight: true,
        loadMask:true,
        forceFit: true,
        renderTo: 'grid',
        store: store,
        columns: columns,
        selModel: sm,
        bbar: new Ext.PagingToolbar({
          pageSize: 3,
          store: store,
          displayInfo: true,
          displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
          emptyMsg: '没有记录'
        }),
        viewConfig: {
          enableRowBody: true,
          columnsText:　'显示的列',
          sortAscText: '升序',
          getRowClass: function(record, rowIndex, p, ds) {
            var cls = 'white-row';
            switch (record.data.color) {
              case '#FBF8BF' :
                cls = 'yellow-row';
                break;
              case '#99CC99' :
                cls = 'green-row';
                break;
              case '#F5C0C0' :
                cls = 'red-row';
                break;
            }
            return cls;
          }
        }
      });

      Ext.get('remove').on('click', function(){
        store.remove(store.getAt(1));
        grid.view.refresh();
      })

      var tree = new Ext.tree.TreePanel({
        store: new Ext.data.TreeStore({
          root: {
            text: '我是根',
            children: [{
              text: '我是根的第一个枝子',
              children: {
                text: '我是根的第一个枝子的第一个叶子',
                leaf: true
              }
            },{
              text: '我是根的第一个叶子',
              leaf: true
            }]
          }
        })
      });

      tree.render('tree');

    });
    </script>
</head>
<body style="margin: 20px">
  <div id='grid' style="width: 800px"></div>
  <button id='remove'>删除第二行</button>

  <div id="tree"></div>
</body>
</html>

　　

ExtJs之Ext.grid.GridPanel（部分未完）的更多相关文章

  1. ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案

    今天遇到grid复制的问题,在网上找到了一个解决办法,只需改下CSS和JS,给大家分享一下: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dy_paradise/a ...

  2. 【编程技巧】EXTJS中Ext.grid.GridPanel配置项autoExpandColumn的使用方法

    autoExpandColumn的作用是自动伸展,占满剩余区域.一般使用在列比较少,并且大多数列都比较窄,有一列比较宽的情况下,当然什么时候使用,还是得按照实际情况确定. 使用的时候主要有三点要注意的 ...

  3. Ext.grid.GridPanel属性及方法等

    1.Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未 ...

  4. Ext.grid.GridPanel的属性

    1.Ext.grid.GridPanel     主要配置项:          store:表格的数据集          columns:表格列模式的配置数组,可自动创建ColumnModel列模 ...

  5. [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

  6. Ext.grid.GridPanel数据转json

    var count = docAdGrid.getStore().getCount(); var jsonArray = []; for (var i = 0; i < count; i++) ...

  7. ExtJs4.2.1中的Ext.grid.GridPanel选择行回车事件

    网上大多说的是“rowdblclick” 其实是“itemdblclick” 这个东西坑了我一上午.

  8. [转] Ext Grid （ExtJs）上的单击以及双击事件

    例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...

  9. Ext4.0.7使用Ext.grid.ColumnModel报错：TypeError: Ext.grid.Model is not a constructor

    代码如下: Ext.onReady(function(){ //定义列 var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'i ...

随机推荐

  1. c programs

  2. pair类型 这次遇到了，记录下来，方便彼此xue习

    首先,这个pair类型是在头文件utility.h中. 一个piar保存两个数据成员,是用来生成特定类型的模板,当创建一个pair时,我们必须提供两个类型名,pair的数据成员将具有对应的类型,两个类 ...

  3. Django day15 (二) csrf的 跨站请求伪造 与 局部禁用 , 局部使用

    一:  csrf 的跨站请求伪造 二: csrf 的局部禁用 , 局部使用

  4. 认识JS的基础对象，定义对象的方法

    JS的基础对象: 1.window       //窗口对象 2.document   //文档对象 3.document.documentElement      //html对象 4.docume ...

  5. # Nginx设置浏览器缓存

    配置语法 在location或if段里,来写. 格式 expires 30s; expires 30m; expires 2h; expires 30d; (注意:服务器的日期要准确,如果服务器的日期 ...

  6. Redis 字符串结构和常用命令

    字符串是 Redis 最基本的数据结构,它将以一个键 和一个值 储存在 Redis 内部. 字符串的一些基本命令 命令 说明 备注 set key value 设置键值对 最常用的写入命令 get k ...

  7. CentOS 安装dotNetCore

    如果要在CentOS上运行.net Core程序,必须安装.net Core Sdk 具体安装 方法,可以参考微软官方站点说明,非常详细: 1)百度搜索 .Net Core 2)先择CentOS版本: ...

  8. 子线程更新UI

    https://www.cnblogs.com/joy99/p/6121280.html

  9. 算法之dfs篇

    dfs算法是深度搜索算法.从某一节点开始遍历直至到路径底部,如果不是所寻找的,则回溯到上个节点后,再遍历其他路径.不断重复这个过程.一般此过程消耗很大,需要一些优化才能保持算法的高效. hdu1010 ...

  10. 【Oracle】OGG（Oracle GoldenGate）简介及搭建过程

    GoldenGate公司简介 GoldenGate公司专注于数据同步领域,是实现数据同步技术的领导者.至2007年,在全球35个国家售出超过2000个许可证,客户分布在政府.银行.电信.证券.传媒.医 ...