Ingredients

Twitter bootstap -> http://twitter.github.io/bootstrap/index.html

Let’s start with the end first (here’s what you are getting yourself into):

I am posting the code to github as well as including it in this post, so feel free to pull it down from there and *hint* *hint* fork it and improve the validation methods if can ….  as it will probably come down in a cleaner format than cut and paste would have given you.

https://github.com/jmcdonald69124/jQuery-Bootstrap-Feedback-Sliding-Form

.rotate {
/* Safari, Chrome */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Older versions of IE */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
	transform: rotate(-90deg);
}
		
.required {
	background-color:#F2DEDE !important;
	border: 1px #F00 solid !important;
}
		
.feedback {
	position	: fixed; /* This will never scroll out of view */
	background-color: #2F96B4;
	border		: 5px solid #333;
	color		: #FFF;
	font-weight	: bold;
	font-size	: 16px;
	padding	: 15px;
}
		
.feedback-form-wrapper {
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen. 
*/
display		: block;
	z-index		: 9999; /* Make sure it floats a little higher than the feedback form div below */
	top		: 100px;	
	left		: -395px; /* Bring the div in and hide the left (top) border */
	width		: 350px;
}
		
/* This will put some distance between the input box and the next label */
.feedback input{
	margin-bottom:5px;	
}
		
.feedback legend{
	color		: #FFF;	
}
		
.feedback-toggle {
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen. This div should slide with the form so that it provides a 
close button when the form is slid into view.
*/
left		: -49px; /* Bring the div in and hide the left (top) border */
	left		: -10px\9; /* Less Than IE9 Hack - Bring the div in and hide the left (top) border */
	top			: 200px;
	cursor		: pointer;
	padding-left: -75px;
	width		: 90px; /* Since this is getting rotated width appears as height to the eye*/
	height		: 15px; /* Since this is getting rotated height appears as width to the eye*/
	text-align	: center;
	border-top	: 5px solid #2F96B4;
	border-left	: 4px solid #333;
	border-right: 4px solid #333;
	z-index		: 10000; /* Make sure it floats above the content */
}

Of course, before I explain it would be nice to see the HTML that this code is modifying.

<!-- 
	This is the feedback form that gets toggles in and out of view
	based on the user clicking the 'feedback_toggle' div.
-->
<!-- **************************************************************  --> 

<div class="feedback feedback-toggle rotate" >Feedback</div>
<div class="feedback feedback-form-wrapper">
<form id="feedback-form" class="form-horizontal">
      <legend>Please give us feedback .. </legend>
          	<div class="alert alert-error" 	style="display:none">
	<h4>Uh-Oh</h4> 
                    Looks like some of the required fields are not complete!
	</div>
                <div class="alert alert-success" 	style="display:none">
	<h4>Thanks!</h4> 
                    Your feedback has been submitted, we'll get back to you as soon as we can!
	</div>
                <div class="alert alert-block" 	style="display:none">
                  <h4>Warning!</h4>
                  Something happened and the form did not get submitted...
                </div>
            	<label>Name</label>
                    <input type="text" id="username"  	data-validation='{"required":true,"type":"text"}' 	name="username" class="input-block-level"   >
                <label>Email</label>
                    <input type="email" 	name="email"  	data-validation='{"required":true,"type":"email"}'  class="input-block-level"  >
                <label>Message</label>
                    <textarea id="comment" 	name="comment"  data-validation='{"required":true,"type":"text"}' 	class="input-block-level" style="margin-bottom:10px;"  rows="4" cols="30"></textarea>
                <button class="btn btn-inverse btn-large pull-right"  float="right">Send</button>
 </form>
</div>
<!-- **************************************************************  -->

And finally, the JavaScript that is needed to make all of this work:

// This is the Feedback toggle functionality it slides the feedback form in and out
// of view when the user clicks the div with the class .feedback-toggle
$('.feedback-toggle').click( function(){
	var 	left = parseFloat($('.feedback')[0].style.left.match(/[0-9]+/g)) || 49,
		tgl	 = '+=390';
	      	(left > 49)  ? tgl = '-=390' : tgl = '+=390';
		$('.feedback').animate({ left: tgl}, 500);
});
		
/*
This is the custom validation for the feedback form 
	I have left the types open in the switch statement feel free 
	to add.
*/
validate = function(form,element){
    var isValid = false, // Assume that everything starts off invalid
          fields  = $(form).find('[data-validation]'), //<-- Should return all input elements in that specific form.
         data,
         validationProps;
       $.each(fields, function(index, value){
	validationProps 	= $(value).data('validation');
  
	if(validationProps.required){
	      ($(value).val().length > 0 )? $(value).removeClass("required") : $(value).addClass("required");	
	}
					  
	if(!typeof validationProps.minlength === 'undefined' && parseFloat(validationProps.minlength) > 0){
	      ($(value).val().length > parseFloat(validationProps.minlength))? $(value).removeClass("required") : $(value).addClass("required");
  }
					  
 switch(validationProps.type)
{
	case "email":
		var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
		//console.log(validationProps.type);
		//console.log($(value).val().match(re));
		 ($(value).val().match(re))? $(value).removeClass("required") : $(value).addClass("required");	
	break;
	case "phone":
		// add code here 
	 break;
	case "numeric":
		// add code here 
	break;
	default:
	}
});
	isValid = ($(form).children().is('.required'))? false : true;	
	 (isValid)? $(form).find('.alert-error').fadeOut('fast') : $(form).find('.alert-error').fadeIn('fast') ;
	return isValid;
}
		
// This handles the on focus and on focus lost validation
$('input,textarea').on('blur', function(){
  	validate($(this).parent('form'),$(this).attr('id'));
}).on('focus', function(){
  	$(this).removeClass("required");
});
		
// This is the form submission AJAX code which also
// hides the feednack form.
		
$("#feedback-form .btn").click(function() {
	var url  	= "path/to/your/script.php", // the script where you handle the form input.
	data 	= $("#feedback-form").serialize(),
	isValid   = validate("#feedback-form");
	if(isValid){
		$.ajax({
			type	: "POST",
			url	: url,
			data	: data , // serializes the form's elements.
			success	: function(data){
				$('.feedback').find('.alert-error').fadeIn('fast');
				$('.feedback').animate({ left: '-=390'}, 500);
			},
			error	: function(data){
				$('.feedback').find('.alert-block').fadeIn('fast');
				return false;  
			}
		});
	}
	return false; // avoid to execute the actual submit of the form.
});

Ok, now for the explanation, rotate is pretty simple, as it just rotates the div that will serve as the ‘tab’ for the feedback page. It’s important to wrap your head around this concept, once the div is rotated the left hand side of the div is the bottom, the right the top, and the top the left, you get the idea, so if you want to make changes to the height, as you see it, you are making changes to the width.

The CSS

The feedback class contains the background color, font color and size, and border color / size for both the tab and the main form. The feedback form wrapper class contains the code that will be applied to a div that surrounds the actual web form, this CSS will bring the feedback form above the actual page by setting the z-index to 9999, and will position the form outside of the viewable area of the page by setting the value of left to be at -395. Notice the width is 350 pixels. To give the effect of having the tab the toggle area is raised above the form wrapper with a z-index of 10000, and is given a left that positions the top of the div (remember it’s been rotated) right off of the left hand side of the screen. There is a hack here to deal with IE versions less than 9. Ok, so now our CSS is set up and everything should be positioned right when we start to place out HTML code into the page.

The HTML

Ok, the form tag uses the bootstrap CSS class form-horizontal and has the ID feed-back form, the ID will be instrumental in the operation of this widget later on when we get into the JavaScript part of the tutorial. Under the legend tag are three DIVs that contain three different messages which we will use to indicate a successful AJAX submission, an unsuccessful AJAX submission, and finally, a problem with the required input AKA a validation error. Moving on to the input and text area elements, you will notice that they all have the class input-block-level, which also comes from the bootstrap CSS and just makes the element scale to the width of the container, and gives it that cool rounded look.

One thing that may strike you is the use of the HTML5 data attribute, and the fact that is some JSON in the value, this will be used to tell the JavaScript what type of validation should be done on each of these elements. I will explain this in the JavaScript explanation section. The button has several classes applied to it, and all of them come from the bootstrap CSS. Again, it looks cool, that’s why you decided to use it, right! Anyway, this is how you get that great button in no time flat.

The JavaScript

Ok, now for the JavaScript, which will come in and do all of the heavy lifting. First, we need to be able to slide the form into the page and back out again. The trick here is that the tab needs to be attached and needs to slide in at exactly the same time as the main form. This takes only six lines of code.

<br />
$('.feedback-toggle').click( function(){<br />
	var left = parseFloat($('.feedback')[0].style.left.match(/[0-9]+/g)) || 49,<br />
		tgl	 = '+=390';<br />
		 (left &gt; 49)  ? tgl = '-=390' : tgl = '+=390';<br />
		$('.feedback').animate({ left: tgl}, 500);<br />
});<br />

Ok, so line one we attach the function to the feedback-toggle div, nothing fancy, remember that we have the class feedback which controlled the font and background properties. Breaking these common elements out into a separate class was great in itself, but now we are going to use it to sort of tie the form to the tag by making the slide out / in code act on the feedback class. The second line gets the current value for the left hand position of the feedback DIV, the variable tgl is set by default to +=390 which will be the amount that we want to increase the CSS value of left for that DIV. The line after that contains a ternary operator which tests for left greater than 49, if that is true set tgl to -+390 otherwise, well, you know. Finally, the line $('.feedback').animate({ left: tgl}, 500); is what actually does the sliding.

Moving on we come to the custom validation part of the form, I needed to do this, because , once again, there seemed to be no good validation plugin that worked with the latest version of jQuery which is bundled with bootstrap. I plan to reuse it so it just takes the form id as a parameter, the form element is something I want to expand on in a later post. Notice the lines below:

