Sencha Inc. | HTML5 Apps

Grid Editor ASP Access

Published May 05, 2008 | Craig Mandsager | Tutorial | Medium
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.

This tutorial starts off with the ASP version of grid-php posted by Michael LeComte and then extends it. JScript ASP is a natural for dealing with JSON, the data structures transfer easily back and forth between ASP and Ext. If you’ve put off converting your ASP applications to ASP.NET; you now have a good excuse to delay even longer.
To start, download the zip file and extract to your Ext examples directory (examples/grid-asp). This contains not only the ASP files necessary for this tutorial but in the “php2JSP” directory you’ll find ASP versions of all the php files used in other Ext Examples. There is a function runSQL to mirror PHP’s mysql_query and a JSON library file to mirror PHP’s built-in JSON. The JSON code was translated to JSP from Michal Gabrukiewicz’s GAB library. If you prefer VBscript ASP you’ll want to download the original. The basic usage is:

var myJSON = new JSON();
myJSON.class_initialize(doEscapes,toResponse); //doEscapes=true/false, toResponse=true/false
data = myJSON.toJSON(null, rowsA, false);
// arg1=add a wrapping object name such as "results"
// arg2=the object/array/class to convert
// arg3=nested indicates value pair already nested within another

More comments are in JSON.asp and there is a test harness testJSONjs.asp if you want to extend the class or find problems with it.

Begin

Open grid-editor-access.asp ,the server side code. You need to edit this file and change variable MM_connAccess_STRING to indicate the location of the database. If you haven’t already, create a virtual IIS directory pointing to your Ext directory. Configure it to run scripts and enable parent paths. In Firefox, open up grid-editor-access-asp.html and you should see the stock grid. Go ahead and mess around with this, changing a few entries, while looking at the server posts in Firebug (if you ever want to restore the database to it’s original state, use 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.

TASK 1: add a validator

Here is the first task: add validation to the company name to only accept alpha-numeric and _ - . (underscore,dash,period) . Good validation specifies what is accepted rather than what is not accepted. Start off by looking at the Ext documentation for Textfield.
Hint: one might expect the textfield’s regex to work :

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

A little testing shows it has some quirks. Instead, try writing a custom validator using this regular expression which matches anything we are NOT looking for:

myREconameNOT = /[^a-zA-Z0-9_\-\. ]/g;

The function should return an error string if we find one of these dis-allowed characters and true if all is ok.

TASK 2: add a column

Add a new grid column for company description. Use the variable enDesc for the column name.
Hint: you’ll need to modify the database, the column model and data record. No need to change the asp code, it is good to go.

TASK 3: popup box

Add a popup box showing the full description when the user mouses over the description column.
Hint: you’ll want to define a custom render function that passes the value straight through but also sets ext:qtip as well, call the function renderTip:

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

TASK 4: add a 2nd language

Add a 2nd language for Company Description controlled by the querystring (could also be controlled by ASP session or cookie). Let’s add Chinese and call the new database field zhDesc and the querystring will be lang=zh or lang=en
Hint: There are many ways to implement multilingual support and this may not be the best solution but it is probably the shortest code-wise, you can do this adding a few lines and changing some existing lines.
Hint2: look at how we’ve named the database fields: zhDesc and enDesc
Post some more ideas on the forum.

ANSWERS

TASK 1 answer

validateOnBlur : true,					
//custom validator function
validator: function(value){		
   re = new RegExp(myREconameNOT);
   // return true if NOT found
   return ( (!re.test(value))?true:"You must enter alpha-numeric-(_.-) only"  );
   }

TASK 2 answer

// data source
{name: 'enDesc'}, 	
{name: 'price', type: 'float'}, 	
.
.
.
// column model
{                         
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
   })
},
Share this post:
Leave a reply

Written by Craig Mandsager

Commenting is not available in this channel entry.