PeterKellner.net » JavaScript

A SenchTouch2 Simple Example Using Tab Pages and Buttons

Peter Kellner — Wed, 25 Jan 2012 05:47:41 +0000

Again, I find myself going back to basics when trying to make my SenchaTouch2 Project work. Today, I updated my framework to Sencha’s latest alpha release of the tools (p4). I often make these examples because I’m trying to prove there is a SenchaTouch bug and usually find out it’s my bug somehow. So, since I went to the trouble of making a simple example of two stand alone buttons that switch between tab pages, I thought I’d blog it.

Here is what we get ultimately. When clicking on b1 or b2, the home and the contact tab are selected automatically (same as clicking on those two items in the tab bar).

One thing I find a little odd, is that to create the class, you say Ext.TabPanel and not Ext.tab.Panel. (OK, I just tested that and both work)

And, here is the code:

DOCTYPE html>



<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AgelessST2title>
    <link rel="stylesheet" type="text/css" href="sencha-touch-2.0.0-pr3/resources/css/sencha-touch.css"/>
    <script type="text/javascript" src="sencha-touch-2.0.0-pr3/sencha-touch-all-debug.js">script>

To put the same code in, but substitute the loadTypeId with something meanful, here is the C# code you need to put in your Page_Load C# code.

  protected void Page_Load(object sender, EventArgs e)

            if (!IsPostBack)

                LabelEntityType.Text = EntityTypeId.ToString();

                LabelEntityId.Text = EntityId.ToString();

            // The JavaScript needs to be registed on every post back.  Not just first time.

            // Define the name and type of the client scripts on the page.

            const string csname1 = "LoadDetailsGridScript";

            Type cstype = this.GetType();

            // Get a ClientScriptManager reference from the Page class.

            ClientScriptManager cs = Page.ClientScript;

            // Check to see if the startup script is already registered.

            if (!cs.IsStartupScriptRegistered(cstype, csname1))

                //ASPWeb.newsGrid.loadTypeId = 229490;

                //ASPWeb.newsGrid.init();

                const string cstext1 =

                    "ASPWeb.newsGrid.EntityId = {0};ASPWeb.newsGrid.EntityTypeId = 1; ASPWeb.newsGrid.init();";

                cs.RegisterStartupScript(cstype, csname1, String.Format(cstext1, LabelEntityId.Text), true);

I found this code on line at this MSDN location.

http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx

Hope this Helps!!!

Great JavaScript Meetup In San Francsico Last Night!

Peter Kellner — Thu, 30 Apr 2009 17:48:52 +0000

My guess is 75 people showed up at Dolores Labs last night for this meetup. It lasted about two hours and had about 6 great presentations. Douglas Crockford kicked it off with a discussion on upcoming security models around new versions of JavaScript followed by several other presentations that included a Google engineer showing cool Google Labs projects, several JavaScript frameworks and other very cool things. Dolores Labs is down a small alley where I was sure I was lost. Marked 83A was a non descript door with two flights of stairs. Then, a roomful of engineers, lots of ethernet connections, beer and pizza. What else could we ask for.

Below are some fun pictures I took. Not sure if it does justice to the fun that was had.

Many thanks to Matt Humphrey for organizing the event. Job well done!!!

Speaking Wednesday May 20th, 6:30PM, Microsoft Office San Francisco on ExtJS and ASP.NET Membership!

Peter Kellner — Tue, 21 Apr 2009 04:59:38 +0000

Come hear about how to see ExtJS integrated with ASP.NET for awesome Membership and Profile Management! I will speaking at the Microsoft Office at a meeting of Bay.Net Users Group.

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=378&mid=49

ASP.NET: Membership with Profile and High Performance ExtJS JavaScript Interface

When:

Wednesday, 5/20/2009 at 6:30 PM

Where:

Microsoft Office, 835 Market Street, Suite 700, San Francisco

Event Description

In this session, we will demonstrate building a super rich JavaScript interface to the standard ASP.NET Membership and Profile services. That is, built into ASP.NET are wonderful providers that allow you to validate and store user credentials typically to a database. It also lets you store other information such as pictures, first and last names, as well as anything else you may want to store. In this session we will build a highly performing, 100% JavaScript UI to maintain hundreds of thousands of users. As part of this solution, techniques for using REST based services to access this information will be presented. Once you see this, it will be hard to ever use web forms again.

Come See Me at VSLive in Las Vegas, June 9th (2 Sessions)

Peter Kellner — Sat, 18 Apr 2009 00:27:20 +0000

I’m doing two sessions at VS-Live in June. Both sessions are in the asp.net track. One is on High Speed performance in ASP.Net, and the other is on using ExtJS (a brilliantly fast rich JavaScript library). Hope to see you there!