<br />
// This handles the on focus and on focus lost validation<br />
    $('input,textarea').on('blur', function(){<br />
        validate($(this).parent('form'),$(this).attr('id'));<br />
    }).on('focus', function(){<br />
                $(this).removeClass("required");<br />
            });<br />

This code attaches the validate event to all of the textareas and input elements on the page. You could easily change it to be form specific by placing a dom selector before the first section of code. Basically, this calls the validate event on focus and on lose focus of each of those elements. The form id is being passed to the function as well as the attribute id.

Once the code hits the validate function, it checks to see if there is a value in the data attribute data-validation. The code is set up to take a JSON string that contains the basic validation settings, so far, these are:

required -> true or false

minlegth -> number only

type -> email, phone, or numeric, of which only email has been coded as of yet.

Tests are made against the values in the input elements based on the settings above, and a simple true or false boolean is returned.

Finally, the code to submit the form data is fairly straightforward, first, check to see if the form is valid before submitting, then post the values to some server side script, and display the appropriate message to the user depending on what happened with the validation and submission. If all goes well hide the form by sliding it back out.

First, you should go to the Bootstrap page http://twitter.github.io/bootstrap/components.html#pagination and take a look at the pagination example. The code from the page above is below.

<div class="pagination">
<ul>
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
</ul>
</div>

That’s all there is to building the widget that provides the pagination bar on your page, and admit it looks pretty cool out of the box, but this is just the UI, there is nothing on the page to show you how to use it. Now that you have taken a look let’s set up a real world working set of div’s and the corresponding li options.

<div class="pagination-container" >

   <div data-page="1" >
    	Content for Div Number 1
   </div>
   <div data-page="2" style="display:none;">
    	Content for Div Number 2
   </div>
   <div data-page="3" style="display:none;">
    	Content for Div Number 3
   </div>
   <div data-page="4" style="display:none;">
    	Content for Div Number 4
   </div>
   <div data-page="5" style="display:none;">
    	Content for Div Number 5
   </div>

   <div class="pagination pagination-centered pagination-large" style="position:absolute; bottom:0;">
       <ul class="page_control ">
            <li data-page="-" ><a href="#" >&lt;</a></li>
            <li class="active" data-page="1">
                <a href="#" >1</a>
            </li>
            <li data-page="2"><a href="#" >2</a></li>
            <li data-page="3"><a href="#" >3</a></li>
            <li data-page="4"><a href="#" >4</a></li>
            <li data-page="5"><a href="#" >5</a></li>
            <li data-page="+"><a href="#" >&gt;</a></li>
      </ul>
   </div>

</div>

Now, let me explain what has been added to the example code from the Bootstrap page. To start things off I wrapped the content div’s as well as the pagination widget in a div named pagination-container, this step is crucial as the JQuery JavaScript will later use this as a way to find the child div tags. Next, notice the inclusion of the div’s that will contain the content you would like to switch out. Inside these tags you will have noticed that there is an attribute named data-page and each div has a numerical value starting at 1. The data attribute is a new to HTML5 and allows you to store name, value pairs inside of any HTML tag. This tag is intended to be a custom data element that should store private data for which there are no more appropriate attributes or elements. You can read more about the data attribute at w3.org. JQuery happens to have a nice set of built in methods that allow you to access and use the values that can be found in the data attribute. For an in depth look at Jquery.data() take a look at the following resource (http://api.jquery.com/jQuery.data/). After looking at the content holders , you may have noticed the inclusion of the inline style attribute on the container that holds the bootstrap.

style="position:absolute; bottom:0;"

The CSS above just positions the paginator to the bottom of the pagination-container div. This is pretty important as you want to give the appearance that the paginator is static, and it would jump when the height of the content tags change otherwise.

var paginationHandler = function(){
	$('.page_control li').unbind('click', paginationHandler);
	var currentPage		= $(this).data('page'),
	       activePage		= $(this).parent().find('.active').data('page'),
	       num_elements 	= $(this).parent().children().length,
// This equals the first data-page value after the < button.
	       start		= 1,
 // This is the end of the actual pages, remember it is offset by the < and > buttons.
	      end			= num_elements – 2;
	if(currentPage === '+' ){
	    (activePage < end) ? currentPage = activePage + 1 : currentPage = start;
	}

	if(currentPage === '-'){
	    (activePage > start) ? currentPage = activePage - 1 : currentPage = end;
	}
// Remove the active class to the li
	$(this).parent().find('.active').removeClass('active');

// Add the active class to the appropriate li taking
        	$(this).parent().find('li[data-page*=' + currentPage + ']').addClass('active');

// Add a fade out / in effect to the div holding the
// actual data. You must have a div with the data-page
// attribute for every li tag that contains the same
// data attribute or you will get unreliable
// results.

$(this).parents("div .pagination-container").find('div[data-page*=' + activePage + ']').fadeOut('fast', function(){
       $(this).parents("div .pagination-container").find('div[data-page*=' + currentPage + ']').fadeIn('fast');
	$('.page_control li').bind('click', paginationHandler);
	});
}

$('.page_control li').bind('click', paginationHandler );

// Remove the active class to the li
$(this).parent('ul').children('.active:first').removeClass('active');

// Add the active class to the appropriate li taking
$(this).parent().find('li[data-page*=' + currentPage + ']').addClass('active');

// Add a fade out / in effect to the div holding the
// actual data. You must have a div with the data-page
// attribute for every li tag that contains the same
// data attribute or you will get unreliable
// results.

$(this).parents("div .pagination-container").find('div[data-page*=' + activePage + ']').fadeOut('fast', function(){
$(this).parents("div .pagination-container").find('div[data-page*=' + currentPage + ']').fadeIn('fast');
$('.page_control li').bind('click', paginationHandler );
});

Turns out it is very doable but a long drawn out process in SQL Server to build a .dtsx package that accomplishes the entire task! I have detailed the steps below as I just know that this will come back and be of use later.

 Creating a Job in SQL Server to Import Flat Files

What You Need:

Microsoft SQL Server Management Studio

MSFT SQL server

Overview:

When data comes in from outside sources in flat files that are delimited you need a way to open the files, import the data into the database, and archive the files just in case you have a need to rerun the job, or to take a look at the raw data files in the future. The script will archive the files that have already been processed in folders bearing the month and the year that corresponds with the date the job ran that kicks off the .dtsx package.

Tables:

• processed_files – This table will hold the files that have been processed so that 1) you have a record of what has been done, and 2) if the job fails you at least know where it failed.
• data_table – This is the table that you are importing data into and will change depending on the files that you are importing.

Steps:

• Set up Variables
• Set up data connections
• Displaying and using the toolbox
• Add Foreach Loop Container
• Add Execute SQL Task (Check Processed)
• Add data Flow Task
  • Add Flat File Source
  • Add Multicast
  • Add OLE DB Destination
  • Add Row Count
  • Insert Constraint between Check processed and the Import file Data Flow Task
• Add Execute SQL Task (Register Processing)
• Add Script Task
• Add File System Task (Move Files)
• Add Execute SQL Task (Update processed table)

Create processed files table:

CREATE TABLE [dbo].[file_control]

(

[ImportedFilename] [varchar](100)   NOT NULL,

[RecordsImported]  [int]            NOT NULL,

[ProcessDate]      [datetime]       NOT NULL

)

Set up Variables:

To display the variables window in Microsoft SQL Server Management Studio hover over the ‘View’ menu item then scroll down to the ‘Other Windows’ option, the resulting fly-out menu should display the variables display option.

Figure 1 – View Menu Bar

The table below lists all of the variables needed to set up the file import solution on the server. These variables will be manipulated later by scripts as well as used as output and input parameters in several of the steps we are about to perform.

Figure 2 – FilePath error is variable is left empty

A word about scope:

                  Scope is very important in the processing of the files, you may be tempted to go with the thought that a variable.

Set up data connections

Figure 3 – Connection Managers tab with context menu.

                  This .dtsx package will need three connections to add a data connection you will need to right click on the blank area in the ‘Connection Managers’ tab. You will need three connections:

• New Flat File Connection
• New File Connection
• New OLE DB Connection

New Flat File Connection

The connection to the file is where you will have to set up the column mappings in order to get the data from the file to the table in the database. In this example give the connection the name ‘TextFile_Connection’, the rows are separated by a carriage return {CR}{LF}, the format is delimited, and there is one header row that we have to skip before we get to the actual data. See Figure 4 – Flat File Connection General Tab for a view of these settings.

The ‘Columns’ tab is a bit counterintuitive as it is not where we define the actual columns, it is where we set the column delimiter and the row delimiter for the rows that follow the header. In this instance we are dealing with a tab delimited file and each record is separated from the next by a carriage return. See Figure 5 – Flat File Connection Columns Tab for a view of these settings. You may be tempted to skip the next step, especially if the preview pane shows actual data from your input file; if you do you will miss one of the most important steps. Conversely, if you do not see any data in the preview grid after you navigate to the file you want to import then don’t worry, this is actually pretty common, you can add the columns manually in the next tab. 

The ‘Advanced’ tab, allows you to change the name of the columns as well as change the data type of the columns. If you are dealing with a data file that does not include column headers, or for some other reason you are unable to get the flat file wizard to recognize the  file you have selected you can press the ‘new’ button on the bottom of the screen to add columns to the connection manager. Make sure you rename these columns and match the data type and length to the destination database table. The Advanced tab is displayed in Figure 7 – Flat File Connection Advanced Tab.

Figure 4 – Flat File Connection General

 Figure 5 – Flat File Connection Columns Tab

Figure 6 – A test tab delimited text file with one header row

Figure 7 – Flat File Connection Advanced Tab 

New File Connection (A connection that points to the Processed Folder)

