教程:可编辑的Grid(ASP+ACCESS版)

本教程会从仿照grid-php开始——不过这次是微软Asp的版本，并有所添加内容。JScript语法的ASP天生与JSON结合，使得来回ASP与Ext之间的数据结构变得轻松。如果有许多ASP程序转换为ASP.NET的，那么这是一个好的理去推膛，甚至很久一段时间内也不用换。

好，咱们开始！下载zip包的内容到你Ext例子的目录(examples/grid-asp)里面的内容不但包含了ASP所需要的文件，还包括了“php2Jsp”的目录，这是参照php版所转换的，其中是把PHP的mysql_query中的runSQL函数克隆过来，而且克隆PHP内建的JSON库。JSON代码移植自Michal Gabrukiewicz的GAB库。若打算使用VBScript的ASP可用回原版。其本用法是：

var myJSON = new JSON();
myJSON.class_initialize(doEscapes,toResponse); //doEscapes=true/false, toResponse=true/false
data = myJSON.toJSON(null, rowsA, false);
// 参数一：加入一个Wrap对象，如：“results”。
// 参数二：要转化的对象/数组/类。
// 参数三：nested indicates value pair already nested within another

1 开始
1.1 任务一、加入验证器
1.2 任力二、加入列
1.3 任务三、popup box
1.4 任务四、添加第2种语言
2 ANSWERS
2.1 TASK 1 answer
2.2 TASK 2 answer
2.3 TASK 3 answer
2.4 TASK 4 answer

开始
打开服务端代码grid-editor-access.asp，你需要根据数据库的位置修改该文件的MM_connAccess_STRING变量，还有就是，创建一个IIS虚拟目录来指向你的EXT目录。配置一下IIS使得脚本能跑起来并指向父目录，在浏览器Firefox中，打开后grid-editor-access-asp.html。你应该会看见一个关于股票的grid。试试改变一些条目，摸下门路，从中观察Firebug那里从服务端上接受了什么的变化（如果要你恢复原来的状态，用sock.sql恢复）。

Now open grid-editor-access-asp.js, which has changed very little from Michael’s original file. The data format was changed to accommodate Access format dates. The .php files were changed to .asp. We are going to add a few extras. You might want to backup the original grid-editor-access-asp.js before starting. A good tutorial should first ask you to attempt a task yourself, give some hints and finally give the answer so I’ll try to follow that pattern here and you can always look in grid-editor-access-asp-final.js for the final working version.

任务一、加入验证器
第一个任务是，加入针对公司字段的验证，其格式形如“字母－数字”，跟着_ - .（下划线、破折号、句号）。好的验证器就是指定哪些可通进的哪些不能通过的。可看看Ext关于Texfield组件的文档。
提示：下面是我们用在fextfield而设计的正则：

var myREconame = /^[a-zA-Z0-9_\-\. ]+$/g;
...
editor: new Ext.form.TextField({ 
  allowBlank: false, 
  regex: myREconame
  })

任力二、加入列
接着加入用于公司描述的列，变量enDesc是列名称。

提示：你不需要修改数据库。列模型和数据record对象，不需要修改asp代码，好就好在这儿。

任务三、popup box
Popup lox的作用是当用p把留枝移到某一到时即全显示到的倍定。

提示：如果你想简单地把字段空容就设另外设写ext:qtip; 就这样是renderTip。

dataIndex: 'enDesc',
sortable: false,
renderer: renderTip, 

任务四、添加第2种语言
为公司描述添加第2种语言，可由url的querystring字符串控制（同样道理也可以是ASP的Session对象或Cookie）。假设加入中文并调用新的数据库字段zhDesc，那么queryString将是lang=zh或lang=en。
提示一：大家可能有许多支持多语言的方案，这里所介绍的仅是最简单直接的一种。你可在这个基础上再设计一下。
提示二：观察我们已加入zhDesc和enDesc数据库字段，不妨从论坛上多采集意见。

ANSWERS
TASK 1 answer

validateOnBlur : true,					
//自定义验证函数
validator: function(value){		
   re = new RegExp(myREconameNOT);
   // 如果找不到返回true
   return ( (!re.test(value))?true:"You must enter alpha-numeric-(_.-) only"  );
   } 

TASK 2 answer

// 数据源
{name: 'enDesc'}, 	
{name: 'price', type: 'float'}, 	
.
.
.
// 列模型
{                         
header: "Description", 
width: 32, 
sortable: false,
dataIndex: 'enDesc',
editor: new Ext.form.TextField({
     allowBlank: true,  
     maxValue: 512
     })
}, 

TASK 3 answer
function renderTip(value,p,record){
p.attr = 'ext:qtip="'+value+'" ext:qtitle="Full Text"';
return value;
};

TASK 4 answer

var mylang="en";
	var theurl = window.location.toString();
	theurl = theurl.replace(/^http.*\?/,"");
	mystuff=Ext.urlDecode(theurl, true); 
	if(mystuff["lang"] !="" && mystuff["lang"]!=null)
	   mylang=mystuff["lang"];
 
// 
...
   {name: mylang+'Desc'},
//
...
   {                         
   header: mylang+" Description", 
   width: 32, 
   sortable: false,
   renderer:renderTip,
   dataIndex: mylang+'Desc',
   editor: new Ext.form.TextArea({
   allowBlank: true, 
   maxValue: 512
   })
},

Author: Craig Mandsager(译者：Frank Cheung)
Recived from "http://extjs.com/learn/Tutorial:Ext20_Grid_Editor_ASP_Access_%28Chinese%29":