当前位置:编程学习 > html/css >>

Ext EditorGridPanel 动态添加行

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" href="ext3/resources/css/ext-all.css" /> <script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3/ext-all.js"></script> </head> <body> <br> <script> Ext .onReady(function(){ var cm = new Ext .grid.ColumnModel([ {header:'id',dataIndex:'id',editor: new Ext .form.TextField({allowBlank:false}),sortable:true}, {header:'name',dataIndex:'name',editor: new Ext .form.TextField({allowBlank:false})}, {header:'descn',dataIndex:'descn',editor: new Ext .form.TextField({allowBlank:false})} ]); var data = [ ['1','d','descn1'], ['2','dfg','descn2'], ['3','fg','descn3'], ['4','f','descn4'], ['5','dfg','descn5'] ]; var store = new Ext .data.Store({ proxy: new Ext .data.MemoryProxy(data), reader: new Ext .data.ArrayReader({}, [ {name:'id'}, {name:'name'}, {name:'descn'} ]) }); store.load(); var Record = new Ext .data.Record.create([ {name:'id',type:'int'}, {name:'name',type:'string'}, {name:'descn',type:'string'} ]); var grid = new Ext .grid.EditorGridPanel ({ renderTo: 'grid', store: store, width: 400, height:200, cm: cm, tbar: new Ext .Toolbar(['-', { text:'add', handler:function() { var p = new Record({ id:'', name:'', descn:'' }); grid.stopEditing(); store.insert(0,p); grid.startEditing(0, 0); } },'-', { text:'del', handler:function() { Ext .Msg.confirm('message','Do you confirm the deletion',function(btn) { if(btn == 'yes') { var sm = grid.getSelectionModel(); var cell = sm.getSelectedCell(); var record = store.getAt(cell[0]); store.remove(record); } }); } }, '-']) }); }); </script> <div id="grid"> </div> </body> </html>
 
 
示图

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,