Figure 8 – New File Connection dialog box

                  To set up a connection to the folder that will contain all of the archived files (in their dated folders) you will need to add a file connection. This is pretty straight forward, just change the usage type to ‘Existing Folder’ and browse to the folder on the server. Note that if you are using mapped drives you will need to type the location in the Folder textbox using the server name on this format \\servername\somefolder\destfolder.  The folder you are pointing to must exist before you complete this step.  The File Connection Manager Editor can be seen in Figure 8 – New File Connection dialog box.

New OLE DB Connection

Figure 9 – New OLEDB Connection manager  window

Displaying and using the toolbox

Figure 10 – Show / Hide the Toolbox

                  The toolbox provides drag and drop elements that can be added to the control flow and data flow tabs in SQL Servers Management Studio. It is important to note that the options available within the toolbox change depending on the tab that you are working in. This distinction is usually ignored in many of the online tutorials that you will find, which in leaves the reader wondering why they do not see those options.

To display the Toolbox pane click on the view menu item then press the toolbox icon, or just use the shortcut keys Ctrl+Alt+X.

Figure 11 – Toolbox when Control Flow is displayed

Figure 12 – Toolbox when Data Flow is shown.

The figures above illustrate the different toolboxes. The next section will focus on the items necessary to complete the data import task.

Add Foreach Loop Container

Figure 13 – The Foreach loop Container

The Foreach loop container allows you to loop through a collection of objects. To configure the container double click on it to display the Foreach loop editor which is shown in Figure 14 – Foreach Loop Editor General Tab.

In the General tab change the Name to ‘Loop thru files’.

The next tab is the Collection tab; this is where you will be able to let the container know which directory it is supposed to loop through, as well as which files it should process. In this tab you will have to enter a value in the Folder textbox in the Enumerator configuration section of the application. The Files textbox works just like a file search in windows explorer, so if you wanted to loop through all the text files in a folder you would have to add ‘*.txt’.

The third tab is the ‘Variable Mappings’ tab, and is where we will connect the variable that is specified in the ‘Collection’ tab under the Enumerator configuration section. The variable in this instance will be set to the fully qualified file name.

Finally, in the expressions tab we will set up the variables that will hold the Directory and FileSpec values, this way we can go in later and change them by simply updating the variable’s value. To map the variables just click on the ellipsis in the right hand column of the expressions line of the Foreach Loop editor. Once the Property Expression Editor is displayed you can select a value in the right hand box that you would like to assign the variables value to.  Figure 17 – The Expressions tab of the Foreach Loop Editor shows both the Expressions tab and the Property Expression Editor.

Figure 14 – Foreach Loop Editor General Tab

Figure 15 – The Collection tab of the Foreach Loop Editor

Figure 16 – The Variable Mappings tab of the Foreach Loop Editor

Figure 17 – The Expressions tab of the Foreach Loop Editor

Add Execute SQL Task

                  When looping through the files the application will expect that the incoming data conform to the specifications that are set later in the data flow task. If for some reason the data does not conform to the specifications it will cause the entire job to stop executing. In order to determine where the job stopped running and to provide a means of restarting the job without deleting the data that was successfully input before the job failed it is important to log the file that has been processed and check that this file is not imported twice. This task will check the file log and determine if the file has been run already.

                  First drop the Execute SQL Task Control Flow Item into the Foreach loop container.  Next double click on the container to view the Execute SQL Task Editor, shown in the figure below.

Figure 18 The General tab of the Execute SQL Task Editor

                  In the tab above change the name to read ‘Check Processed’. Change the result set from None to Single Row, then drop down the connection and if you have not added a connection to the database yet click on <New Connection> and add a connection to the database. Given the table structure for the processed files table found on page one place the following SQL in the SQL Statement area.

SELECT COUNT(*) AS Processed FROM file_control WHERE ImportedFilename = ?

                  Notice the question mark in the sql statement, this will receive the value in the parameter mapping tab that we will set up now. In the ‘Variable Name’ column drop down the box and select the FilePath variable that was set up earlier. Note that all variables that are user created will be prefixed with the word User and two colons (::). The directions should be Input, the Data Type is VARCHAR, and of course, this is the 0^th parameter so place 0 in the Parameter Name column.  Adjust Parameter Size according to your file path size; here 200 will cover anything that is thrown at it.

Figure 19 – The Parameter Mapping tab of the Execute SQL Task Editon

                  Next click on the ‘Result Set’ tab and in the Result Name column type in ‘Processed’, and in the variable column drop down the box and select the user defined variable named User::Processed.

Figure 20 – The Result Set tab of the Execute SQL Task Editor

Add data Flow Task

Figure 21 – Data Flow Task with Context Menu visible as well as the data Flow tab visible

Next we will add the data flow task by dragging it inside the Loop thru files container. First, drag the green arrow that comes from the Check processed task that you just created to the new data Flow Task and connect the two.

Double clicking on the data Flow Task will take you to the data Flow tab pictured in the image above, which will allow you to drag and drop additional elements inside of the data flow task. The elements that are available will differ when inside the data flow tab. To rename the Data Flow Task you will have to right click on it and select Rename, at this point give the task the name ‘Import file’.

                  Next , double click the Import file task to change your view to the data Flow tab. Once inside the data flow tab we will need to drag four elements from the toolbox to the tab.         

• Flat File Source element
• Multicast element
• OLE DB Destination element
• Row Count element

After adding these elements connect them by dragging the green lines as shown in the figure below.

Figure 22 – Arraignment of elements in the Import file task 

Add Flat File Source

Figure 23 – The Connection Manager  tab of Flat File Source Editor

                  Double click on the Flat File source element to display the editor window. In the Connection Manager tab you should have the option of selecting the connection manager that points to the flat file you would like to import. You can refer to the file in Figure 6 – A test tab delimited text file with one header row for the file that we are using in this case. Once you have selected the connection move on to the ‘Columns’ section of the editor (pictured in the figure below). The Columns tab will allow you to rename the output from the file into names that actually mean something to you. Here I would suggest using the actual names in the destination table as it will make it easier to map the columns when you get to the OLE DB Destination part of this task. To change the names just click in the Output Column cell and type the name that you would like to be sent to the Multicast element. Once you complete these steps the small red X in the top right hand corner of the element should disappear. You can think of this X as an error in the compiler if you were writing code.

Figure 24 – The Columns  tab of Flat File Source Editor

Add Multicast

                  The Multicast element is one of the few that does not need any changes once placed. This element will simply take the input from the Flat File Source and route it to two locations. In this instance those locations are the DB destination, to actually insert the data into the database, and the row count element to determine how many rows were inserted for logging purposes.

Add OLE DB Destination

                  The OLE DB Destination will point to the table that will receive the data from the file. The SQL to create the test table that corresponds with the test data file in Figure 6 – A test tab delimited text file with one header row is below:

CREATE TABLE [dbo].[file_import_test](

[TestColumn1] [int] NULL,

[TestColumn2] [varchar](200) NULL,

[TestColumn3] [float] NULL,

[TestColumn4] [float] NULL

)

                  First, double click on the DB connection to display the OLE DB Destination Editor (pictured in the image below).  Next, drop down the connection manager and select the connection that points to your database, which should have been set up earlier. You will want to select ‘table or View’ for the data Access Mode, and finally select the actual table where you want the file data to be routed to in the name of the table or the view dropdown box. Finally, we will map the columns from the file to the table columns. Click on the Mappings tab in the left window pane.

Figure 25 – The Connection Manager tab of the OLE DB Destination Editor

If you configured your flat file column names to match the table column names then this part will be pretty easy, just verify that they link up. If not you are left with the task of connecting the file column outputs with the table columns and then connecting them by dragging and dropping the lines between them to the correct columns. Once you complete this task the small red X in the OLE DB Destination element should disappear.

Figure 26 – The Mappings tab of the OLE DB Destination Editor

Add Row Count Element

                  The row count element will count the rows that have been read from the file and store them in the variable that has been designated in the custom properties section of the Component properties tab pictured below. All that needs to be done here is the variable User::Records should be selected from the drop down box in the column next to variable name.

Figure 27 – The Advanced Editor for Row Count

Insert Constraint between Check processed and the Import file Data Flow Task

The final step in the addition of the Import file data flow task is to set up a constraint between the check processed SQL task and the data flow itself. The constraint will make sure that duplicate records do not get inserted into the table. To accomplish this double click the green arrow that connects the two elements to display the Precedence Constraint Editor.

Figure 28 – Precedence Constraint Editor

                  In the window pictured above change the drop down box from the default setting of Constraint to Expression and Constraint. Once this has been completed the Expression text box will open where you enter @Processed == 0, which corresponds to the variable being passed by the Check processed SQL task. Leave the default setting in Multiple Constrains where it is and press OK. 

Add Execute SQL Task (Register Processing)

Next , drag another Execute SQL task element to the Foreach Loop Container and drop it inside the container directly under the data flow task. Right click on the task and rename it ‘Register Processing’.

Figure 29 – The General tab of the Execute SQL Task Editor

                  In the General tab of the Execute SQL task Editor select the database connection from the connection dropdown box. In the SQL Statement text area insert the following SQL:

INSERT INTO file_control (ImportedFilename, RecordsImported) VALUES (?, ?)

Figure 30 – The Parameter Mapping tab of the Execute SQL Task Editor

                  Next click on the parameter mapping tab and add the following parameters to the window on the right hand side, 1) User::FilePath with a direction of Input and a datatype of VARCHAR and a size of 200, and 2) User::Records with adirection of Input and a type of LONG and a size of -1. The parameter name of the first variable is 0 and the parameter name of the second variable is 1.

Add Script Task

Next drag the Script Task element from the toolbox and drop it directly under the Register Processing SQL task.  Right click on the element and give it the name Set Destination. Double click on the element to display the Script Task Editor window.  Make sure the Script language is set to Microsoft Visual Basic 2008 then press the Edit Script … button at the bottom of the window to bring up the code editor. The script that will create archive directories is below and will need to replace the code that is between the following lines:

