`
wanchong998
  • 浏览: 236081 次
  • 性别: 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  
能不能贴出完整的来
发表评论

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

相关推荐

    extjs grid

    EXTJS Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，使得用户可以高效地管理和处理数据。EXTJS 4.2.1是EXTJS的一个稳定版本，它包含了多项改进和新特性，以提升用户体验和开发者的工作效率。 在EXTJS ...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件，它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用，因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    给Extjs的GridPanel增加“合计”行

    - 首先，我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑，以便在表格底部插入合计行。 - 在`GridSummary.js`文件中，我们可以定义这个类，并重写`onRender`方法，...

    ExtJs grid多选时获取选中的所有值

    ### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中，ExtJs 是一款非常强大的JavaScript框架，它能够帮助开发者快速构建复杂的用户界面。其中，Grid Panel（简称 Grid）是ExtJs中最常用的一个...

    EXTJS Grid总结例子

    EXTJS Grid提供了丰富的交互功能，如行选择、行编辑、行删除等。Selection Model支持多种模式，如SINGLE、MULTI和SIMPLE，通过`selType`配置选择。 八、高级特性 EXTJS Grid还支持行拖放、锁定列、列重排、嵌套Grid...

    Extjs Grid 扩展实例

    Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid功能的实践案例，通过这个实例，我们可以学习到如何在原有Grid的基础上进行自定义...

    ExtJS_grid.rar_Grid javascript_extjs grid

    ExtJS Grid是一款强大的JavaScript组件，用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发，是Ext JS库的核心部分，广泛应用于企业级应用的前端开发，提供丰富的功能和高度的可定制性。这个"ExtJS_grid...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...

    Extjs动态GRID

    EXTJS允许将Grid与表单控件集成，使得Grid中的数据可以直接编辑。通过设置`editable`属性或者使用`cellEditing`插件，可以在Grid的单元格内直接编辑数据。同时，Grid也可以和FormPanel结合，用于数据的输入和验证。 ...

    ExtJS_可编辑Grid进度条

    在“ExtJS_可编辑Grid进度条”这个主题中，我们将深入探讨如何在Grid组件中实现可编辑的进度条功能，以及这一功能的实现原理和应用场景。 首先，我们要理解Grid的基本概念。Grid在ExtJS中是一个表格视图，用于展示...

    静态EXTJS GRID

    2. **Column Model**：EXTJS Grid的列模型定义了列的属性，包括字段名、宽度、对齐方式、可编辑性等。如果列显示异常，可能是Column Model的配置有误。检查每个列的配置，确保字段名正确对应数据源中的字段。 3. **...

    extjs grid.panel 项目 源码

    在基于ExtJS Form表单的项目中，Grid Panel通常用于显示和编辑由Form表单收集或处理的数据。 源码分析可以从以下几个方面展开： 1. **组件创建**：首先，我们需要了解如何创建一个Grid Panel。这通常涉及到定义...

    ExtJS Grid功能实现

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

    ExtJs6.5Grid列表导出(包含样式)

    Grid是一个可配置的组件，用于显示数据集并提供交互式功能，如排序、筛选和编辑。它的核心组成部分包括Store（存储数据）、Model（定义数据字段）和Columns（定义列的显示方式）。 要实现导出功能，我们需要关注...

    EXTJS4 表格GRID示例

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

    Extjs Grid+apsx+json Demo

    ExtJS Grid是一款强大的JavaScript数据网格组件，常用于构建数据密集型Web应用，提供丰富的功能，如排序、分页、过滤、编辑等。在"Extjs Grid+asp.net+json Demo"中，我们将探讨如何结合ExtJS Grid、ASP.NET以及JSON...

    extjs表格Grid比较全面的功能

    ExtJS Grid提供行编辑器插件，使得用户可以直接在表格中编辑单元格。同时，可以将Grid与表单组件结合，创建复杂的数据输入界面。 7. **选择模式（Selection Models）** Grid有多种选择模式，如单选、多选和行选择...

    php extjs grid 装载数据

    你可以扩展Store和Model以支持编辑和删除操作，通过ExtJS的CRUD功能与PHP接口交互，实现数据的增删改。 以上就是使用PHP和ExtJS Grid进行数据加载的基本流程，实际应用中可能需要根据项目需求进行更多的定制和优化...

    ExtJS 使用grid显示数据

    在ExtJS中，Grid Panel是一种数据驱动的组件，它允许开发者以表格的形式展示大量数据，并且支持分页、排序、过滤、编辑等功能。要创建一个Grid，首先需要定义数据模型（Model），它描述了数据的结构，包括字段名和...

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