`
wanchong998
  • 浏览: 233403 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Extjs Grid 编辑

EXTSUNXMLSpringCSS 
阅读更多
//创建index.jsp
<%@page contentType="text/html; charset=GB2312" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Editor Grid Example</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

    <!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

    <script type="text/javascript" src="../ext/ext-all.js"></script>

    <script type="text/javascript" src="GroupingView.js"></script>
    <script type="text/javascript" src="edit-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="../ext/examples/grid/grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../ext/examples/examples.css" />
</head>
<body>
<!-- EXAMPLES -->
<script type="text/javascript" src="./ext/examples/examples.js"></script>
<h1>Editor Grid Example</h1>
<p>This example shows how to create a grid with inline editing.</p>
<p>Note that the js is not minified so it is readable.
See <a href="edit-grid.js">edit-grid.js</a>.</p>

<p>The data in the grid is loaded from <a href="plants.xml">plants.xml</a>.</p>

<!-- you must define the select box here,
as the custom editor for the 'Light' column will require it -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>

<option value="Sunny">Sunny</option>
</select>

<div id="editor-grid"></div>
</body>
</html>
//创建plants.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <plant>
    <common>Bloodroot</common>
    <botanical>Sanguinaria canadensis</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <price>2.44</price>
    <availability>03/15/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Columbine</common>
    <botanical>Aquilegia canadensis</botanical>
    <zone>3</zone>
    <light>Mostly Shady</light>
    <price>9.37</price>
    <availability>03/06/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Marsh Marigold</common>
    <botanical>Caltha palustris</botanical>
    <zone>4</zone>
    <light>Mostly Sunny</light>
    <price>6.81</price>
    <availability>05/17/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Cowslip</common>
    <botanical>Caltha palustris</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <price>9.90</price>
    <availability>03/06/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Dutchman's-Breeches</common>
    <botanical>Dicentra cucullaria</botanical>
    <zone>3</zone>
    <light>Mostly Shady</light>
    <price>6.44</price>
    <availability>01/20/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Ginger, Wild</common>
    <botanical>Asarum canadense</botanical>
    <zone>3</zone>
    <light>Mostly Shady</light>
    <price>9.03</price>
    <availability>04/18/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Hepatica</common>
    <botanical>Hepatica americana</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <price>4.45</price>
    <availability>01/26/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Liverleaf</common>
    <botanical>Hepatica americana</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <price>3.99</price>
    <availability>01/02/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Jack-In-The-Pulpit</common>
    <botanical>Arisaema triphyllum</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <price>3.23</price>
    <availability>02/01/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Mayapple</common>
    <botanical>Podophyllum peltatum</botanical>
    <zone>3</zone>
    <light>Mostly Shady</light>
    <price>2.98</price>
    <availability>06/05/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Phlox, Woodland</common>
    <botanical>Phlox divaricata</botanical>
    <zone>3</zone>
    <light>Sun or Shade</light>
    <price>2.80</price>
    <availability>01/22/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Phlox, Blue</common>
    <botanical>Phlox divaricata</botanical>
    <zone>3</zone>
    <light>Sun or Shade</light>
    <price>5.59</price>
    <availability>02/16/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Spring-Beauty</common>
    <botanical>Claytonia Virginica</botanical>
    <zone>7</zone>
    <light>Mostly Shady</light>
    <price>6.59</price>
    <availability>02/01/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Trillium</common>
    <botanical>Trillium grandiflorum</botanical>
    <zone>5</zone>
    <light>Sun or Shade</light>
    <price>3.90</price>
    <availability>04/29/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Wake Robin</common>
    <botanical>Trillium grandiflorum</botanical>
    <zone>5</zone>
    <light>Sun or Shade</light>
    <price>3.20</price>
    <availability>02/21/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Violet, Dog-Tooth</common>
    <botanical>Erythronium americanum</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>9.04</price>
    <availability>02/01/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Trout Lily</common>
    <botanical>Erythronium americanum</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>6.94</price>
    <availability>03/24/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Adder's-Tongue</common>
    <botanical>Erythronium americanum</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>9.58</price>
    <availability>04/13/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Anemone</common>
    <botanical>Anemone blanda</botanical>
    <zone>6</zone>
    <light>Mostly Shady</light>
    <price>8.86</price>
    <availability>12/26/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Grecian Windflower</common>
    <botanical>Anemone blanda</botanical>
    <zone>6</zone>
    <light>Mostly Shady</light>
    <price>9.16</price>
    <availability>07/10/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Bee Balm</common>
    <botanical>Monarda didyma</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>4.59</price>
    <availability>05/03/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Bergamot</common>
    <botanical>Monarda didyma</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>7.16</price>
    <availability>04/27/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Black-Eyed Susan</common>
    <botanical>Rudbeckia hirta</botanical>
    <zone>Annual</zone>
    <light>Sunny</light>
    <price>9.80</price>
    <availability>06/18/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Buttercup</common>
    <botanical>Ranunculus</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>2.57</price>
    <availability>06/10/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Crowfoot</common>
    <botanical>Ranunculus</botanical>
    <zone>4</zone>
    <light>Shade</light>
    <price>9.34</price>
    <availability>04/03/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Butterfly Weed</common>
    <botanical>Asclepias tuberosa</botanical>
    <zone>Annual</zone>
    <light>Sunny</light>
    <price>2.78</price>
    <availability>06/30/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Cinquefoil</common>
    <botanical>Potentilla</botanical>
    <zone>Annual</zone>
    <light>Shade</light>
    <price>7.06</price>
    <availability>05/25/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Primrose</common>
    <botanical>Oenothera</botanical>
    <zone>3 - 5</zone>
    <light>Sunny</light>
    <price>6.56</price>
    <availability>01/30/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Gentian</common>
    <botanical>Gentiana</botanical>
    <zone>4</zone>
    <light>Sun or Shade</light>
    <price>7.81</price>
    <availability>05/18/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Blue Gentian</common>
    <botanical>Gentiana</botanical>
    <zone>4</zone>
    <light>Sun or Shade</light>
    <price>8.56</price>
    <availability>05/02/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Jacob's Ladder</common>
    <botanical>Polemonium caeruleum</botanical>
    <zone>Annual</zone>
    <light>Shade</light>
    <price>9.26</price>
    <availability>02/21/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Greek Valerian</common>
    <botanical>Polemonium caeruleum</botanical>
    <zone>Annual</zone>
    <light>Shade</light>
    <price>4.36</price>
    <availability>07/14/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>California Poppy</common>
    <botanical>Eschscholzia californica</botanical>
    <zone>Annual</zone>
    <light>Sunny</light>
    <price>7.89</price>
    <availability>03/27/2006</availability>
    <indoor>false</indoor>
  </plant>
  <plant>
    <common>Shooting Star</common>
    <botanical>Dodecatheon</botanical>
    <zone>Annual</zone>
    <light>Mostly Shady</light>
    <price>8.60</price>
    <availability>05/13/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Snakeroot</common>
    <botanical>Cimicifuga</botanical>
    <zone>Annual</zone>
    <light>Shade</light>
    <price>5.63</price>
    <availability>07/11/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Cardinal Flower</common>
    <botanical>Lobelia cardinalis</botanical>
    <zone>2</zone>
    <light>Shade</light>
    <price>3.02</price>
    <availability>02/22/2006</availability>
    <indoor>true</indoor>
  </plant>
</catalog>

//创建edit-grid.js
Ext.onReady(function(){
  Ext.QuickTips.init();

  function formatDate(value){
    return value ? value.dateFormat('M d, Y') : '';
  };
  // shorthand alias
  var fm = Ext.form;

  // custom column plugin example
  var checkColumn = new Ext.grid.CheckColumn({
     header: "Indoor?",
     dataIndex: 'indoor',
     width: 55
  });

  // the column model has information about grid columns
  // dataIndex maps the column to the specific data field in
  // the data store (created below)
  var cm = new Ext.grid.ColumnModel([{
       id:'common',
       header: "Common Name",
       dataIndex: 'common',
       width: 220,
       editor: new fm.TextField({
         allowBlank: false
       })
    },{
       header: "Light",
       dataIndex: 'light',
       width: 130,
       editor: new Ext.form.ComboBox({
         typeAhead: true,
         triggerAction: 'all',
         transform:'light',
         lazyRender:true,
         listClass: 'x-combo-list-small'
      })
    },{
       header: "Price",
       dataIndex: 'price',
       width: 70,
       align: 'right',
       renderer: 'usMoney',
       editor: new fm.NumberField({
         allowBlank: false,
         allowNegative: false,
         maxValue: 100000
       })
    },{
       header: "Available",
       dataIndex: 'availDate',
       width: 95,
       renderer: formatDate,
       editor: new fm.DateField({
        format: 'm/d/y',
        minValue: '01/01/06',
        disabledDays: [0, 6],
        disabledDaysText: 'Plants are not available on the weekends'
      })
    },
    checkColumn
  ]);

  // by default columns are sortable
  cm.defaultSortable = true;

  // this could be inline, but we want to define the Plant record
  // type so we can add records dynamically
  var Plant = Ext.data.Record.create([
       // the "name" below matches the tag name to read, except "availDate"
       // which is mapped to the tag "availability"
       {name: 'common', type: 'string'},
       {name: 'botanical', type: 'string'},
       {name: 'light'},
       {name: 'price', type: 'float'},       // automatic date conversions
       {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
       {name: 'indoor', type: 'bool'}
    ]);

  // create the Data Store
  var store = new Ext.data.Store({
    // load using HTTP
    url: 'plants.xml',

    // the return will be XML, so lets set up a reader
    reader: new Ext.data.XmlReader({
         // records will have a "plant" tag
         record: 'plant'
       }, Plant),

    sortInfo:{field:'common', direction:'ASC'}
  });

  // create the editor grid
  var grid = new Ext.grid.EditorGridPanel({
    store: store,
    cm: cm,
    renderTo: 'editor-grid',
    width:600,
    height:300,
    autoExpandColumn:'common',
    title:'Edit Plants?',
    frame:true,
    plugins:checkColumn,
    clicksToEdit:1,

    tbar: [{
      text: 'Add Plant',
      handler : function(){
        var p = new Plant({
          common: 'New Plant 1',
          light: 'Mostly Shade',
          price: 0,
          availDate: (new Date()).clearTime(),
          indoor: false
        });
        grid.stopEditing();
        store.insert(0, p);
        grid.startEditing(0, 0);
      }
    }]
  });

  // trigger the data store load
  store.load();
});

Ext.grid.CheckColumn = function(config){
  Ext.apply(this, config);
  if(!this.id){
    this.id = Ext.id();
  }
  this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
  init : function(grid){
    this.grid = grid;
    this.grid.on('render', function(){
      var view = this.grid.getView();
      view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
  },

  onMouseDown : function(e, t){
    if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
      e.stopEvent();
      var index = this.grid.getView().findRowIndex(t);
      var record = this.grid.store.getAt(index);
      record.set(this.dataIndex, !record.data[this.dataIndex]);
    }
  },

  renderer : function(v, p, record){
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
  }
};


分享到：
| ActiveWidgets Grid 使用 很吊的Grid
评论
2 楼 wwwlike 2009-03-09  
加点注释不行啊
1 楼 liweisex 2008-09-07  
能不能贴出完整的来
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4.2 Grid单元格编辑

    Extjs4.2 Grid单元格编辑，包含日期控件，下拉框控件，同时可控制单元格是否有编辑权限。

    ExtJS Grid功能实现

    ExtJS 表格的功能实现，包括单元格编辑，数据的获取。

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    ExtJS_可编辑Grid进度条

    ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.

    extjs_dwr_grid 实例(含完整源码及说明)

    EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本) EXT 2 表格编辑控件示例(静态页面，与Java无关版本) Netbeans 6 开放文档团队在线通讯录(Ext + DWR + MySQL) DWR 检查注册用户名是否存在 模拟DWR 引擎通过反射调用...

    ExtJs GridPanel双击事件获得双击的行

    ExtJs GridPanel双击事件获得双击的行，双击行可以选中前面的checkbox，并获得行号

    ExtJs4.1 treegrid CRUD 读取、新增、修改、删除

    //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,acol){ this.editingPlugin.startEdit(node,acol); } ...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...

    extjs2.2.1

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    ext.net-extjs

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    EXTJS4.0 MVC 架构 GRID 应用

    基于EXT4.0 MVC 模式开发GRID DEMO 包括：GRID 分页、分组、排序、编辑等等常用功能 访问路径：http://localhost/Ext4Mvc/gridManager/gm.html

    EXTJS开发文档

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    EXTJS 3.3.1例子

    　再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格...

    extjs3.2 资源包文件

    再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    ExtJS(ajax框架) 4.2.1

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    extjs中form与grid交互数据(record)的方法

    首先在grid的tbar中定义编辑按钮：Js代码 代码如下:id:’editDataButton’, text:’编辑’, tooltip:’编辑’, iconCls:’edit’, handler: function(){ showeditPanel();} 再定义form： Js代码 代码如下:var ...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1　下载EXT发布包 1 1.2　如何查看EXT自带的API和示例 1 1.3　为什么有些示例必须放在服务器上 才能看到效果 2 1.4　Hello World 2 1.4.1　直接使用下载的发布包 2 1.4.2　在项目中使用EXT...

    可二次开发Extjs4.0通用后台管理系统源码完整大型项目ExtJS 4.2+Hibernate 4.1.7+SpringMVC

    2ExtJS富文本编辑器增加修改信息。 3ExtJS的HtmlEditor的图片文件上传插件。 4Grid列表和表单，包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5导入导出Excel数据，支持xlsx和xls文件。 ...

    Extjs中文文档.pdf

    　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

Magicbox
Global site tag (gtag.js) - Google Analytics