Ext EditorGridPanel 动态添加行

当前位置 : 首页 > 网页制作 > CSS > Ext EditorGridPanel 动态添加行

Ext EditorGridPanel 动态添加行

来源: 作者: 时间:2016-01-28 09:27
!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 s
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<>  
<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>   

 
 
示图

Tag:
网友评论

<