Public Sub Main()

…..

End Sub

<b>Microsoft Visual Basic 2008 Code</b>

Dim varCollection As Variables = Nothing

Dts.VariableDispenser.LockForRead("User::FilePath")

Dts.VariableDispenser.LockForRead("User::DestinationRoot")

Dts.VariableDispenser.LockForRead("User::MonthStartPosition")

Dts.VariableDispenser.LockForRead("User::MonthNameFormat")

Dts.VariableDispenser.LockForWrite("User::DestinationFolder")

Dts.VariableDispenser.GetVariables(varCollection)

Dim SourceFilePath As String = varCollection("User::FilePath").Value.ToString()

Dim FileName As String = SourceFilePath.Substring(SourceFilePath.LastIndexOf("\") + 1)

Dim DestinationRoot As String = varCollection("User::DestinationRoot").Value.ToString()

Dim MonthStartPosition As Integer = Convert.ToInt32(varCollection("User::MonthStartPosition").Value)

Dim MonthValue As Integer = 0

Dim Yearvalue As Integer

Dim MonthNameFormat As String = varCollection("User::MonthNameFormat").Value.ToString()

Dim FolderName As String = String.Empty

Dim MonthwiseDirectory As String = String.Empty

MonthValue = Month(Now())

Yearvalue = Year(Now())

If FileName.Length > 0 AndAlso MonthValue > 0 Then

FolderName = New DateTime(1, MonthValue, 1).ToString(MonthNameFormat) & " " & Yearvalue

End If

MonthwiseDirectory = System.IO.Path.Combine(DestinationRoot, FolderName)

If Not System.IO.Directory.Exists(MonthwiseDirectory) Then

System.IO.Directory.CreateDirectory(MonthwiseDirectory)

End If

varCollection("User::DestinationFolder").Value = MonthwiseDirectory

Dts.TaskResult = ScriptResults.Success

The code above will create a folder structure for archiving the files that have been processed using a month / year naming convention as shown in Figure 31 – Example of the Archived File Structure.

Figure 31 – Example of the Archived File Structure

                  The parent folder for these monthly folders is determined by the value in the variable DestinationFolder.

Add File System Task (Move Files)

Figure 32 – File System Task Editor General Settings Tab

                  Next drag a File System Task element from the toolbox and drop it inside the Foreach Loop Container under the Script Task then connect the greed arrow from the Script Task to the File System Task. Right click on the element and rename it Move Files. This will be the element that physically moves the files to the archive location.

To move the processed files change the following settings in this order, or it will not work:

Destination Connection Section

• IsDestinationPathVariable = true, this in turn changes the text in the box below it from Destination Connection to DestinationVariable
• DestinationVariable = User::DestinationFolder
• OverwriteDestination  =false

Source Connection Section

• IsSourcePathVariable = true, this in turn changes the text in the box below it from SourceConnection to SourceVariable
• Sourcevariable = User::FilePath

Add Execute SQL Task (Update processed table) 

                  The last task that you have to complete before setting up the job that will kick off this entire process is to drag an Execute SQL Task element to the Foreach Loop Container and drop the element directly below the Move Files element that you just completed. Right click on the object and rename it ‘Update processed table’, as the name suggests this task will actually go out and rename the files appending the word processed to the imported file name so that the application will not skip the file when it is dropped in the new file location tomorrow (this assumes that you are working on files that will be coming in using the same name every day which is very common!).  You should be getting pretty good at the SQL Task object by now so here are the steps required to update the file names.

Figure 33 – Your completed .dtsx package should look like this

Visual Basic and C# date Time Format Specifiers:

http://msdn.microsoft.com/en-us/library/8kb3ddd4.aspx?cs-save-lang=1&cs-lang=vb#code-snippet-2

http://bit.ly/TFkRFe

First, cold fusion ships with some outdated batik files (which handle the cfimage tag) , so you will need to update those first, and add the missing files that will add your svg to -> image processing ability. I used the steps found in this post to accomplish the task; I’ll list them here in short format so you can get into the ext chart part of this project.

1. Stop your cold fusion service
2. Download the files from the batik website http://xmlgraphics.apache.org/batik/download.cgi
3. Rename the jar files in /wwwroot/WEB-INF/cfform/jars/  that start with batik by adding the extension .old
4. Copy the batik jar files into /wwwroot/WEB-INF/lib
5. Restart Cold Fusion

Next, let’s assume that we have two files, one called convertImage.cfm and one called convertImage.cfc, of course, we want to pass the svg markup to the cfm which will pass the data to the cfc for processing.

<cfcase value="saveChart">
        <cfset saveChart = data.saveChart( svg=form.svg) />
        <cfset json = "{'success':'#saveChart#'}" />
</cfcase>

The code below goes in the cfc file.

<cffunction name="saveChart" >
        <cfargument name="svg" />
            <cftry>
            <cfset svgFile = "c:\websites\temp.svg" />
            <cfset jpgFile = replace("c:\websites\temp.svg", ".svg", ".jpg") />
            <cfset pngFile = (pngPath) />--->
            <cffile action="delete" file="c:\websites\temp.jpg" >

	<cfif FileExists(svgFile)>
            	<cffile action="delete" file="c:\websites\temp.svg" >
            	<cffile action="write" file="c:\websites\temp.svg" output="#svg#" >
           <cfelse>
           	<cffile action="write" file="c:\websites\temp.svg" output="#svg#"  >
           </cfif>

            <cfset t = createObject("java", "org.apache.batik.transcoder.image.JPEGTranscoder").init() />
            <cfset svgURI = createObject("java", "java.io.File").init(svgFile).toURL().toString() />
            <cfset input 	= createObject("java", "org.apache.batik.transcoder.TranscoderInput").init(svgURI) />
            <cfset ostream 	= createObject("java", "java.io.FileOutputStream").init(jpgFile) />
            <cfset output 	= createObject("java", "org.apache.batik.transcoder.TranscoderOutput").init(ostream) />
            <cfset t.transcode(input, output) />
            <cfset ostream.flush() />
            <cfset ostream.close() />

            <cfcatch type="any">
          		 <cfreturn "false" />
            </cfcatch>
            </cftry>
        <cfreturn "true" />
    </cffunction>

The function below would go in your javascript controller.

   saveChart: function(me){
        this.dTask.delay(500, function(){
                var svg = me.up('panel').down('chart').save(
                    {
                        type    :'image/svg+xml'
                    }
                );

                Ext.Ajax.request({
                    url: 'convertImage.cfm?remoteEvent=saveChart',
                    params: {
                        svg: svg
                    },
                    success: function(){
                        // process server response here
                        window.open('temp.jpg');
                    }
                });
        });
    },

Using Sencha without the command line tools is like driving an 18 wheeler to deliver the neighborhood mail when a small jeep will do just fine – so I guess what I want to say is yes, if you want responsive apps you will have to learn to love the command line tools or deal with the fact that your app will be burdened with extra weight and needless requests.

In order for all of this to work, your app needs to adhere to the Sencha MVC structure, and your code has to be tight – how tight? In the DateFilter there is a trailing comma which ships with Sencha and was throwing off my build process while the app worked fine.

How

Remember reading ‘in the summer’ a few paragraphs back? It looks like Sencha has been very busy over the past few months releasing beta version after beta version, what hasn’t been too clear is the documentation or the naming  conventions of the old Cmd vs Command vs the Command Line tools in the SDK. The names are so similar the chances of you finding and trying to use the wrong documentation for the version you are using is damn near 100%, however, the improvements are worth all of the time invested, and I cannot imagine starting another project without using Sencha Command!

Easy Steps to a perfect install 

1. For Windows users make sure that you are installing everything from your profile otherwise chances are Ruby and Compass will give you errors, and Sencha Command uses both to create the CSS files for your new app during the build process.

2. Install RUBY by visiting http://www.ruby-lang.org/en/downloads/ and following the instructions for your operating system. If you are developing on a Mac Ruby is installed by default, however, you will need to follow the next few steps.

3. Install Compass (http://compass-style.org/install/ ). This can be done from the command line / or terminal by typing the following commands:

$ gem update –system
$ gem install compass

4. Ok, now here comes the tricky part, you have to install Version 3 of Sencha Command which can be found here for all platforms -> http://www.sencha.com/products/sencha-cmd/download.

5.) Now download Sencha Touch 2.1 or Extjs 4.1a. These are the only versions that will work with the new Sencha Command tools!

6.) Unzip your Sencha Touch or Extjs file to the root of your web directory. At this point you can safely refer to the Touch/Extjs files as your ‘SDK’.

Congratulations, you just installed the command line and set up your web folder, now let’s start a quick Sencha Touch app using the command line tools.

1.) Open the cmd window in Windows or terminal in everything else and change your directory to the ‘SDK’ otherwise known as the Extjs or Touch folder in your web root.

2) Now you will need to generate the basic MVC framework for your new Sencha Touch application, this can be done right from the command line by typing in the following command:

$ sencha generate app /path/to/your/app

3) You should now have a ‘starter’ application in the folder that you specified above (/path/to/your/app). The folder structure should look like this:

Notice that there is a .sencha folder which contains an app and workspace folder, inside the app folder there is a file named sencha.cfg, if you open this file you will see your app name, framework, and directory settings. This is where, you guessed it, you can change the name of your application.

Great, now you have the application set up, let’s look at the steps required to deploy the application to a production environment.

