ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)

最新推荐文章于 2016-03-12 13:25:00 发布
最新推荐文章于 2016-03-12 13:25:00 发布
阅读量2.5k 收藏
点赞数
分类专栏： ExtJs 文章标签： extjs stylesheet function header 测试 query

我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图

上一篇文章，在Grid中加入了多选/全选功能（链接地址是：http://www.mhzg.net/a/20115/20115311100255.html），实际运用中，我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话，更有说服力哦。

HTML代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>ExtJS4 EditGrid(可编辑的Grid)-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <link rel="stylesheet" type="text/css" href="../../examples/ux/css/CheckHeader.css" />
  8. <style type="text/css">
  9.         #search-results a {
  10.             color: #385F95;
  11.             font:bold 11px tahoma, arial, helvetica, sans-serif;
  12.             text-decoration:none;
  13.         }
  14.         .add {
  15.             background-image:url(../../examples/shared/icons/fam/cog.gif) !important;
  16.         }
  17.         #search-results a:hover {
  18.             text-decoration:underline;
  19.         }
  20.         
  21.         #search-results p {
  22.             margin:3px !important;
  23.         }
  24.         
  25.         .search-item {
  26.             font:normal 11px tahoma, arial, helvetica, sans-serif;
  27.             padding:3px 10px 3px 10px;
  28.             border:1px solid #fff;
  29.             border-bottom:1px solid #eeeeee;
  30.             white-space:normal;
  31.             color:#555;
  32.         }
  33.         .search-item h3 {
  34.             display:block;
  35.             font:inherit;
  36.             font-weight:bold;
  37.             color:#222;
  38.         }
  40.         .search-item h3 span {
  41.             float: right;
  42.             font-weight:normal;
  43.             margin:0 0 5px 5px;
  44.             width:100px;
  45.             display:block;
  46.             clear:none;
  47.         }
  48.         
  49.         .x-form-clear-trigger {
  50.             background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
  51.         }
  52.         
  53.         .x-form-search-trigger {
  54. background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
  55.         }
  56.     </style>
  57. <script type="text/javascript" src="../../bootstrap.js"></script>
  58. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  59. <script type="text/javascript" src="editgrid.js"></script>
  60. </head>
  62. <body>
  63. <div id="demo"></div>
  64. </body>
  65. </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS4 EditGrid(可编辑的Grid)-MHZG.NET</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../examples/ux/css/CheckHeader.css" />
<style type="text/css">
        #search-results a {
            color: #385F95;
            font:bold 11px tahoma, arial, helvetica, sans-serif;
            text-decoration:none;
        }
        .add {
            background-image:url(../../examples/shared/icons/fam/cog.gif) !important;
        }
        #search-results a:hover {
            text-decoration:underline;
        }
        
        #search-results p {
            margin:3px !important;
        }
        
        .search-item {
            font:normal 11px tahoma, arial, helvetica, sans-serif;
            padding:3px 10px 3px 10px;
            border:1px solid #fff;
            border-bottom:1px solid #eeeeee;
            white-space:normal;
            color:#555;
        }
        .search-item h3 {
            display:block;
            font:inherit;
            font-weight:bold;
            color:#222;
        }

        .search-item h3 span {
            float: right;
            font-weight:normal;
            margin:0 0 5px 5px;
            width:100px;
            display:block;
            clear:none;
        }
        
        .x-form-clear-trigger {
            background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
        }
        
        .x-form-search-trigger {
            background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
        }
    </style>
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="editgrid.js"></script>
</head>

<body>
<div id="demo"></div>
</body>
</html>