Here are the descriptions:

VM1

Build Blazingly Fast ASP.NET Apps with 100% Clientside UI ExtJS

Peter Kellner

Intermediate

Need a web application that has the responsiveness and interactivity of a forms app but still looks and feels like a web? One of the best kept secrets (at least to the Microsoft community) is ExtJS. It’s a different paradigm then we are all use to, but the results are spectacular. Take a look at this url and you will see as well as learn how to do this yourself. The hardest part is shuttling the data back and forth. A lot of this session will be talking about how to do a real world app that does this. Once you go this way, you’ll be gone from serverside forms for almost ever.

VM10

Building High Performance ASP.NET Web Applications

Peter Kellner

Intermediate

Topics will include appropriate use of Cache and Session State, as well as how and when to use them. Viewstate management and methods to minimize its use will be discussed. Code to pop up a warning when a threshold is met in development will be shown. When and how to take advantage of Server Farms will be discussed, as well as trouble shooting techniques to find problems. The evils of Server Affinity, as well as a common pattern for caching database queries will be shown to be wrong. Time permitting, we will talk about using Microsoft’s Ajax.asp.net with UpdatePanel and webservices and how these affect performance and scalability.

Framework Scanner, Written in ExtJS by Mats Bryntse

Peter Kellner — Fri, 23 Jan 2009 16:55:37 +0000

Mats Bryntse, a great web developer and ExtJS expert has written a very cool utility that let’s you see how well the different JavaScript frameworks play with each other. Specifically, he looks at many of the most popular frameworks and calculates how many globals each one uses. This is important because if you happen to have multiple frameworks in your application (which is completely reasonable to do), you may have problems. The URL is as follows and must be run in Firefox).

http://mankz.com/code/GlobalCheck.htm

Here is an example result:

Don’t forget to push the "Start Analysis" button on the tool bar and you will see a collision matrix. For me, this is of particular interest because I use both ExtJS as well as Microsoft Ajax and I have a collision between string.format which has caused me problems. Here is what that collision matrix looks like:

This is a great tool! Nice to have such smart guys looking to make the world more transparent.

First San Francisco Meetup of ExtJS Group

Peter Kellner — Wed, 10 Dec 2008 17:08:07 +0000

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/

As many of you know, I’m learning the JavaScript library ExtJS. It’s basically a very rich development api that allows you to make totally awesome client side control 100% in JavaScript. It has control that include Grid, Dropdown, Calendar, Image, Drag and Drop, Toolbars, etc. With ExtJS, you can in a very straight forward way, make interfaces that look like the following:

You can see lots of examples of using ExtJS (usually called E-X-T) here: http://extjs.com/deploy/dev/examples/samples.html

At our first meetup, we talked about EXT some and also raffled off a copy of the new ExtJS book called Learning Ext JS generously given to us by one of the authors, Shea Frederick. We also talked about things we could do together as a group. For our first group project, we decided to work on the sessions page of Silicon Valley Code Camp (the site I wrote) and make that page EXTd. We broke down parts of that into little pieces and each of us went home with a small assignment to work on. We plan on meeting again January 20th, 2009 and continue the fun.

Oh, here is a picture of us in our first meetup at the Courtyard Marriott at 2nd and Folsom (San Francisco)

And, in case you forgot, here is the link. Our next meetup is January 20th,2009. Come Join us!

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/

Basic DomHelper with ExtJS Library, creating simple div tags and anchors

Peter Kellner — Mon, 24 Nov 2008 15:48:25 +0000

As I’m learning ExtJS I plan on publishing the things I figure out. For those that don’t know, ExtJS is a very rich JavaScript library that gives you all kinds of capabilities that work cross browsers. Trees, Grid’s, Panels, Layouts and all kind of stuff. For an idea of the kinds of things you can do, check out the demos at there site at this URL: http://extjs.com/deploy/dev/examples/samples.html.

It’s pretty amazing the kinds of things that can be done with just client side JavaScript. At the core of ExtJS are some very useful JavaScript methods. In order to take advantage of the more sophisticated features, it’s helpful to know the basics first. In this article, I plan on going through a simple example that will ultimately product html that looks like the following.

Notice that I’m showing this as a screen capture from firebug. If I were to do a view/source, this is what it would show.

Welcome to JavaScript! The colors div is generated on the fly. I’m not 100% sure, but I think this has bad implications for SEO (Search Engine Optimization). More for another post later. I need to do some experiments.

