`
liss
  • 浏览: 844170 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.grid.EditorGridPanel

阅读更多
<HTML>   
 <HEAD>   
  <TITLE>可编辑表格面板EditorGridPanel</TITLE>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />   
  <mce:script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>   
  <mce:script type="text/javascript" src="extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script>   
  <mce:script type="text/javascript" src="extjs2.0/source/locale/ext-lang-zh_CN.js" mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>   
  <mce:script type="text/javascript"><!--   
 Ext.onReady(function(){   
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';   
  Ext.QuickTips.init();   
  Ext.form.Field.prototype.msgTarget = 'qtip';   
  //创建表格数据   
  var data = [   
   [1,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],   
   [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],   
   [3,'王五','男',new Date(1981,01,01),27,'wang@abc.com']   
  ];   
  //创建记录类型Person,mapping值为字段值对应数组中数据的索引位置   
  var Person = Ext.data.Record.create([   
   {name: 'personId',mapping: 0},   
   {name: 'personName',mapping: 1},   
   {name: 'personSex',mapping: 2},   
   {name: 'personBirthday',mapping: 3},   
   {name: 'personAge',mapping: 4},   
   {name: 'personEmail',mapping: 5}   
  ]);   
  var dataStore=new Ext.data.Store({//配置数据集   
    reader: new Ext.data.ArrayReader({id:0},Person),   
    data: data   
   });   
  //创建Grid表格组件   
  var grid = new Ext.grid.EditorGridPanel({   
   title : 'Ext.grid.EditorGridPanel',   
   applyTo : 'grid-div',   
   width:430,   
   height:280,   
   frame:true,   
   clicksToEdit:2,   
   store: dataStore,   
   //方式一:对所有修改结果集中式提交   
   tbar:[{   
    text:'提交修改',   
    handler:function(){   
     var mr=dataStore.getModifiedRecords();//获取所有更新过的记录   
     var recordCount=dataStore.getCount();//获取数据集中记录的数量   
     if(mr.length==0){  // 确认修改记录数量   
       alert("没有修改数据!");   
       return false;   
     }   
        
     var recordModStr="[";//这里以josn方式保存   
     for(var i=0;i<mr.length;i++){   
      alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生   
                                             //更改可用mr[i].dirty来判断   
      recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:"  
           +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";   
       if(i<mr.length-1)   
                recordModStr+=",";   
     }   
     recordModStr+="]";   
     alert(recordModStr);   
     //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入   
   }   
   }],   
   columns: [//配置表格列   
    {header: "id", width: 40, dataIndex: 'personId'},   
    {header: "姓名", width: 70, dataIndex: 'personName',   
     editor:new Ext.form.TextField({   
      allowBlank : false  
     })   
    },   
    {header: "性别", width: 40, dataIndex: 'personSex',   
     editor:new Ext.form.ComboBox({   
      editable : false,   
      displayField:'sex',   
      mode: 'local',   
      triggerAction: 'all',   
      store:new Ext.data.SimpleStore({   
       fields: ['sex'],   
       data : [['男'],['女']]   
      })   
     })   
    },   
    {header: "生日", width: 100, dataIndex: 'personBirthday',   
     editor:new Ext.form.DateField(),   
     renderer:Ext.util.Format.dateRenderer('Y年m月d日')   
    },   
    {header: "年龄", width: 40, dataIndex: 'personAge',   
     editor:new Ext.form.NumberField(),renderer:isEdit   
    },   
    {header: "电子邮件", width: 120, dataIndex: 'personEmail',   
     editor:new Ext.form.TextField({   
      vtype:'email'  
     })   
    }   
   ]   
  })   
  //方式二:对修改结果实时提交,这里对年龄实时提交   
  function isEdit(value,record){   
    //向后台提交请求   
   return value;   
  }   
function afterEdit(obj){    //每次更改后,触发一次该事件   
          alert("orginalValue:"+obj.originalValue+",value:"+obj.value);   
      }   
     grid.on("afteredit", afterEdit, grid);   
 });   
     
// --></mce:script>   
 </HEAD>   
 <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">   
 <div id='grid-div'></div>   
 </BODY>   
</HTML> 

 注:此例基本代码参考《ExtJS web应用程序开发指南》中代码17-7

分享到:
评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    EXT核心API详解

    73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ ...

    Ext组件描述,各个组件含义

    **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**:适合于需要对表格中的数据进行编辑的场景...

    ExtJS入门教程(超级详细)

    1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65

    给Extjs的GridPanel增加“合计”行

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

    ext 读取xml 可编辑grid

    在EXT JS框架中,"ext 读取xml 可编辑grid"是一个常见的需求,涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...

    Ext grid合并单元格

    var grid = new Ext.grid.EditorGridPanel({ renderTo: "hello", title: "学生基本信息管理", height: 200, width: 600, cm: colM, store: store, viewConfig: viewConfig }); ``` ### 四、总结 通过上述...

    ExtJS3总结内容

    - `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`: `Ext.FlashComponent` - `grid`: `Ext.grid.GridPanel` - `listview`: `Ext.ListView` - `panel`: `Ext.Panel` - `progress`: `Ext.ProgressBar` - `...

    ext教程1.pdf

    - **表单及元素组件**:`Ext.Editor`(编辑器)、`Ext.grid.EditorGridPanel`(可编辑的表格)等。 EXTJS 的强大之处在于它提供了丰富的组件库和灵活的布局机制,使得开发者可以轻松构建复杂的应用程序界面,同时...

    Ext3.0 api帮助文档

    - **Ext.grid.EditorGridPanel**: 提供单元格级别的编辑功能。 6. **表单(Forms)** - **Ext.form.FormPanel**: 创建表单的容器,支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类,如文本框、选择...

    Ext.grid.GridPanel右键菜单

    右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。

    extjs xtype

    10. `editorgrid` - `Ext.grid.EditorGridPanel`:可编辑的表格,允许用户直接在表格中修改数据。 11. `grid` - `Ext.grid.GridPanel`:标准的表格组件,用于展示数据。 12. `paging` - `Ext.PagingToolbar`:分页...

    ExtJs组件类的对应表

    11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`...

    老师整理的extjs学习笔记

    `Ext.grid.EditorGridPanel` 是一个扩展了 `Ext.grid.GridPanel` 的组件,允许直接在表格中编辑数据。它结合了表格视图和表单编辑功能,使得数据编辑变得更加直观。 #### 九、Ext.tree.TreePanel -- 树的使用 **...

    extJs xtype 类型

    11. **`editorgrid`:** 可编辑的表格组件,允许用户直接在表格中编辑数据,通过`Ext.grid.EditorGridPanel`类实现。 12. **`propertygrid`:** 属性表格组件,用于展示对象的属性列表,通过`Ext.grid.PropertyGrid`...

    ExtJs xtype一览

    - **`editorgrid` (Ext.grid.EditorGridPanel)**: 可编辑的表格组件,允许用户直接在表格内进行数据编辑。 - **`propertygrid` (Ext.grid.PropertyGrid)**: 属性表格组件,专门用于展示对象的属性。 - **`editor` ...

    Extjs实用教程

    - **EditorGridPanel**: `Ext.grid.EditorGridPanel`,可编辑的表格组件。 - **GridPanel**: `Ext.grid.GridPanel`,表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`,分页工具栏。 - **Panel**: `Ext....

    Ext TreePanel

    在描述中提到的`Ext.grid.EditorGridPanel`,是用于创建可编辑的表格面板,它继承自`GridPanel`。通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以...

    ExtJS增删改查

    var grid = new Ext.grid.EditorGridPanel({ ds: fds, cm: cm, sm: sm, width: 200, height: 200, title: '举例', renderTo: Ext.get("testdiv") }); ``` #### 五、增删改查具体实现 1. **查询**: - 当...

    Ext 连接数据库的相关操作

    var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ // 列定义 {header: 'ID', width: 50, sortable: true, dataIndex: 'id'}, {header: 'Name', width: 100, sortable: true, dataIndex: '...

Global site tag (gtag.js) - Google Analytics