日期:2014-05-16  浏览次数:20396 次

Ext Js Grid 编辑 新增 删除 保存的一个小示例

文章转自http://tiantiankaixin.iteye.com/blog/743228

?

Ext Js Grid 编辑 新增 删除 保存的一个小示例 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Paging</title> 
     <link rel="stylesheet" type="text/css" href="css/ext-all.css" />    
     <script type="text/javascript" src="ext-base.js"></script> 
    <script type="text/javascript" src="ext-all.js"></script>   
    <script type="text/javascript" src="edit-grid-paging.js"></script> 
    <link rel="stylesheet" type="text/css" href="grid-examples.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.css" />      
</head> 
<body> 
<script type="text/javascript" src="examples.js"></script> 
<div id="topic-grid"></div> 
</body> 
</html> 

edit-grid-paging.js 

Ext.onReady(function(){ 
   
    Ext.QuickTips.init();     
    var authereditor = Editgridselect.init();//自定义下拉列表 数据取自数据库返回的Json 
     
    var Plant = Ext.data.Record.create([                 
           {name: 'title', type: 'string'}, 
           {name: 'forumtitle', type: 'string'}, 
           {name: 'forumid'}, 
           {name: 'author', type: 'string'}, 
           {name: 'replycount', type: 'int'}, 
           {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 
           {name: 'lastposter'}, 
           {name: 'excerpt'}, 
           {name: 'threadid'} 
      ]); 
     
    var store = new Ext.data.Store({ 
              proxy: new Ext.data.ScriptTagProxy({ //支持跨域获取数据 
                                url: 'http://extjs.com/forum/topics-browse-remote.php' 
                 }), 
              reader: new Ext.data.JsonReader({               
               root: 'topics', 
               totalProperty:'totalCount', 
               id: "threadid" 
               
           }, Plant) 
    }) 
     
    store.setDefaultSort('lastpost', 'desc'); 


    // pluggable renders 
    /* 
    function renderTopic(value, p, record){ 
        return String.format( 
                '<b>{0}</b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', 
                value, record.data.forumtitle, record.id, record.data.forumid); 
    } 
    */ 
    function renderTopic(value, p, record){ 
        return String.format( 
                '<b>{0}</b>', 
                value, record.data.forumtitle, record.id, record.data.forumid); 
    } 
    function renderLast(value, p, r){ 
        return String.format('{0} by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); 
    } 
     
    function examineflag(value){ 
        return value ? '是' : '否';   
    }; 
         
   
    // 顶部工具栏按钮 
    var contrltar = [{ 
                        text: '添加', 
                        handler : function(){ 
                                                var p = new Plant({ 
                                                                title: '', 
                                                                forumtitle:'', 
                                                                forumid:'', 
                                                                author: '', 
                                                                replycount: 0, 
                                                                lastpost: (new Date()).clearTime(),                                                                 
                                                                lastposter:'', 
                                                                excerpt:'新内容' 
                                                                }); 
                                             //var n = ds.totalLength; 
                                            grid.stopEditing();