So, let’s dive into the code that is needed to generate this. My plan here is to show the code, then explain it line by line. ExtJS is very powerful and DomHelper is one of the cornerstone classes.

  1: Ext.onReady(function() {
  2: 
  3:   Ext.BLANK_IMAGE_URL = 'Images/s.gif';
  4: 
  5:   Ext.QuickTips.init();
  6: 
  7:   var colorArray = new Array('red', 'green', 'blue', 'orange');
  8: 
  9:   var colorObject = [{
 10:         id : 'pink',
 11:         html : 'pink-HTML',
 12:         tag : 'a',
 13:         href : 'http://www.mycolor.com/pink'
 14:       }];
 15: 
 16:   var myColor = new Object;
 17:   myColor.id = 'purple';
 18:   myColor.html = 'purple-HTML';
 19:   myColor.tag = 'a';
 20:   myColor.href = 'http://www.mycolor.com/purple'
 21:   colorObject.push(myColor);
 22: 
 23:   for (i = 0; i < colorArray.length; i++) {
 24:     var colorToAdd = new Object;
 25:     colorToAdd.id = colorArray[i];
 26:     colorToAdd.html = colorArray[i] + '-HTML';
 27:     colorToAdd.tag = 'a';
 28:     colorToAdd.href = 'http://www.mycolor.com/' + colorArray[i];
 29:     colorObject.push(colorToAdd);
 30:   }
 31: 
 32:   var colorsDivId = Ext.DomHelper.append(document.body, [{
 33:             id : 'colors'
 34:           }]);
 35: 
 36:   Ext.DomHelper.append(colorsDivId, colorObject);
 37: });

So, here is what is going on above.

Line 1 is the basic code that you use that tells the JavaScript to start executing after the browser DOM is completely constructed. if you don’t do this, you will get errors when you try and access things like Document.body.

Line 3 does something important, but I don’t quite understand what. If you don’t do this, you’ll find your ExtJS boxes and other graphics look funny. Hopefully, someone will put a comment on this blog post and then I’ll update this comment.

Line 7 is where the fun begins. My plan is to add a bunch of color hyperlinks to the page using different methods. Here, I’m simply initializing a JavaScript array of colors.

Line 9-15 initalizes a JavaScript array with one object that has multiple properties. These will be all associated with one anchor tag.

Line 16-21 creates a simple JavaScript object and assigns the properties of the html anchor tag.

Lines 24-30 iterates through the colors array and builds and array of objects and adds them to the colorObject array.

Line 32 adds a div tag to the body of the page dynamically (id=’colors’)

line 36 adds the colection of hyperlinks to the just created tag (id=’colors’)

And, that’s it. This created the html shown at the top.

Here’s the code:

ExtTutorial1.zip

Good luck! I’ll try and keep publishing as I learn. ExtJS is awesome! The doc’s are just a little lacking IMHO.

ExtJS Training with our leaders!

Peter Kellner — Tue, 04 Nov 2008 23:53:38 +0000

For my current project, I’m focused on delivering the fastest and best user experience possible for our web site. To deliver this, it is necessary to really focus on delivering client side code. After doing a bunch of research, the very clear answer to me is to use a Library called ExtJS combined with a very nice integration tool suite for the .net called Coolite. It’s basically a very rich interactive JavaScript library that is extremely customizable. To that end, I’m taking a week training class from ExtJS. We’ve had our first day which has focused on CSS and JavaScript basics with an eye towards the patterns used in ExtJS.

For those who know what ExtJS is, I have solved the first mystery and it’s only days one. It seems that that call it EXT (pronounced E-X-T). Also, if your curious of what ExtJS can do, take a look at the Coolite Demos here.

Here is a picture of me with some ExtJS folks (Me, Jack Slocom, Abraham Elias and our instructor Aaron Conran). Abraham (their CEO) and I are both learning ExtJS while Jack and Aaron pretty much invented it. Hopefully that will change by the end of the week (I mean the part about Abraham and I).

My Two JavaScript Favorite Books:, "JavaScript: The Good Parts" and "JavaScript: The Definitive Guide"

Peter Kellner — Sat, 11 Oct 2008 14:20:03 +0000

I’ve been working on a project lately that requires a lot of JavaScript, and if any of you are like me, you’ve had trouble learning the language well. Over the years, I’ve taken several runs at it but have not been successful. Sure, I could always to basic stuff, but it seemed that when ever I need to do anything useful, I just could not figure it out. Well, times have changed. Mostly based on my need to know the language, I am really starting to feel good about the language. I’m understanding scoping, I can throw functions and arrays around as well as actually do useful stuff.

My path to success has been two books. First, Douglas Crockford’s JavaScript: The Good Parts is really all about the why. That is, what is good and what is not. It not only tells you how to do things (though in very compact language), it tells you why. One very nice thing it does it explains the rational for things and where compromises have been made. It’s short and dense. That is, kind of K&G for c, it does not mince words. I’m on my 3rd pass now and still learning things.

