Extjs的editergrid实例


<title>编辑pannel</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<link  rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
</head>

<body>
<script type="text/javascript">
Ext.onReady(function(){
      //begin
      //创建列
     var  cm =new Ext.grid.ColumnModel([
                {header:"编号",dataIndex:"Id",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},
                {header:"姓名",dataIndex:"Name",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}//这属性指定了用户编辑时所用的编辑器
                ]);
     
     //创建recode结构
     var recode =Ext.data.Record.create([{name:"Id",mapping:0},{name:"Name",mapping:1}]);
     //创建data
     var data =[["1","张三"],["2","李四"],["3","王五"]];
     //创建reader
     var reader =new Ext.data.ArrayReader({},recode);
     //创建一个store返回规范的recode对象
     var store =new Ext.data.Store(
              {
              proxy:new Ext.data.MemoryProxy(data),
              reader:reader,
                pruneModifiedRecords :true
              }
             
              );
     //加载数据
     store.load();
      //创建editpanel
     var editpanel =new Ext.grid.EditorGridPanel({
                 title:"修改pannel",
                 height:500,
                 cm:cm,
                 store:store,
                 tbar:new Ext.Toolbar(["-",{text:"添加一行",handler:function(){
 var initValue={Id:"",Name:""};//定义一个recode对象
 var p =new recode(initValue); //根据上面创建的recode 创建一个默认值
 editpanel.stopEditing();
 store.insert(0,p);//在第一个位置插入
 editpanel.startEditing(0,0);//指定的行/列,进行单元格内容的编辑
 p.dirty=true;
 p.modified=initValue;
 if(store.modified.indexOf(p)==-1)
         {
          store.modified.push(p);
        }
 
 }},"-",{text:"删除一行",handler:function(){
  //执行山出行
  var sm =editpanel.getSelectionModel();//返回grid的SelectionModel
  //getSelectionModel():取得选择模式
  //
  var cl =sm.getSelectedCell();//Ext.grid.CellSelectionModel  取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]
  if(cl==null)
  {
   Ext.MessageBox.alert("您未选中任何行","您未选中任何行");
   
   }
  else
  {
   var recode=store.getAt(cl[0]);
   store.remove(recode);
  }
  
  
  }}]),
                 renderTo:"editpanel"
                 });
     
      //end
     
     
     
      })
</script>
<div id="editpanel"></div>
</body>效果如下

 

转载于:https://www.cnblogs.com/zhbsh/archive/2011/05/14/2046370.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值