editgrid.js：

  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../../examples/ux');
  3. Ext.require([
  4.     'Ext.grid.*',
  5.     'Ext.toolbar.Paging',
  6.     'Ext.util.*',
  7.     'Ext.data.*',
  8.     'Ext.state.*',
  9.     'Ext.form.*',
  10.     'Ext.ux.form.SearchField',
  11.     'Ext.selection.CellModel',
  12.     'Ext.ux.CheckColumn',
  13.     'Ext.selection.CheckboxModel'
  14. ]);
  16. Ext.onReady(function(){
  17.     var isEdit = false;
  18.     
  19.     function formatDate(value){
  20.         return value ? Ext.Date.dateFormat(value, 'Y-m-d') : '';
  21.     }
  22.     
  23.     Ext.define('MyData',{
  24.         extend: 'Ext.data.Model',
  25.         fields: [
  26.             {name:'id'},
  27.             {name:'title',type:'string'},
  28.             {name:'author'},
  29.             {name:'hits',type: 'int'},
  30.             {name:'addtime',type:'date',dataFormat:'Y-m-d'},
  31.             {name:'checked',type:'bool'}
  32.         ]
  33.     });
  34.     
  35.     //创建数据源
  36.     var store = Ext.create('Ext.data.Store', {
  37.         //分页大小
  38.         pageSize: 50,
  39.         model: 'MyData',
  40.         //是否在服务端排序
  41.         remoteSort: true,
  42.         autoDestroy: true,
  43.         proxy: {
  44.            //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  45.             type: 'ajax',
  46.             url: 'editgrid.asp',
  47.             
  48.             reader: {
  49.                 root: 'items',
  50.                 totalProperty  : 'total'
  51.             },
  52.             simpleSortMode: true
  53.         },
  54.         sorters: [{
  55.             //排序字段。
  56.             property: 'hits',
  57.             //排序类型，默认为 ASC
  58.             direction: 'DESC'
  59.         }]
  60.     });
  61.     //下拉框数据,测试数据。
  62.     var cbstore = Ext.create('Ext.data.Store', { 
  63.     fields: ['id', 'name'], 
  64.     data : [ 
  65.         {"id":"1","name":"佚名"},
  66.         {"id":"2","name":"管理员"},
  67.         {"id":"3","name":"编辑"},
  68.         {"id":"4","name":"总编辑"},
  69.         {"id":"5","name":"测试员"}
  70.     ]
  71. }); 
  73.     
  74.     //创建多选
  75.      var selModel = Ext.create('Ext.selection.CheckboxModel');
  76.      var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  77.         clicksToEdit: 1
  78.      });
  79.     //创建Grid
  80.     var grid = Ext.create('Ext.grid.Panel',{
  81.         store: store,
  82.         selModel: selModel,
  83.         columnLines: true,
  84.         columns: [{
  85.             id:"title",
  86.             header: "标题", 
  87.             width: 110, 
  88.             dataIndex: 'title', 
  89.             sortable: true,
  90.             field: {
  91.                 allowBlank: false
  92.             }
  93.         },{
  94.             header: "作者",
  95.             width: 120, 
  96.             dataIndex: 'author', 
  97.             id:'gc',
  98.             sortable: false,
  99.             field: {
  100.                 xtype: 'combobox',
  101.                 id:'authors',
  102.                 typeAhead: true,
  103.                 triggerAction: 'all',
  104.                 queryMode: 'local', 
  105.                 selectOnTab: true,
  106.                 store: cbstore,
  107.                 lazyRender: true,
  108.                 displayField:'name',
  109.                 valueField:'id',
  110.                 listClass: 'x-combo-list-small',
  111.                 listeners:{    
  112.                     select : function(combo, record,index){
  113.                         isEdit = true;
  114.                     }
  115.                 }
  116.                  
  117.             },
  118.             renderer:rendererData
  119.         },{
  120.             header: "点击数", 
  121.             width: 80, 
  122.             dataIndex: 'hits', 
  123.             sortable: true,
  124.             field: {
  125.                 xtype: 'numberfield',
  126.                 allowBlank: false,
  127.                 minValue: 0,
  128.                 maxValue: 100000
  129.             }
  130.         },{
  131.             header: "添加时间", 
  132.             width: 100, 
  133.             dataIndex: 'addtime', 
  134.             sortable: true,
  135.             renderer: formatDate,
  136.             field: {
  137.                 xtype: 'datefield',
  138.                 format: 'y-m-d',
  139.                 minValue: '01/01/06'
  140.             }
  141.         },{
  142.             xtype: 'checkcolumn',
  143.             header:'审核',
  144.             dataIndex:'checked',
  145.             width:55
  146.         }],
  147.         height:400,
  148.         width:520,
  149.         x:20,
  150.         y:40,
  151.         title: 'ExtJS4 EditGrid(可编辑的Grid)',
  152.         
  153.         disableSelection: false,//值为TRUE，表示禁止选择
  154.         frame: true,
  155.         selType: 'cellmodel',
  156.         loadMask: true,
  157.         renderTo: 'demo',
  158.         viewConfig: {
  159.             id: 'gv',
  160.             trackOver: false,
  161.             stripeRows: false
  162.         },
  163.         dockedItems: [{
  164.             dock: 'top',
  165.             xtype: 'toolbar',
  166.             items: [{
  167.                 itemId: 'Button',
  168.                 text:'显示所选',
  169.                 tooltip:'Add a new row',
  170.                 iconCls:'add',
  171.                 handler:function(){
  172.                     var record = grid.getSelectionModel().getSelection();
  173.                     if(record.length == 0){
  174.                         Ext.MessageBox.show({
  175.                             title:"提示",
  176.                             msg:"请先选择您要操作的行!",
  177.                             icon: Ext.MessageBox.INFO,
  178.                             buttons: Ext.Msg.OK
  179.                         })
  180.                         return;
  181.                     }else{
  182.                         var ids = "";
  183.                         for(var i = 0; i < record.length; i++){
  184.                             ids += record[i].get("id")
  185.                             if(i<record.length-1){
  186.                                 ids = ids + ",";
  187.                             }
  188.                         }
  189.                         Ext.MessageBox.show({
  190.                             title:"所选ID列表",
  191.                             msg:ids
  192.                             //icon: Ext.MessageBox.INFO
  193.                         })
  194.                     }
  195.                 }
  196.             },'-',{
  197.                 width: 300,
  198.                 fieldLabel: '搜索',
  199.                 labelWidth: 50,
  200.                 xtype: 'searchfield',
  201.                 store: store
  202.             }]
  203.         }, {
  204.             dock: 'bottom',
  205.             xtype: 'pagingtoolbar',
  206.             store: store,
  207.             pageSize: 25,
  208.             displayInfo: true,
  209.             displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
  210.             emptyMsg: '没有数据'
  211.         }],
  212.         plugins: [cellEditing]
  213.         
  214.     })
  215.     store.loadPage(1);
  216.     grid.on('edit', onEdit, this);
  217.     
  218.     function onEdit(){
  219.         var record = grid.getSelectionModel().getSelection()[0];
  220.         //这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。
  221.         var title   = record.get('title');
  222.         var author  = record.get('author');//注意，这里得到的是id值，而不是name值,如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。
  223.         var clk     = record.get('hits');
  224.         var addtime = Ext.Date.dateFormat(record.get('addtime'), 'Y-m-d');
  225.         var checked = record.get('checked');
  226.         Ext.MessageBox.show({
  227.             title:"修改的数据为",
  228.             msg:title+"\r\n"+author+"\r\n"+clk+"\r\n"+addtime+"\r\n"+checked,
  229.             icon: Ext.MessageBox.INFO,
  230.             buttons: Ext.Msg.OK
  231.         })
  232.     }
  233.     
  234.     function rendererData(value,metadata,record){
  235.         if(isEdit){
  236.             var index = cbstore.find(Ext.getCmp('authors').valueField,value);
  237.             var record = cbstore.getAt(index);
  238.             return record.data.name;
  239.         }else{
  240.             return value;
  241.         }
  242.         
  243.     }
  244. }) 
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../examples/ux');
Ext.require([
    'Ext.grid.*',
	'Ext.toolbar.Paging',
	'Ext.util.*',
    'Ext.data.*',
	'Ext.state.*',
    'Ext.form.*',
	'Ext.ux.form.SearchField',
	'Ext.selection.CellModel',
	'Ext.ux.CheckColumn',
	'Ext.selection.CheckboxModel'
]);

