Ext.grid.EditorGridPanel

liss

浏览: 842661 次
性别:
来自: 广州

最近访客更多访客>>

akacd

石不易

844700118

Agy0514

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJs

EXT CSS JavaScript Ajax prototype

<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

分享到：

Oracle数据显示--横表转纵表 | Java中getResourceAsStream的用法

2010-10-06 11:38
浏览 1615
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.grid.EditorGridPanel

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.grid.EditorGridPanel

评论

发表评论

相关推荐

extjs在IE报对象不支持此属性或方法

国内首个基于Ext开发开源企业级框架，免费下载！！

Ext.form.*使用技巧

Ext JS高级插件开发教程

项目中常使用的Ext插件

Ext.ux.DataDrop.js

ExtJs 中 xtype 与组件类的对应表

iframe in a tab panal

ext中autoLoad页面中js的问题记录

EXT card布局

EXT window中加入照片

Ext的Card布局示例

Ext card布局

实现Ext.TabPanel中tab内容的更新

Ext.TabPanel中autoLoad实现页面内容加载

extjs中TabPanel中tab引用页面刷新导致这个页面刷新的问题

SSH+Extjs分页小例子

ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的

程序设置Extjs树中CheckBox的选中和取消选中设置

Ext tree的checkbox取值问题

最近访客更多访客>>