`

extjs学习笔记（五--2）可编辑的grid

EXTJavaScriptCSSFirebugXHTML 
阅读更多

 我们先来体验下效果：

     我们注意到被编辑过的单元格左上角有个红色的小箭头，并且第一列是不允许为空的，第二列可以从下拉列表来选择，第三列在编辑状态显示的是原始数据，第四列可以从一个日期控件中来选择日期。现在我们来看一下主要的代码：

    第12行，和本次的主题无关，只是初始化一个全局QuickTips对象，该对象为元素提供漂亮和可定制的提示工具（tooltips）。

    第15-17行，是列的renderer函数， 在下边构造ColumnModel的时候会用到。

    第20行，取了个别名，下文中需要使用Ext.form的地方，就可以简单的使用fm来代替了。

    第23-27行，使用CheckColumn类构造了一个显示checkbox的列， 该类在一个单独的js文中定义。我们也可以使用renderer函数很方便的做到这一点，但是有现成的没有理由不用。

    第30-79行，构造了ColumnModel类的对象，我们在其中使用了editor来提供编辑的功能。editor其实是Ext.form.Field类或者其子类的一个对象，我们会在学习表单的时候再详细介绍Ext.form命名空间中的类。这里我们只需要注意在构造Ext.form.ComboBox对象的时候，需要在页面上有一个HTML的SELECT元素，配置参数transform需要这个SELECT元素。

    第83-103行构造grid需要的Store对象，现在我们只要能够对照plant.xml文件大概看明白就可以了 。

    第106-117就是我们想要的可编辑的grid了，大部分参数我们都用过，这里简单介绍下最后三个参数：

        frame：Boolean类型的值，默认为false，呈现出普通的1个象素的方形边框；为true的时候可以是定制的圆弧形转角（custom rounded corners ）。有兴趣的朋友可以用firebug观察一下不同值的时候生成的html代码。

        plugins：为grid组件提供自定义功能的插件，只有在插件的init方法需要grid组件的引用作为参数的时候才需要。

        clicksToEdit：变为可编辑状态需要点击鼠标的次数，默认值是2。

    下边给出我们的页面文件：


<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4    <title>可以编辑的grid</title>
 5    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
 6
 7    <script type="text/javascript" src="extjs/ext-base-debug.js"></script>
 8
 9    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
10
11    <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
12    <script type="text/javascript" src="extjs/CheckColumn.js"></script>
13
14    <script type="text/javascript" src="js/edit-grid.js"></script>
15
16</head>
17<body>
18<select name="light" id="light" style="display: none;">
19        <option value="Shade">Shade</option>
20        <option value="Mostly Shady">Mostly Shady</option>
21        <option value="Sun or Shade">Sun or Shade</option>
22        <option value="Mostly Sunny">Mostly Sunny</option>
23        <option value="Sunny">Sunny</option>
24    </select>
25    <div id="grid">
26    </div>
27</body>
28</html>
29

     需要注意的是，当我们对grid中的数据编辑之后并未保存，所以页面一旦刷新，我们的改动便会丢失。另外，我们也并未对数据进行有效性验证，只是由列的editor提供了最基本的验证，比如数据不能为空。我们会在下一个系列对grid进行增加和删除操作中学习到如何解决这些问题。

分享到：
| extjs学习笔记（五）可编辑的grid
评论
发表评论

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

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...

    Extjs4.0学习笔记

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

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    在本文中，我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能，同时结合Struts2和Hibernate技术，构建一个完整的CRUD（创建、读取、更新、删除）应用。ExtJS 4是一个强大的JavaScript UI库，提供了...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    ExtJS4中文教程2 开发笔记 chm

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

    ExtJS笔记----FormPanel的使用

    NULL 博文链接：https://lucky16.iteye.com/blog/1490278

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    extjs2----关于extjs 的使用，操作

    4. **数据绑定**：阐述ExtJS的数据模型（Store）和数据显示组件（Grid、Tree）之间的数据绑定机制，包括XML、JSON数据源的加载。 5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、...

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    Extjs复习笔记（二十）-- tree和grid结合

    在"Extjs复习笔记（二十）-- tree和grid结合"这篇博文中，博主探讨了如何在EXTJS中实现树形视图（Tree）与网格视图（Grid）的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据，例如文件系统、组织架构等。...

    ExtJs学习资料14-OOP[JavaScript面向对象编程].doc

    ExtJs学习资料14-OOP[JavaScript面向对象编程]

    extjs 学习笔记（三） 最基本的grid

    在本篇学习笔记中，我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先，EXTJS的Grid由多个组件构成，其中最重要的是`ColumnModel`，它负责定义Grid中的列属性。在示例代码中，我们创建了一个`ColumnModel`对象...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件，它允许用户以表格的形式查看和操作大量数据。在实际应用中，数据过滤是常见的需求，以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作，以及如何动态地对...

    extjs学习笔记-开发者必备

    对爱好extjs的开发者有帮助，提供中文api文档，及常用的方法！

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