Ext.onReady(function(){
	var isEdit = false;
	
	function formatDate(value){
        return value ? Ext.Date.dateFormat(value, 'Y-m-d') : '';
    }
	
    Ext.define('MyData',{
	    extend: 'Ext.data.Model',
		fields: [
			{name:'id'},
			{name:'title',type:'string'},
			{name:'author'},
		    {name:'hits',type: 'int'},
			{name:'addtime',type:'date',dataFormat:'Y-m-d'},
			{name:'checked',type:'bool'}
		]
	});
	
	//创建数据源
	var store = Ext.create('Ext.data.Store', {
		//分页大小
		pageSize: 50,
        model: 'MyData',
		//是否在服务端排序
		remoteSort: true,
		autoDestroy: true,
        proxy: {
           //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
            type: 'ajax',
            url: 'editgrid.asp',
            
            reader: {
                root: 'items',
                totalProperty  : 'total'
            },
			simpleSortMode: true
        },
        sorters: [{
			//排序字段。
            property: 'hits',
			//排序类型，默认为 ASC
            direction: 'DESC'
        }]
    });
	//下拉框数据,测试数据。
	var cbstore = Ext.create('Ext.data.Store', { 
    fields: ['id', 'name'], 
    data : [ 
        {"id":"1","name":"佚名"},
		{"id":"2","name":"管理员"},
		{"id":"3","name":"编辑"},
		{"id":"4","name":"总编辑"},
		{"id":"5","name":"测试员"}
    ]
}); 

	
	//创建多选
	 var selModel = Ext.create('Ext.selection.CheckboxModel');
	 var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
     });
	//创建Grid
	var grid = Ext.create('Ext.grid.Panel',{
	    store: store,
		selModel: selModel,
		columnLines: true,
		columns: [{
			id:"title",
			header: "标题", 
			width: 110, 
			dataIndex: 'title', 
			sortable: true,
			field: {
                allowBlank: false
            }
		},{
			header: "作者",
			width: 120, 
			dataIndex: 'author', 
			id:'gc',
			sortable: false,
			field: {
                xtype: 'combobox',
				id:'authors',
                typeAhead: true,
                triggerAction: 'all',
				queryMode: 'local', 
                selectOnTab: true,
                store: cbstore,
                lazyRender: true,
				displayField:'name',
				valueField:'id',
                listClass: 'x-combo-list-small',
				listeners:{    
					select : function(combo, record,index){
						isEdit = true;
					}
				}
				 
            },
			renderer:rendererData
		},{
			header: "点击数", 
			width: 80, 
			dataIndex: 'hits', 
			sortable: true,
			field: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0,
                maxValue: 100000
            }
		},{
			header: "添加时间", 
			width: 100, 
			dataIndex: 'addtime', 
			sortable: true,
			renderer: formatDate,
			field: {
                xtype: 'datefield',
                format: 'y-m-d',
                minValue: '01/01/06'
            }
		},{
			xtype: 'checkcolumn',
			header:'审核',
			dataIndex:'checked',
			width:55
		}],
		height:400,
		width:520,
		x:20,
		y:40,
		title: 'ExtJS4 EditGrid(可编辑的Grid)',
		
		disableSelection: false,//值为TRUE，表示禁止选择
		frame: true,
		selType: 'cellmodel',
        loadMask: true,
        renderTo: 'demo',
        viewConfig: {
			id: 'gv',
			trackOver: false,
            stripeRows: false
        },
		dockedItems: [{
            dock: 'top',
            xtype: 'toolbar',
            items: [{
				itemId: 'Button',
				text:'显示所选',
                tooltip:'Add a new row',
                iconCls:'add',
				handler:function(){
					var record = grid.getSelectionModel().getSelection();
					if(record.length == 0){
						Ext.MessageBox.show({
							title:"提示",
							msg:"请先选择您要操作的行!",
							icon: Ext.MessageBox.INFO,
               				buttons: Ext.Msg.OK
						})
						return;
					}else{
						var ids = "";
						for(var i = 0; i < record.length; i++){
							ids += record[i].get("id")
							if(i<record.length-1){
								ids = ids + ",";
							}
						}
						Ext.MessageBox.show({
							title:"所选ID列表",
							msg:ids
							//icon: Ext.MessageBox.INFO
						})
					}
				}
			},'-',{
                width: 300,
                fieldLabel: '搜索',
                labelWidth: 50,
                xtype: 'searchfield',
                store: store
            }]
        }, {
            dock: 'bottom',
            xtype: 'pagingtoolbar',
            store: store,
            pageSize: 25,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: '没有数据'
        }],
		plugins: [cellEditing]
        
	})
	store.loadPage(1);
	grid.on('edit', onEdit, this);
	
	function onEdit(){
		var record = grid.getSelectionModel().getSelection()[0];
		//这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。
		var title   = record.get('title');
		var author  = record.get('author');//注意，这里得到的是id值，而不是name值,如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。
		var clk     = record.get('hits');
		var addtime = Ext.Date.dateFormat(record.get('addtime'), 'Y-m-d');
		var checked = record.get('checked');
		Ext.MessageBox.show({
			title:"修改的数据为",
			msg:title+"\r\n"+author+"\r\n"+clk+"\r\n"+addtime+"\r\n"+checked,
			icon: Ext.MessageBox.INFO,
			buttons: Ext.Msg.OK
		})
	}
	
	function rendererData(value,metadata,record){
		if(isEdit){
			var index = cbstore.find(Ext.getCmp('authors').valueField,value);
			var record = cbstore.getAt(index);
			return record.data.name;
		}else{
			return value;
		}
		
	}
})