When I need more words, I go to the other book. JavaScript: The Definitive Guide by David Flanagan. It doe a great job of explaining in details all the little parts of JavaScript in a non-dense way. It’s about 4 times longer than The Good Parts and does get a little wordy at times, but for me, I often need the extra words.

I could not live without both of these books.

Amazon.com: JavaScript

The Smallest xmlHttp I Could Do And Still Get It Wrong

Peter Kellner — Mon, 29 Sep 2008 14:11:05 +0000

I’ve just started my journey into the land of JavaScript for real and am learning things most of you already know. For example, as the Silicon Valley Code Camp coordinator and web site author, I just recently decided to add a Virtual Earth Map showing attendees and speakers (see the home page). I wrote a simple web response handler that returns all the data in JSON so I could plot the data. Then, after a couple searches on the web, I found a way to send a request to the service asynchronously and get the result. The code looks something like this:

 function pageLoad() {

        req = new ActiveXObject("Msxml2.XMLHTTP");

        if (req) {

            req.onreadystatechange = processStateChange;

            req.open("GET", "AttendeeZipCode.ashx", true);

            req.send();

    function processStateChange() {

        statusDiv = document.getElementById("stats");

        if (req.readyState == 0) { statusDiv.innerHTML = "UNINITIALIZED"; }

        if (req.readyState == 1) { statusDiv.innerHTML = "LOADING"; }

        if (req.readyState == 2) { statusDiv.innerHTML = "LOADED"; }

        if (req.readyState == 3) { statusDiv.innerHTML = "INTERACTIVE"; }

        if (req.readyState == 4) {

            //statusDiv.innerHTML = "COMPLETE";

            GetMap();

            //statusDiv.innerHTML = req.responseText;

            var dataObject = json_parse(req.responseText);

            CreateLayerAttendees();

            CreateLayerSpeakers();

            var points = new Array();

            for (var i = 0; i < dataObject.length; i++) {

                var lattitude = dataObject[i].lattitude;

                var longitude = dataObject[i].longitude;

                points[i] = new VELatLong(lattitude, longitude);

                if (dataObject[i].isSpeaker) {

                    AddOnePin(layerSpeaker, lattitude, longitude, "x", "x", true);

                else {

                    AddOnePin(layerAttendee, lattitude, longitude, "x", "x", false);

                AddOnePin(layerAttendee, lattitude, longitude, "x", "x",dataObject[i].isSpeaker);

            map.SetMapView(points);

Well, that worked great until I ran it on Firefox and Chrome. Basically, nothing happened. So, off to my smart friends at the local Java Users Group and they suggested I should use a JavaScript library because my solution only works for IE. With that hint, I grabbed my favorite AJAX book by Alessandro Gallo, Ajax in Action and started reading. Turns out, there is indeed a Microsoft Ajax Library solution to this and here it is.

 function pageLoad() {

            var request = new Sys.Net.WebRequest();

            request.set_url("AttendeeZipCode.ashx");

            request.add_completed(onRequestCompleted);

            request.invoke();

        function onRequestCompleted(executor, args) {

            processResults(executor.get_responseData());

Now, Firefox, Chrome, and IE all work! and, look what a nice result we get.

Hope this helps!

Using MapPath with WCF Service, Setting aspNetCompatibilityEnabled to true

Peter Kellner — Mon, 18 Aug 2008 17:05:46 +0000

I’m just starting out using WCF in an application for the first time. I’m using Visual Studio 2008 sp1 and created an asp.net web site from the standard create project wizard. I then created a simple AJAX–enabled WCF Service as follows:

I then added some code to the service that looks like the following (using MapPath):

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class TrackData

{
    // Add [WebGet] attribute to use HTTP GET
    [OperationContract]

    public List RetrieveTrackDataByLap(int excerciseId, int lapNumberToShow)

    {
        var listTrackData = new List();

        string fileName = HttpContext.Current.Server.MapPath("~/App_Data/sample.tcl");

        Activity activity = GarminUtils.ConvertTCS(fileName);

I call it with JavaScript as follows:

/// 

/// 

function pageLoad() {

    TrackData.RetrieveTrackDataByLap(0, 0, OnRetrieveTrackDataByLapComplete);

}

function OnRetrieveTrackDataByLapComplete(TrackDataList) {

    alert('OnRetrieveTrackDataByLapComplete called');

}

And, I’m surprised to find that I get a JavaScript error saying MapPath is undefined. So, after a little digging I discover that I need to set aspNetCompatibilityEnabled to true in my web.config as follows:

By default, it is set to false. Hope this Helps!