Extjs EditorGridPanel 动态追加一行

最新推荐文章于 2018-04-23 10:26:58 发布

jazwoo

最新推荐文章于 2018-04-23 10:26:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/jazywoo123/article/details/7885839

Extjs 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架实现的grid编辑事件案例。该案例通过监听grid的edit事件，在用户完成编辑后检查最后一个记录是否为空。如果不为空，则向数据存储中添加一个新的空记录，以便用户继续编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是实现grid的edit事件，查看Ext.data.StoreManager.lookup("gridStore")

找到store之后，查看最后一个recorde是否为空，不为空才新增一行

Ext.onReady(function(){
	Ext.QuickTips.init();  
	Ext.form.Field.prototype.msgTarget='side';
	var store=Ext.create('Ext.data.Store',{
		storeId:'gridStore',
		autoLoad:true,
	    fields:['Name','Password','RPassword','Email'],
	    data:{'items':[
	         {'Name':'','Password':'','RPassword':'','Email':''},  	
	    ]},
	    proxy:{
	       type:'memory',
	       reader:{
	          type:'json',
	          root:'items'
	       }
	    }
		
	});	
	var gridPanel=Ext.create('Ext.grid.Panel',{
		autoScroll:true,
		height:110,
	    store:store,
	    plugins:[
	       Ext.create('Ext.grid.plugin.CellEditing',{
	            clicksToEdit:1
	       })
	    ],
	    columns:[
	      {header:'用户名',dataIndex:'Name',flex:1,
	         editor:{
	            xtype:'textfield',
	            name:'username',
	            allowBlank:false,
	            blankText:'用户名不能为空'
	         }
	      },
	      {header:'密码',dataIndex:'Password',flex:1,
	         editor:{
	            xtype:'textfield',
	            name:'password1',
	            id:'password1',
	            allowBlank:false,
	            inputType:'password',
	            blankText:'密码不能为空'
	         }
	      },
	      {header:'确认密码',dataIndex:'RPassword',flex:1,
	         editor:{
	            xtype:'textfield',
	            name:'password2',
	            allowBlank:false,
	            inputType:'password'
	         }
	      },
	      {header:'邮箱',dataIndex:'Email',flex:1,
	         editor:{
	            xtype:'textfield',
	            name:'email',
	            allowBlank:false,
	            vtype:'email',
	            vtypeText:'邮箱格式不正确!'
	         }
	      },
	    ],
	    listeners:{
		   edit:function(editor,eOptions){
		      var store=Ext.data.StoreManager.lookup("gridStore");
		      var lastRecord=store.last();
		      var temp=lastRecord.get('Name')+lastRecord.get('Password')
		              +lastRecord.get('RPassword')+lastRecord.get('Email');
		      temp=Ext.util.Format.trim(temp);
		      if(temp!=""){
			      var newRecord={'Name':'','Password':'','RPassword':'','Email':''};
			      store.add(newRecord);
		      }
		     
	       }
		
	    }
	    
		
	});