现在的位置: 首页 > 综合 > 正文

Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法

2014年01月08日 ⁄ 综合 ⁄ 共 4097字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  4.   <meta http-equiv="Content-Type"
     content=
    "text/html; charset=utf-8"
    >  
  5.   <link rel="stylesheet"
     type=
    "text/css"
     href=
    "extjs2.0/resources/css/ext-all.css"
     mce_href=
    "extjs2.0/resources/css/ext-all.css"
     />  
  6.   <mce:script type="text/javascript"
     src=
    "extjs2.0/adapter/ext/ext-base.js"
     mce_src=
    "extjs2.0/adapter/ext/ext-base.js"
    ></mce:script>  
  7.   <mce:script type="text/javascript"
     src=
    "extjs2.0/ext-all.js"
     mce_src=
    "extjs2.0/ext-all.js"
    ></mce:script>  
  8.   <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>  
  9.   <mce:script type="text/javascript"
    ><!--  
  10.  Ext.onReady(function
    (){  
  11.   Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'
    ;  
  12.   Ext.QuickTips.init();  
  13.   Ext.form.Field.prototype.msgTarget = 'qtip'
    ;  
  14.   //创建表格数据
      
  15.   var
     data = [  
  16.    [1,'张三'
    ,
    '男'
    ,
    new
     Date(1979,09,13),29,
    'zhang@abc.com'
    ],  
  17.    [2,'李四'
    ,
    '女'
    ,
    new
     Date(1978,10,01),30,
    'li@abc.com'
    ],  
  18.    [3,'王五'
    ,
    '男'
    ,
    new
     Date(1981,01,01),27,
    'wang@abc.com'
    ]  
  19.   ];  
  20.   //创建记录类型Person，mapping值为字段值对应数组中数据的索引位置
      
  21.   var
     Person = Ext.data.Record.create([  
  22.    {name: 'personId'
    ,mapping: 0},  
  23.    {name: 'personName'
    ,mapping: 1},  
  24.    {name: 'personSex'
    ,mapping: 2},  
  25.    {name: 'personBirthday'
    ,mapping: 3},  
  26.    {name: 'personAge'
    ,mapping: 4},  
  27.    {name: 'personEmail'
    ,mapping: 5}  
  28.   ]);  
  29.   var
     dataStore=
    new
     Ext.data.Store({
    //配置数据集
      
  30.     reader: new
     Ext.data.ArrayReader({id:0},Person),  
  31.     data: data  
  32.    });  
  33.   //创建Grid表格组件
      
  34.   var
     grid = 
    new
     Ext.grid.EditorGridPanel({  
  35.    title : 'Ext.grid.EditorGridPanel'
    ,  
  36.    applyTo : 'grid-div'
    ,  
  37.    width:430,  
  38.    height:280,  
  39.    frame:true
    ,  
  40.    clicksToEdit:2,  
  41.    store: dataStore,  
  42.    //方式一：对所有修改结果集中式提交
      
  43.    tbar:[{  
  44.     text:'提交修改'
    ,  
  45.     handler:function
    (){  
  46.      var
     mr=dataStore.getModifiedRecords();
    //获取所有更新过的记录
      
  47.      var
     recordCount=dataStore.getCount();
    //获取数据集中记录的数量
      
  48.      if
    (mr.length==0){  
    // 确认修改记录数量
      
  49.        alert("没有修改数据！"
    );  
  50.        return
     
    false
    ;  
  51.      }  
  52.        
  53.      var
     recordModStr=
    "["
    ;
    //这里以josn方式保存
      
  54.      for
    (
    var
     i=0;i<mr.length;i++){  
  55.       alert("orginValue:"
    mr[i].modified[
    "personEmail"
    ]+
    ",value:"
    +mr[i].data[
    "personSex"
    ]);
    //此处cell是否发生
      
  56.                                              //更改可用mr[i].dirty来判断
      
  57.       recordModStr+="{personName:"
    +mr[i].data[
    "personName"
    ]+
    ",personSex:"
    +mr[i].data[
    "personSex"
    ]+
    ",personBirthday:"
      
  58.            +mr[i].data["personBirthday"
    ]+
    ",personAge:"
    +mr[i].data[
    "personAge"
    ]+
    ",personEmail:"
    +mr[i].data[
    "personEmail"
    ]+
    "}"
    ;  
  59.        if
    (i<mr.length-1)  
  60.                 recordModStr+=","
    ;  
  61.      }  
  62.      recordModStr+="]"
    ;  
  63.      alert(recordModStr);  
  64.      //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入
      
  65.    }  
  66.    }],  
  67.    columns: [//配置表格列
      
  68.     {header: "id"
    , width: 40, dataIndex: 
    'personId'
    },  
  69.     {header: "姓名"
    , width: 70, dataIndex: 
    'personName'
    ,  
  70.      editor:new
     Ext.form.TextField({  
  71.       allowBlank : false
      
  72.      })  
  73.     },  
  74.     {header: "性别"
    , width: 40, dataIndex: 
    'personSex'
    ,  
  75.      editor:new
     Ext.form.ComboBox({  
  76.       editable : false
    ,  
  77.       displayField:'sex'
    ,  
  78.       mode: 'local'
    ,  
  79.       triggerAction: 'all'
    ,  
  80.       store:new
     Ext.data.SimpleStore({  
  81.        fields: ['sex'
    ],  
  82.        data : [['男'
    ],[
    '女'
    ]]  
  83.       })  
  84.      })  
  85.     },  
  86.     {header: "生日"
    , width: 100, dataIndex: 
    'personBirthday'
    ,  
  87.      editor:new
     Ext.form.DateField(),  
  88.      renderer:Ext.util.Format.dateRenderer('Y年m月d日'
    )  
  89.     },  
  90.     {header: "年龄"
    , width: 40, dataIndex: 
    'personAge'
    ,  
  91.      editor:new
     Ext.form.NumberField(),renderer:isEdit  
  92.     },  
  93.     {header: "电子邮件"
    , width: 120, dataIndex: 
    'personEmail'
    ,  
  94.      editor:new
     Ext.form.TextField({  
  95.       vtype:'email'
      
  96.      })  
  97.     }  
  98.    ]  
  99.   })  
  100.   //方式二：对修改结果实时提交，这里对年龄实时提交
      
  101.   function
     isEdit(value,record){  
  102.     //向后台提交请求
      
  103.    return
     value;  
  104.   }  
  105. function
     afterEdit(obj){    
    //每次更改后，触发一次该事件
      
  106.           alert("orginalValue:"
    +obj.originalValue+
    ",value:"
    +obj.value);  
  107.       }  
  108.      grid.on("afteredit"
    , afterEdit, grid);  
  109.  });  
  110.     
  111. // --></mce:script>
      
  112.  </HEAD>  
  113.  <BODY style="margin=10 10 10 10;"
     mce_style=
    "margin=10 10 10 10;"
    >  
  114.  <div id='grid-div'
    ></div>  
  115.  </BODY>  
  116. </HTML>
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