ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
2008-08-29 12:45
453 查看
这一节，我们将看到ExtJs功能强大的可编辑网格控件，几乎与VS.Net的GridView功能一样了，但是ExtJs的可是纯JS的UI
一.静态示例(改自ExtJs的官方示例)
a.因为我们是采用xml做为数据源的，这里贴出xml的内容
<?xml version="1.0" encoding="utf-8"?>
<catalog>
<plant>
<common>红竹</common>
<botanical>产自加拿大</botanical>
<zone>4</zone>
<light>喜阴</light>
<price>2.44</price>
<availability>03/15/2006</availability>
<indoor>0</indoor>
</plant>
<plant>
<common>紫罗兰</common>
<botanical>Erythronium americanum</botanical>
<zone>4</zone>
<light>半阴半光</light>
<price>9.04</price>
<availability>02/01/2006</availability>
<indoor>1</indoor>
</plant>
</catalog>
b.ExtJs调用页面
<!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"/>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<title>可编辑的网格</title>
</head>
<body>
</script>
<select name="sellight" id="sellight" style="display: none;">
<option value="阴">阴</option>
<option value="喜阴">喜阴</option>
<option value="半阴半光">半阴半光</option>
<option value="喜光">喜光</option>
<option value="日光">日光</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
二.结合WCF动态读取
1.WCF服务端
[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")]
public T_Class[] GetData()
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
<title>可编辑的网格</title>
</head>
<body>
</script>
<select name="selType" id="selType" style="display: none;">
<option value="shop">商家分类</option>
<option value="product">产品分类</option>
<option value="place">地区分类</option>
</select>
<form id="form1" runat="server">
<div id="editor-grid"></div>
</form>
</body>
</html>
转载请注明来自"菩提树下的杨过"/article/4607612.html
一.静态示例(改自ExtJs的官方示例)
a.因为我们是采用xml做为数据源的，这里贴出xml的内容
<?xml version="1.0" encoding="utf-8"?>
<catalog>
<plant>
<common>红竹</common>
<botanical>产自加拿大</botanical>
<zone>4</zone>
<light>喜阴</light>
<price>2.44</price>
<availability>03/15/2006</availability>
<indoor>0</indoor>
</plant>
<plant>
<common>紫罗兰</common>
<botanical>Erythronium americanum</botanical>
<zone>4</zone>
<light>半阴半光</light>
<price>9.04</price>
<availability>02/01/2006</availability>
<indoor>1</indoor>
</plant>
</catalog>
b.ExtJs调用页面
<!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"/>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<title>可编辑的网格</title>
</head>
<body>
</script>
<select name="sellight" id="sellight" style="display: none;">
<option value="阴">阴</option>
<option value="喜阴">喜阴</option>
<option value="半阴半光">半阴半光</option>
<option value="喜光">喜光</option>
<option value="日光">日光</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
二.结合WCF动态读取
1.WCF服务端
[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")]
public T_Class[] GetData()
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
<title>可编辑的网格</title>
</head>
<body>
</script>
<select name="selType" id="selType" style="display: none;">
<option value="shop">商家分类</option>
<option value="product">产品分类</option>
<option value="place">地区分类</option>
</select>
<form id="form1" runat="server">
<div id="editor-grid"></div>
</form>
</body>
</html>
转载请注明来自"菩提树下的杨过"/article/4607612.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记 Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- EditorGridPanel的网格样式以及编辑属性设置
- ExtJS4学习笔记二－－表单控件相关
- ExtJS学习笔记(四) Datetime控件
- extjs EditorGridPanel禁止某些单元格编辑
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- ExtJS学习笔记之五------- GridPanel
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJS2.0 可编辑表格EditorGridPanel
- extjs学习笔记（五）可编辑的grid
- ExtJs学习笔记(3)_GridPanel[XML做数据源]
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJS学习笔记（七） 使用树控件TreeNode
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- ExtJS学习之EditorGridPanel