First let’s discuss what ‘builing’ an app does. If you take a look in your ‘SDK’ folder aka Sencha-Touch or extjs notice that there is a file named ext-all.js (around 1.2MB) or sencha-touch-all.js (around 900KB). The file name alludes to the fact that they contain all of the classes in ext or touch minus the UX classes. Chances are good that you don’t actually use all of the classes that are provided by sencha, so why force your users to download all the classes on top of your app.js and MVC javascript files?  If you open up the folder src in your extjs or sencha touch folder you can get a look at the sizes of the individual classes that make up ext-all or sencha-touch-all.

The builder will search your code for class dependencies and compile all of the classes that you need to run your application, next the builder will compile all of your views, models, stores, and controllers into one nice file. Finally, the builder takes the extjs javascript as well as your application javascript and merges the two into one single javascript file. After this is done, the builder then ‘minifies’ your javascript which saves additional space. You gain a few clear advantages:

• You minimize request overhead (https://developers.google.com/speed/docs/best-practices/payload#MinifyJS)
• You minimize round-trip times (https://developers.google.com/speed/docs/best-practices/rtt )
• You minimize payload size (https://developers.google.com/speed/docs/best-practices/payload )

To build your new app just type the following command in the terminal:

$ sencha app build

The first time you issue this command the builder will create a folder named ‘build’ in which will be a folder with your app name. This folder contains your different ‘builds’. The folder named production contains the – you guessed it – production version of your application. Inside you will find the all-classes.js file which is your code plus the extjs code minimized, an ext folder which contains the CSS and any UX files that you may need in addition to any themes, and finally, your resources. It’s the files in this folder that you should push to your production server, they are all that is needed to run your new faster, sleeker, sencha application.

This is just the beginning of what can be accomplished using the new command tools, I’ll try and post some instructions on creating models, alternate versions, and so forth in the future.

/***********************************************
Adds extension validation at the client side
for the extjs File Upload field. You must
set the extension in an array of strings.
 **********************************************/
Ext.define('Ext.ux.restrictiveFileUpload', {
	extend  : 'Ext.form.field.File',
	alias   : 'widget.restfileupload',
	// Array of acceptable file extensions
	// overridden when decalred with a string
	// of extensions minus the period.
	accept      	: [],
	listeners   	: {
    	validitychange : function(me) {
        	// This gets the part of the file name after the last period
        	var indexofPeriod = me.getValue().lastIndexOf("."),
            	uploadedExtension = me.getValue().substr(indexofPeriod + 1, me.getValue().length - indexofPeriod);
 
        	// See if the extension is in the 
                //array of acceptable file extensions
        	if (!Ext.Array.contains(this.accept, uploadedExtension)){
            	// Add the tooltip below to 
                // the red exclamation point on the form field
      	      me.setActiveError('Please upload files with an extension of :  ' + this.accept.join() + ' only!');
           	// Let the user know why the field is red and blank!
            	Ext.MessageBox.show({
                	title   : 'File Type Error',
                	msg 	: 'Please upload files with an extension of :  ' + this.accept.join() + ' only!',
                	buttons : Ext.Msg.OK,
                	icon	: Ext.Msg.ERROR
            	});
            	// Set the raw value to null so that the extjs form submit
            	// isValid() method will stop submission.
            	me.setRawValue(null);
        	}
    	}
	}
});

See, I spent the past three months deliberately not training as I overtrained for a 2010 marathon and had to sit out New York, yes that’s right I got into NY and missed it! Now I was second guessing my lack of training — but what the hell, I could run half and walk the rest if need be. This brings me to rule number 2, if this is your first marathon, finishing is a PR!

Anyway, by now It’s about 6ish in the morning and I made it to the ravens parking lot without any problems and pulled up right next to the finish line in front of the stadium. Rule number 3 – Parking matters – free and close beats the metro any day! You’ve heard the commercial on the radio with the guy that complains about walking too far to the car after finishing a marathon, there’s truth in it! At this point I’m nervous and excited at the same time. I spend the next hour drinking coffee and waiting until a fair amount of people start showing up in front of the stadium, time to walk. The last quarter mile of the race to the start which is right around the corner from the O’s stadium, which was bittersweet knowing that the night before they were taken out of the running by the Yankees. The night before the race I drove around the stadium when there was still hope in the air and people were gathered around a few taxicabs that had their radios on and tuned into the game.

I found the 4:30 pacer group and settled in, the crowd for the marathon was large but not overwhelming like some of the races down the road in DC. The mayor, and CEO of Under Armour spoke followed by the race princess, a six year young lady who has undergone nine major surgeries before the age of 5, then it was time to go. The confetti lasted so long that even after three minutes it was still raining down across the start.

The first three or so miles were all uphill until we reached Druid Hills Park and the Baltimore Zoo, someone on the side of the course was holding a sign that read, “Lion on the loose, casualty count 1,2,3,4, …..”. This scared me a bit being a fan of National Geographic i knew that he animals in the back of the pack were the first ones to go.

I turned the corner and made my way down to the zoo when I noticed a sign that said Marry Me, pretty cool, but I was wondering, couldn’t he place it on say an uphill section where you would want a break?

Through the gates and into the zoo where the zoo staff lined the next half mile or so all holding exotic birds, so I can say I ran past penguins, ravens, and owls while listening to elephants in the background. Next it was all downhill towards the inner harbor where we would meet up with the half marathon crew of like a million runners, of course with that many people you have a lot of spectators (like another million) lining the streets, some of the more memorable signs at this point were:

Chafe today brag forever ….

26.2 miles because 26.3 would be crazy, right?

It’s called a marathon, if it were easy it would be called your mom! (it took me half a mile to get that one)

Run bitches run ..

Back to the race, I was mentally prepared for a flat run around the inner harbor- why? – because this was the flat part of the course in the small elevation map on the website, so all I have to say is Federal Hill, really?

After the hill we ran under the Domino Sugar sign and around the Under Armor headquarters. The race had a contest where the loudest school on the course would get a cash prize, sorry, Federal Prep this one goes to Thomas Johnson. The course wound it’s way back through the inner harbor and we ran under the half marathon arch that was set up at the start …… Only 13.1 miles left! Next we were set to run through little Italy and the east side of Baltimore.

Favorite T-shirt on a runner, “Running Sucks”, around mile 15.

A few miles later we came over a ridge and all we could see was the wall of runners that had started the half marathon, and of course, hundreds of spectators lining the sides of the street, this was it – where the full marathon mixed with the half and we would all run, walk, or crawl together until the end.

The crowd slowed the pace considerably, and at some points I was walking faster than the crowds running pace. I made it to mile 20 in 3 hours and 20 minutes! Turns out that the next six would be the hardest six miles I have ever run, and take almost twice as long as my usual lunchtime run which is six miles long as well. I can remember looking at my Garmin around mile 24 thinking I didn’t know someone could move that slow!

The east side of Baltimore consisted of running uphill forever, but mile twenty marked the ring around lake Montebello like the Italian detective show on MHZ. Before hitting the lake I kept hoping that we would run by a gas station or something that was close to the street so I could get a coke or candy bar, however, the stores were few and far between. The lake would open into residential neighborhoods and a cold drink (other than gatorade or water) was out of the question! The ring around the lake made up a flat mile 21 and 22, at this point I was walking then running and walking, then running … I recall a band set up along the end of the lake but I can’t remember the web address they wrote down right now.

The next few miles were a series of small inclines, but after 20+ miles anything seemed like a mountain, then the hands down most motivating marathon ‘fans’ appeared on top of a Toyota dancing, check out the video below:

This kept me laughing until a few blocks away you turned the corner and could see the finish line below, even tough it’s still a half mile or more out. It’s all downhill through camden yards to the finish!

I never paid much attention to the medal before the race, but if you look real close at the bottom it’s inscribed with the sentence, “what hills don’t kill you make you stronger”, excellent slogan for an excellent race.

Thanks Baltimore! The run couldn’t have been better!

Here’s the link to the stats and an interactive map if you want to check elevation gain loss in a larger screen: http://connect.garmin.com/activity/233056703

It works, but (maybe not how you want it to work) ….. Here’s what I found out:

Why it looks like the edit event is not firing:

The extjs locking grid feature actually works by splitting your single grid into two grids, one with the columns that are locked and one with the columns that are not. Now let’s think about the document object model and how extjs generates html elements for a moment, in a lot of cases you are probably using an ID property in your grid, but when the user locks a column and effectively creates two grids from the initial grid what’s left are two auto-generated IDs. You may have heard many developers preach the evils of hardcoded IDs and now finally, we have a really concrete example of these IDs causing problems.

Problem 1: You created a grid gave it an ID or action property and set up your reference and / or listener on that grid like this:

refs : [
{
    ref         :  'someGrid',
    selector    :  '#someGrid',
    autoCreate  :  true
}
]

Or  added a controller to the grid like this:

'grid[id=someGrid]':{
    edit:this.onSomeGridEdit
}

Your code will not work, this ID no longer exists in the DOM, so no events will ever be called. You WILL need to set up a controller on the grid to listen to the edit event but this controller will have to work for both grids and will have to work independent of any IDs, so here is how you do it:

'grid':{
    edit:this.onCellEdit
}

Notice that we used the xtype only so that the edit applies to both grids. Now you have to set up your onCellEdit function to handle the different columns that the user may edit, the code is below.

onSomeGridEdit: function( editor, e ){
   if(e.originalValue != e.value){
       switch(e.field){
            case 'col_header_one':
                  //do something            
            break;
            case 'col_header_two':
                 //do something   
            break;
        }
    }
}

Finally, I had a few cells that actually popped up a window and I needed to know the ID of the grid so I could *gasp* use Ext.getCmp(), ( admit it this is why you think this feature is broke :-) )to do this I just used:

this.up(‘grid’).getId();

Create a model that has a fields property that is blank like this:

Ext.define('wcf.model.DataModel, {
extend: 'Ext.data.Model',
fields: []
});

Next create a store with the url that points to your server side script that will return the data. The important part to remember here is that autoLoad should be set to false, as we will be loading this store using an Ajax request later opposed to the usual store.load(). The other thing that is different here is that the sorters are critical in the store if you want to sort by some known column in your dataset like sales region as most database pivot functions will not allow an order by statement.

Ext.define('wcf.store. DataStore, {
    extend      : 'Ext.data.Store',
    model       : 'wcf.model. DataModel,
    sorters: [{
        property: ' sales_region,
        direction: 'ASC'
    }],
        proxy: {
        type: 'ajax',
        url: '/resources/cfms/data.cfm?event=sales_report',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    autoLoad: false
});

Next you have to create the json on your back end to comply with the following format (or you have to go out and do multiple data calls, but really what’s the point in that since one call would yield all of the information you need).

Pass the columns in an array in the Json making sure to provide the correct data index and header text, plus anything else you would like to add.

 'columns':[ {'dataIndex': 'something', 'text' : ' something' } ….. ]
 

Pass the model in an array in the same Json object

'fields':[{'name': 'something' } …. ]

Make sure you pass the data

  'data':[ {'something': 'else'}, …..]
 

Now that you have done all the hard work on the back end it’s time to connect your grid to the store and update the columns, model, and data.

var      store       = Ext.getStore('DataStore'),
      // automatic getter when using MVC, otherwise reference the
     // dynamic grid.
            grid        = this.getDataGrid();

        Ext.Ajax.request({
            url     : '/resources/cfms/data.cfm?event=sales_report',
            success: function(response){
                var data = Ext.decode(response.responseText);
                store.model.setFields(data.fields);
                grid.reconfigure(store, data.columns);
                store.loadRawData(data.data, false);
            },
            failure: function(response){
	console.log(response);
            }
        });

Notice here we set the model fields with the data that was in the json response using exts store.model.setFields() method (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-static-method-setFields). Next we reconfigured the grid with the columns from the json response using the reconfigure method of the grid and passing the store with the columns http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure. Finally, we don’t want to call our query again so let’s populate the data using the store.loadRawdata() method and indicating false to make sure we remove the existing records http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-loadRawData.

Since the data does not load by itself using autoload I put the following in a function that is called on the grid’s activate event, but that is up to you, you may want to load it earlier rather than later.

Consider this: What’s a stamp worth? 

Let’s illustrate the fact that small inefficiencies can lead to a large cost to an organization given the frequency of the inefficient action.  Imagine you are in charge of the post office and you need to identify cost savings.

Using the facts below you devise a plan that eliminates an inefficiency that exists with stamps.

• 1 Pound – 453.592 grams
• Mail pieces processed in 2010 – 171,000,000,000 [1]
• Assume every piece of mail (packet) requires one stamp
• Stamps are printed on paper that weighs 56 g/m(sq) [2]
• Current stamps have the following dimensions 22.10 x 24.89 mm [3]
• Assume that we are using first class letters which cost $0.45 cent for the first ounce and $0.20 for each additional ounce. The post office works like airport parking garage, they charge for the full ounce (even if you’re over by .20 grams!).

Now we all know that weight affects postage prices[4], I mean why else would we have those cool airmail envelopes and sheets of paper with the little striped edges, right.

First let’s translate the paper weight so that we have the grams per square millimeter, since we are dealing with the metric system we know that 1m² = 1,000,000 mm², next we divide the weight by the square millimeters to get a weight per millimeter. 453.592 / 1000000 = 0.000453592 grams / sq mm.

The postage stamp is 22.10 x 24.89mm so the area is 550.069 sq mm. The weight per postage stamp is 0.249506897848 grams.

Now we can calculate the straight cost of the stamp in weight added to the letter, we know that 0.249506897848 =  0.0088010968208481997 ounces and that it costs $0.20 cents per ounce, so it costs $0.00044005484 cent to mail the stamp on your letter. Barely noticeable, right? Now let’s multiply that by 171 billion ( 171,000,000,000 ), which is the yearly mail volume; the result, we would be paying $75,249,377.64 just to cover the weight of the stamps on the envelopes. If it was this simple we could use triangular stamps and save 37million dollars!

That’s great but we know that the post office rounds up to the nearest ounce and slaps a $0.20 cent charge on those that go over. Lets test the assumption on varying percentages of letters that could theoretically be put over the ounce limit by the weight of a stamp.

1% of letters are over = 1,710,000,000 * .20 = $342,000,000

This brings me to the last point: quantifiable things matter. You may disagree and many do, however, when you start presenting solutions to problems in the work world there is only one measure that really matters and it comes down to quantifiable outcomes.

To ensure your idea makes it you have to translate these outcomes into dollars, especially when dealing with network speeds, and security issues. Why? For far too long the IT department has sat back and used the ‘security’ argument, which seems to work without any thought to cost (be it in time or money, and more often both) . Your challenge is to sit down and translate your IT related issues into dollars and cents, and come up with quantifiable savings. Remember you can save money by saving time, which is what automation strives to accomplish.

Sources

[1] http://pe.usps.com/businessmail101/rates/weight.htm

[2] http://www.google.com/patents/US5503436?dq=us+post+office+adhesive+stamps&hl=en&sa=X&ei=_AliUKy-GZKo9gSRrYHgCA&ved=0CDoQ6AEwAw

[3] http://about.usps.com/postal-bulletin/2012/pb22330/html/info_006.htm

[4] http://pe.usps.com/businessmail101/rates/weight.htm

To accomplish this task in extjs 4.1 just add the following listener to your combobox:

listeners: {
  boxready: function(){
     this.setValue(this.getStore().getAt(0).get(this.valueField),true);
  // fire the select event ( Event in extjs )
  this.fireEvent('select',this);
  }
},

The ‘boxready’ event (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready) gets fired once after the component has been laid out for the first time at its initial size. The reason you would use this opposed to beforeshow or render is due to the fact that the combobox will not have a hook into the store until the boxready event is fired if it is initially hidden (say on a second tab, or in a popup window …), and you will get a undefined error running the third line of the code. You will also run into issues if you don’t auto load the store.

Types and speeds :

Twisted Pair Cable

First, there’s twisted pair copper wire, chances are this is the stuff that connects your computer to the web (unless your’e browsing this from work on a high speed network). Twisted pair takes it’s name from the pattern that the wires have with two wires being twisted around each other to reduce electrical interference from nearby wires. The speeds that can be achieved range from 10Mbps to 10Gbps. This is what you probably refer to as ‘network cable’.

Concentric Cable (Coaxial)

Next, there is coaxial cable, which is also made of copper wire , however, the wires run concentric ( see the image to the left ). This cable is usually used to bring you television via your cable provider, and if you get internet from them then guess what, this is your cable. One thing that always surprises people is that when you use the cable company as your internet provider you ‘share’ the bandwidth with your neighbors. This means that speeds may vary depending on the number of people that are online. Your cable modem that cost you a good deal more than say a regular router actually has to change tour digital signal from the computer into an analog signal to be sent over the shared connection. Speeds with this type of cable are in the tens of Mbps.

Finally we get to fiber optic cables, this is the new kid on the block, as copper wire dates back to the telegraph. These cables are small glass tubes where pulses of light are sent so as you can imagine speeds are very very fast. The speed of light is 3.00 x 10^8 m/s. Let’s put that into perspective, you could travel from New York to Los Angeles (2462 miles) about 75 times in one second (186,000 miles an hour). Of course your data won’t seem like it travels quite as fast but that is due to the various delays a packet encounters on the road to NY or LA depending on where you are at.

Fiber Optic Cable

Now that we got the three main types of wire down consider this … 

So designing a network is like building a nascar car right? It’s all about speed, and being lightweight helps a lot in that area right. A lot of emphasis is placed on the speed of fibre optic cable but let’s not overlook the security benefits of fiber optic cable opposed to cat5 and wireless communication methods.

There are a few things that can happen between the endpoints on a network that could compromise your data. These include:

Tapping - We have all seen those old spy films where someone climbs a telephone pole and taps into the phone wires to listen in on conversations, and we have seen the films where the someone is listening in on radios to intercept messages.

Well, since fibre optic cable is comprised of a bundle of glass tubes, now imagine how hard it is to tap into those tubes without breaking the connection or causing loss that is noticeable.

I dug up this article in the Washington Post that illustrates this with a few interesting stories regarding cables that have been cut during the construction around Tyson’s Corner.

http://www.washingtonpost.com/wp-dyn/content/article/2009/05/30/AR2009053002114_2.html?sid=ST2009053100019

Radiation - You lose data due to interference from electromagnetic radiation, and the amount of resilience you have to this issue is based on your cable choice, fibre optic being the best and twisted pair being the worst.

Ok, so I have come across the need to perform multiple sorting on many occasions, and like most people got a little frustrated with the drag and drop toolbar method that is given in the Extjs examples. I wanted something that the user would intuitively understand since they were used to clicking rows to perform sorting anyway, and I wanted them to see what was being sorted in the same manner that the native sort works. You know that small blue triangle in your column header. It became apparent that this would be a feature that could be used over and over again as this is a really common request so I put together this UX for your Extjs 4.1 grids. I did not do any testing on versions prior to 4.1, so maybe it will work for those, maybe not, consider that fair warning.

Where to get the InlineRemoteMultiSort UX

https://github.com/jmcdonald69124/extjs-multisort-ux

How to use the InlineRemoteMultiSort UX

In your javascript code please make sure you place the files in the following folder, where extjs could be the root of your extjs distribution:

extjs/src/ux/ folder, and place the CSS file in the extjs/src/ux/css folder.

In your grid add the plugin, and pass it the initial ‘default’ sort values.

plugins : [
Ext.create('Ext.ux.InlineRemoteMultiSort', {
 defaultSorters: [
 {property:'col1',   direction:'ASC'},
 {property:'col2',   direction:'ASC'},
 {property:'col3',   direction:'ASC'}
    // ....
 ]
})
]

Of course this assumes that you set your path to the ux folder correctly in your MVC app.js file.

On the server watch out for the following values that are passed in a parameter called ‘sort’:

sort:[
{'item':'col1','direction':'ASC'},
{'item':'col2','direction':'ASC'},
{'item':'col3','direction':'ASC'}
]

If you are using Cold Fusion for your back end code you can parse the incoming form value with this code:

<cfset sorters = deserializeJSON(#form.sort#) />

Watch out for the following

This code will pass a set of brackets [ ] if there are no sorters, please handle this on the server side.

Paging poses a set of issues that will require that the query return the rows that are needed by the page the user is viewing. If you intend to use paging please see this post and pay particular attention to how it uses the start and page number
http://www.learnsomethings.com/2011/11/06/php-code-for-paging-and-remote-filtering-extjs4-grids/ .

First let’s look at our sample store:

Ext.define('sample.store.MainStore', {
    extend      : 'Ext.data.Store',
    model       : 'sample.model.MainStore',
    pageSize    : 100,
    remoteSort  : true,
    proxy: {
        type: 'ajax',
        extraParams: {
            start        : 0,
            limit        : 100
        },
        url: 'someurl.php',
        method: 'POST',
        reader: {
            type: 'json',
            root: 'data',
            totalProperty:'results'
        }
    },
    autoLoad: true
});

… and every store has a model, right …

Ext.define('sample.model.MainStore', {
    extend: 'Ext.data.Model',
    fields: [
        'some_primary_key',
        'some_data_element',
    ]
});

Now for the Pièce de résistance – our controller:

Ext.define('sample.controller.Main', {
    extend     :  'Ext.app.Controller',
    models    :  ['MainStore'],
    stores      :  [' MainStore '],
    views       :  ['Main'],
    requires  :  ['Ext.MessageBox'],
    init: function() {

        Ext.getStore('MainStore').addListener('load',
this.onMainStoreLoad,
 this);
        Ext.getStore('MainStore').addListener('datachanged',
this. onMainStoreDataChange,
 this);

        this.control({
               //  A sample combo box select function
            'combo[action=sampleSelect]':{
                select:this.onComboSelect
            },
	//  A sample button click function
            'button[action=sampleAction]':{
                click:this.onButtonClick
            }
        });
    },

// This is where all the functions go

    onComboSelect: function(combo) {
        	console.log('ComboBox Selected, the value is:' + combo.getValue()) ;
    },

    onButtonClick: function(me){
console.log('Button Clicked');
    },

    onMainStoreLoad: function(me,records,success){
if(!success){
     Ext.MessageBox.show({
        title   : 'Data Load Error',
        msg   : 'The data encountered a load error, please try again in a few minutes.'
                });
            }
    },

    onMainStoreDataChange: function(me){
console.log('Hey the store data just changed!');
    }

});

In closing there are a few things that I learned in this exercise that I would like to point out so you don’t repeat my mistakes.

1. When you look at the API for the store, and you take one of the events (load for example is here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-event-load ) you can pass the parameters in the function in the controller.

Mean – Many of you no doubt know the mean as the average of a set of numbers, you calculate this by summing the values in the data set and dividing the sum by the number of values. This seems straight forward, and the concepts below rely on the mean so it is crucial that this be calculated. Ext.Array (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Array-method-mean) has a handy way of calculating the mean value of a dataset stored in what else – an array.

In the world of probability the mean is also known as the expected value, and provides a good idea of where the next value will fall.

Variance – Now that you have the mean value of the array, you can start to look for the variance in your dataset. The variance is the measure of how far the numbers in your dataset are spread out. The baseline for this is the mean, which is also known as the expected value! Variance is calculated by taking the mean and subtracting that number from the value, then squaring the difference (between the mean and the value) for each of the numbers in your dataset. Wait! You are only half way there! Once you complete that task you should have a new dataset comprise of squared differences, now to get the variance just calculate the mean of the dataset of squared differences.

Standard Deviation – OK, now that we have worked out the mean, and the variance, what is standard deviation, and what do we plan to do with it. Before I explain, let’s take a look at the chart below:

In this chart you see the greek symbols for mean (μ)  and standard deviation (σ) . The type of curve represented by the chart above is named the bell curve. So you may be asking yourself what standard deviation is right — well, it is the square root of the variance and shows how spread out a set of numbers is. In the bell curve you can see that 34.1% of the dataset falls within -1 standard deviation and 34.1% falls within +1 standard deviation of the mean. This dataset can be categorized as normalized.

Frequency – Now let’s talk about frequency, which is commonly expressed as a histogram, or a chart that contains ‘bins’ and the number of items per ‘bin’.

Now, how do you go about calculating the values above given a set of values in a JavaScript array?

Luckily, I stumbled across some handy JavaScript snippets from Larry Battle (http://bateru.com/news/2011/03/javascript-standard-deviation-variance-average-functions/ ), and of course when you couple that with some extjs Array singleton functions you get an easy to use list of stats functions.

Average (mean)

var avg = Ext.mean(yourArray);

Variance

// Function returns variance for an array of numbers
function  variance(arr){
	// Make sure that your input is of type array
if (!Ext.isArray(arr)) {
return false;
}
	var avg = Ext.mean(arr);
	i = arr.length,
	v = 0;

	while (i--){
		v+= Math.pow((arr[i] – avg), 2 );
	}
	V /= arr.length;
	return (v);
}

Standard Deviation

function stdev(arr){
	// Make sure that your input is of type array
if (!Ext.isArray(arr)) {
return false;
}
	var sd = Math.sqrt(variance(arr));
return sd;

}

Frequency

function histogram(arrayOfNumbers){
var bins = 10,
histogramDataValues = arrayOfNumbers, // Source Values
i = 0,
over = 0,
under = 0,
binContent = [],       // Becomes the data array
delta;

var lowestNumber = Ext.Array.min(histogramDataValues),
highestNumber = Ext.Array.max(histogramDataValues),
delta = Math.abs((lowestNumber - highestNumber) / bins);

// Set the initial value of all bins to zero
// and populate the categories data based on the deltas

for (; i <= bins; i++) {
binContent[i] = 0;
histogramDataValues[i] = lowestNumber + Math.round(100 * (i - 1) * delta) / 100;
}

// Populate the bins with the
for (i = 0; i < histogramDataValues.length; i++) {

if (histogramDataValues[i] < lowestNumber) {
under++;
}
else if (histogramDataValues[i] >= highestNumber) {
over++;
}
else {
var ndata = histogramDataValues[i] - lowestNumber,
thisBin = Math.floor(ndata / delta);

thisBin = Math.abs(thisBin);
binContent[thisBin]++;
}
}
return binContent;
}

Software errors will always happen, it comes down to how quickly you can identify them and correct them that make all the difference. Those that argue that code should be written error free the first time have obviously not written much code. We can all agree that production code should be error free, but to achieve error free code means you will have to identify and eliminate errors.

I wanted to share a few thoughts on how to cut down on errors in your code.

Use proper indentation, and formatting. This is almost never taught in class, and most of the books that I have seen even contain code that runs and is compact but is not really easy to read.  It’s important to write all your code as if you are going to spend the rest of your career maintaining it.

This sounds great but how can I implement it? Let’s take a look at some code.

I like to use a tab for each block of code. Look at the difference between block a and block b.

A

Ext.override(Ext.form.Radio, {
        setValue : function(v) {
            if (typeof v == 'boolean') {
                Ext.form.Radio.superclass.setValue.call(this, v);
            } else if (this.rendered) {
                var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
                els.each(function(el){
                    if (el.dom.value == v) {
                        Ext.getCmp(el.dom.id).setValue(true);
                    } else {
                        Ext.getCmp(el.dom.id).setValue(false);
                    }
                }, this);
            }
            return this;
        }
    });

B

Ext.override(Ext.form.Radio, { setValue : function(v) {
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
} else if (this.rendered) {
var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
els.each(function(el){
if (el.dom.value == v) {Ext.getCmp(el.dom.id).setValue(true);
 } else {Ext.getCmp(el.dom.id).setValue(false);
}}, this);}
return this;
} });

Hard to believe that’s the same code right? Now imagine this throughout a file containing a thousand, ten thousand, hundreds of thousands of lines of code.

Use curly braces even when you don’t have to. Wait won’t that bloat my code? I’ve been taught that I should keep things as compact as possible what’s up with this. Let me explain in code:

A

if (condition1)
{
    if (condition2)
    {
        statement1;
    } else {
        statement2;
    }
}

B

if (condition1)
if (condition2)
statement1;
else statement2;

To the compiler, both pieces of code above will achieve the same result; however, the top block is far easier to read for us humans. Which code would you like to maintain.

Don’t use variable names that have no meaning – remember comments in the code should not be used to explain what your variables are, let their names tell all. This rule needs no code explanation, just stay away from one letter variables like a, b, or c and try to spell them out like

A

        double    a;
        double    b;
a = (b - 32) * 0.555555556

B

        double    celsius;
        double    fahrenheit;
celsius = (fahrenheit - 32) * 0.555555556

Bet you didn’t know that example A did until you got a look at B, right.

Test often and test early. How many lines do you write before you stop and see if what you have compiles. Do you write test cases for all your functions when you code them and actually test them before connecting them to the user interface? This helps you tackle bugs close to the source without wading through hundreds of lines of code.

If your IDE does not have a nice auto save feature like Jet Brain’s WebStorm, then please remember to save early and save often. There is nothing more frustrating than losing hours of good code.

Nobody ever wanted an app that ran slower, keep that in mind and optimize, optimize, optimize. You can use tools like Page Speed, or Chrome’s Developer Tools to get your JavaScript on track. In addition Google and Yahoo have written detailed articles that are essentially a lessons learned document

There’s a difference, and if you want to know what it is just hover over the menu buttons on the browser that you are using to read this.  Chances are all you have to do is click anywhere on the buttons to show the menu, right? We’ll now take a look at the extjs splitButton, what you get is a small arrow that user has to press which toggles the menu between visible / invisible.

Why not change your split buttons to give the same functionality that users are already used to, and stop testing their nerves by making the target so small the slightest shake will mean they cannot see the menu.  Fortunately you can include the following listener to add a show / hide action to the main button click.

listeners:{

'click': function(me){

me.showMenu();

}

},

Ok let’s assume for a minute that you have a tab panel with four tabs each containing a form. You have placed this panel inside of a window, and the goal is to have one ‘save’ button on the bottom of the window that will save all of the forms simultaneously so the user does not have to remember to save after changing data on a tab before moving to the next. This is a common and straight forward task, and I am sure that it comes up in the real world often; I’ve used this layout multiple times myself.

The Problem:

You want to read the form values and consolidate them into one call to your backend database, however, then form elements in the tab panels behind the default panel have not been rendered to the dom, therefore, you cannot access them via getValues().
You want to set the values in each form; however, you cannot set values for items that do not exist.

The Solution:

The code below will construct a button that can be placed at the ‘Window’ level and will try to get the values of all child forms contained in a tab panel inside the window.

buttons:[
    {
    text    : 'Save',
    listeners : {
        click : function() {
            // The first form is always rendered!
            var first_form_values  = first_form.getForm().getValues(false),
                // This checks the form first to see if they have been rendered
                second_form_values = !second_form.rendered ? '' : second_form.getForm().getValues(false),
                third_form_values  = !third_form.rendered  ? '' : third_form.getForm().getValues(false),
                fourth_form_values = !fourth_form.rendered ? '' : fourth_form.getForm().getValues(false);

            Ext.Ajax.request({
                url:'your_url.php?' +
                    // You need urlEncode as getValues passes
                    // back an object!
                    '&' + Ext.urlEncode(first_form_values)  +
                    '&' + Ext.urlEncode(second_form_values) +
                    '&' + Ext.urlEncode(third_form_values)  +
                    '&' + Ext.urlEncode(fourth_form_values),
                method:'POST',
                success:function () {
                    msg('','Your changes have been saved successfully!');
                },
                failure:function () {
                    msg('uh-oh','Your changes have not been saved!');
                }
            });
        }}
    }
]

That’s all there is to sending your data values from multiple forms to the server in one ajax post, but what about getting values from the server and updating your forms that reside in the tab panel?

Luckily, when an element is in the tab panel you can add an ‘activate‘ listener that is waiting for the tab and form to become visible, and the best part is it is fired every time you click on the tab, which would be useful as afterrender is called once, and that’s when the component is first rendered (as the name suggests ).
The code below will load values to your form and must be placed at the formPanel element level.

listeners   :{
                    'activate': function(e){
                        working_status_form.getForm().load({
                            url: '/getData.php',
                            failure: function(form, action) {
                                Ext.Msg.alert('uh-oh','Your data has not been loaded.');
                            }
                        });
                    }
                },

To set this check up in Extjs we will need to create a custom vType (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.VTypes ).

The code is below.

var dunsNbr     = /\d{2}-?\d{3}-?\d{4}/i;
   
// vtype for Duns Number including MOD 10 Check
    Ext.apply(Ext.form.field.VTypes, {
        //  vtype validation function
        duns: function(val, field) {
            if(dunsNbr.test(val) == true){
                return mod10CheckDigit(val);
            } else {
                return false;
            }
        },
        // vtype Text property: The error text 
        // to display when the validation 
        // function returns false
        
        dunsText: 'The D-U-N-S® number is always' +
            ' presented in a distinct format:' +
            ' two digits, hyphen, three digits,' +
            'hyphen, four digits. ' +
            'For example: 04-997-7473.',
        // vtype Mask property: The keystroke filter mask
        dunsMask: /[\d\-]/i
    }); 

In the code above note that duns is the vtype, and the dunsText will be displayed in a qTip when the user enters the wrong input. The dunsMask is used to filter out keystrokes that do not match the pattern provided. It is important to realize that the mask is not a regex value that matches the specific string that you would like to see in your duns field, but is actually regex that lists the allowed characters in the field. This is a key point!

Now, take a look at the line of code:

if(dunsNbr.test(val) == true){ …}

. This is the code that performs the regex check on the value that has been entered. dunsNbr is declared at the top of our vType. You can find more information about Ext’s regex features here (http://docs.sencha.com/ext-js/4-1/#!/api/RegExp), but the points to remember are 1) you have to add a / before the regex statement and a /i at the end of the statement and 2) never try to plug your regex into the ‘Mask’ property.

I find that it’s easier to test my regex code on a website like: http://www.zytrax.com/tech/web/regex.htm#experiment before I put it in my javascript.

Now suppose you get through the check above, you will notice that the very next line reads:

                return mod10CheckDigit(val);

In order to check the D-U-N-S number you would take the first 8 digits in the number. Next loop through the numbers and multiply the even numbers by 2. Now the numbers greater than 10 are separated and you write out the ones and tens place and add all of the numbers together.

D-U-N-S with check digit in the 9th place = 0 4 9 9 7 7 4 73

0 4 9 9 7 7 4 7
x1 x2 x1 x2 x1 x2 x1 x2
0+8+9+1+8+7+1+4+4+1+4 = 47

In this example above , the total is 47. Subtract this total, 47 from the next highest multiple of 10, (that is 50 in this case).

50 – 47 = 3

3 = check digit

The code below uses Modulus 10 + 5, meaning if the original check digit calculation is greater than a 4, then add 5 and then subtract 10 to determine the check digit.

That’s it! So with this quick tutorial you have seen how to apply a function and some serious calculations to an Extjs vType, how you can use regex, and what Mask is all about, and how you can ensure that data gets checked at the client side before hitting your database.

The function you need is below:

 function mod10CheckDigit(value) {
        //Strip all characters except numbers
        var v   = value.replace(/[^0-9]+/g,''),
            cd  = v.substr(8,1),
            v   = v.substr(0, 8),
            total = 0,
            temp,
            tens,
            ones,
            modDigit;

        //Get Odd Numbers
        for (i=0; i <= v.length-1; i=i+2) {
            total = total + parseInt(v.substr(i,1));
        }

        //Get Even Numbers
        for (i=1; i<=v.length; i=i+2) {
            temp = parseInt(v.substr(i,1)) * 2;
            if (temp > 9) {
                tens = Math.floor(temp/10);
                ones = temp - (tens*10);
                temp = tens + ones;
            }
            total = total + temp;
        }

        //Determine the checksum
        modDigit = (10 - total % 10) % 10;

        // Now if the original check digit calculation is greater than a 4, then add
        // 5 and then subtract 10 to determine the check digit

        if (modDigit > 4){
            modDigit = ((parseInt(modDigit) + 5) - 10);
        } 

        // Duns Number Expansion OR original MOD 10 check
        if ( modDigit == cd){
            return true;
        } else {
          //  alert(modDigit + ' - ' + cd);
            Ext.Msg.alert('Invalid D-U-N-S® Number', 'The D-U-N-S® number you entered was in the correct format, however, did not pass the D-U-N-S® validation test. Please correct your input. ')
            return false;
        }
    }

If you actually want to use the backspace button for its intended purpose and you would like to map ext events to the browser history then a good choice might be using Ext.History, which you can learn about in depth by reading Ed Spencer’ blog post its use. (http://edspencer.net/2009/01/why-you-should-be-using-history-in-your.html )

Turning off the backspace key is pretty straight forward. You would just use Ext’s EventManager and create a listener to check for any keypress events that take place on the page. If the user is not in an input field then you would ignore the default action of the backspace button. Placing the code below right under your Ext.onReady … method will do the trick.

Ext.EventManager.addListener(Ext.getBody(), 'keydown', function(e){
        if(e.getTarget().type != 'text' && e.getKey() == '8' ){
            e.preventDefault();
        }
    }); 

The code that makes this possible is:

layout: {
      overflowHandler: 'Menu'
}

Your data would look like this if you alerted the value in the record.

Your combobox would look like this after the record was loaded:

But you want the combobox to look like this:

What you will need to do is transform your comma delimited string into an array and then set the value like this:

// this goes right before your form.loadRecord(record) code

var values = rec.get('delimited_string_field').split(',');
Ext.getCmp('your_multiselect_box').setValue(values);   

It’s that easy!

I went ahead and designed a color picker combo box that puts the hex value in the input field and underlines it in the selected color. One of the notable features is the monitorMouseLeave method that is found in Ext.Element, this performs an action after the users mouse leaves an element after a preset amount of time. In the code below it is used to hide the drop down color fields after the user leaves the picker for half a second. This way we don’t force them to make a selection, but do not penalize them for coloring outside of the lines with their mouse.

Ext.define('Ext.ux.ColorPickerCombo', {
	extend: 'Ext.form.field.Trigger',
	alias: 'widget.colorcbo',
	triggerTip: 'Please select a color.',
 	onTriggerClick: function() {
	  var me = this; 
	  picker = Ext.create('Ext.picker.Color', {     
		pickerField: this,     
		ownerCt: this,    
		renderTo: document.body,     
		floating: true,    
		hidden: true,    
		focusOnShow: true,
		style: {
            	backgroundColor: "#fff"
        	} ,
		listeners: {
            	scope:this,
            	select: function(field, value, opts){
		me.setValue('#' + value);
		me.inputEl.setStyle({backgroundColor:value});
		picker.hide();
	},
	show: function(field,opts){
		field.getEl().monitorMouseLeave(500, field.hide, field);
		}
        	}
});
       picker.alignTo(me.inputEl, 'tl-bl?');
       picker.show(me.inputEl);
	}	
});