editgrid.asp：时间关系，只简单做了些测试数据。

  1. <%
  2.     Response.ContentType = "text/html"
  3.     Response.Charset = "UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. '查询时获取的参数。
  12. query = Request("query")
  13. If start = "" Then
  14.     start = 0
  15. End If
  16. If limit = "" Then
  17.     limit = 50
  18. End If
  19. sorts = Replace(Trim(Request.Form("sort")),"'","") 
  20. dir = Replace(Trim(Request.Form("dir")),"'","")
  22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
  23. If query = "newstitle" Then
  24.     Echo("{")
  25.     Echo("""total"":")
  26.     Echo("""1")
  27.     Echo(""",""items"":[")
  28.     Echo("{")
  29.     Echo("""title"":""newstitle""")
  30.     Echo(",")
  31.     Echo("""author"":""author""")
  32.     Echo(",")
  33.     Echo("""hits"":""100""")
  34.     Echo(",")
  35.     Echo("""addtime"":"""&Now()&"""")
  36.     Echo("}")
  37.     Echo("]}")
  38. Else
  39. Dim counts:counts=20
  40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
  42. Dim Ls:Ls = Cint(start) + Cint(limit)
  43. If Ls >= counts Then
  44.    Ls = counts
  45. End If
  47. Echo("{")
  48. Echo("""total"":")
  49. Echo(""""&counts&""",")
  50. Echo("""items"":[")
  51. For i = start+1 To Ls
  52.    Echo("{")
  53.    Echo("""id"":"""&i&"""")
  54.    Echo(",")
  55.    Echo("""title"":""newstitle"&i&"""")
  56.    Echo(",")
  57.    Echo("""author"":""author"&i&"""")
  58.    Echo(",")
  59.    Echo("""hits"":"""&i&"""")
  60.    Echo(",")
  61.    Echo("""addtime"":"""&Now()&"""")
  62.    Echo(",")
  63.    If i Mod 4 = 0 Then
  64.       Echo("""checked"":""true""")
  65.    Else
  66.       Echo("""checked"":""false""")
  67.    End If
  68.    Echo("}")
  69.    If i<Ls Then
  70.       Echo(",")
  71.    End If
  72. Next
  74. Echo("]}")
  75. End If
  76. Function Echo(str)
  77.    Response.Write(str)
  78. End Function
  79. %> 
<%
	Response.ContentType = "text/html"
	Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
'查询时获取的参数。
query = Request("query")
If start = "" Then
	start = 0
End If
If limit = "" Then
	limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","") 
dir = Replace(Trim(Request.Form("dir")),"'","")

'测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
If query = "newstitle" Then
    Echo("{")
    Echo("""total"":")
    Echo("""1")
    Echo(""",""items"":[")
    Echo("{")
	Echo("""title"":""newstitle""")
	Echo(",")
	Echo("""author"":""author""")
	Echo(",")
	Echo("""hits"":""100""")
    Echo(",")
    Echo("""addtime"":"""&Now()&"""")
    Echo("}")
    Echo("]}")
Else
Dim counts:counts=20
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
   Ls = counts
End If

Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
   Echo("{")
   Echo("""id"":"""&i&"""")
   Echo(",")
   Echo("""title"":""newstitle"&i&"""")
   Echo(",")
   Echo("""author"":""author"&i&"""")
   Echo(",")
   Echo("""hits"":"""&i&"""")
   Echo(",")
   Echo("""addtime"":"""&Now()&"""")
   Echo(",")
   If i Mod 4 = 0 Then
   	  Echo("""checked"":""true""")
   Else
   	  Echo("""checked"":""false""")
   End If
   Echo("}")
   If i<Ls Then
      Echo(",")
   End If
Next

Echo("]}")
End If
Function Echo(str)
   Response.Write(str)
End Function
%>

由于4.x有了重大更新，所以很多在3.x中的东西在4.x里并不好使，直接导致了本文迟迟没有发表，原因就出在了更新下拉框后，Grid中显示的是ID号而不是name值。一番查看API及研究，终于发现问题所在，3.x中renderer combobox在4.x并不好用，最后重新读了一遍自己写的代码，才有所顿悟。希望文章能起到一个抛砖引玉的作用，大家一起进步。

stefshawn
关注
专栏目录
ExtJS4学习笔记(十二)---ExtJS4 EditGrid(可编辑的Grid)
08-30 5439
上一篇文章，在Grid中加入了多选/全选功能，实际运用中，我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话，更有说服力哦。   HTML
Extjs4.0学习笔记
12-19
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
extjs editgrid示例代码
06-06
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
Ext js 应用系列一：EditGrid
Jimmy Socrates 的专栏
01-06 4747
最近在notes应用中使用Ext js，对于一些被用到的实例，记录下来，以备查阅。我用的Ext  版本比较老，是1.0.1的，艾，现在都2.0了没想到，升级那么快，有机会咱也与时俱进一把。在notes中应用Ext js，我的做法是，将js lib文件，样式文件和图片资源文件，引入到share resource 的file resource下。然后在相应的表单，页面等设计元素中引用。Ext js中的
有关EXTJS中editgrid相关
weixin_33778778的博客
06-14 127
EXTJS 中editgrid是可编辑的一个很好用的grid表格吧。 在初始化editgrid绑定数据时，他可以设置你要显示的数据，要显示几列，列最前边是否要有checkbox，以及它的样式，点击下可以进入编辑状态，在编辑那一列还可以监听事件做你要做的操作。 //初始化EditGrid this.I...
ExtJS4中文教程2 开发笔记 chm
12-13
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
ExtJS学习(四)EditorGrid可编辑表格
热门推荐
分享牛
03-12 2万+
操作表格有一种需求，要操作表格需要动态的添加内容，删除内容以及双击的时候进入编辑状态。这个时候怎么办呢，看具体的实现吧。 双击点击的时候可以单元格的操作。 代码：
Ext Js 验证EditGrid中的数据
泥水匠
12-06 2227
<br />EditGrid 里只能进行非空验证，用allowBlank来进行设定，而我们后insert进的空行，却验证不了，而将空的数据提交到后台明显是不可取的，而EditGrid 没有实现这个功能，需要我们手动在提交前进行判断，实现代码如下：<br />        var modrows=store.modified.slice(0);<br />        for(var i=0;i<m.length;i++){<br />            var record=modrow
EditGrid(可以编辑的网格控件)
03-16
基于MSHFlexGrid扩展而成 提供可以编辑的网格控件 全面兼容MSHFlexGrid的属性和方法 适用于数据库开发中的单据子表输入 也可做为属性列表框使用 同时还提供了内部使用的3个自定义控件: 数字输入控件 带多列下拉列表框的文本控件(可做参照输入) 下拉日期控件(可以代码呼出下拉日期) 请从主页 http://progame.vip.myrice.com/ 下载此控件的最新版本!!!!! 示例图请见：http://progame.vip.myrice.com/editgrid/ 已帮助手册 打包发布的时候记得带上MSHFlexGrid控件才能在客户端正常使用
Extjs可编辑的EditorGridPanel
07-26
NULL 博文链接：https://zxf-noimp.iteye.com/blog/629629
ExtJs实现EditGrid中的增删改查操作（2）
03-26
NULL 博文链接：https://huoyunshen888.iteye.com/blog/1134425
EXTJS4.x之可编辑的grid
yunji3344的专栏
06-14 5828
先看完http://blog.csdn.net/yunji3344/article/details/8789876这里。本文是基于上面一篇文章的修改。 修改以下几个java文件 News.java package org.extbook.pojo; import java.io.Serializable; import java.util.Date; import javax.pers
ext学习 editGrid
花开的声音
11-26 119
设置 可编辑Grid 单击进行编辑：clicksToEdit:1,
ExtJs学习笔记 -- grid编辑功能的实现
weixin_34128501的博客
03-11 155
2019独角兽企业重金招聘Python工程师标准>>> ...
EditGridPanel
hilterlan的专栏
07-04 208
Ext.onReady(function(){ /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容，出现三角号表示已经被...
ExtJs4入门学习笔记概览
10. **EXTJs2.0学习笔记**：这部分笔记可能涵盖了EXTJS2.0的一些基础知识，如Ajax操作、数据模型、Panel的使用和事件处理，虽然不是EXTJS4的内容，但可以帮助理解EXTJS的基本原理和工作方式。 EXTJS4的优缺点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值