Sencha Custom Build (ExtJs 4.0/4.1)

I cannot tell you, or express the deep frustration and anger I feel when a company who is so public, and who create such good software produces a tool to fulfill a desired task, but the documentation is near non-existent, the support lacking, and the tool itself, a piece of “junk” from the pits of hell. <rant over Sencha>

Moving along, if you want to build custom ExtJs, cause obviously the default one is too big to be used on production websites; here is the process to go about:

  1. Read This with a focus on the new MVC model as well as Sencha SDK –http://www.sencha.com/learn/getting-started-with-ext-js-4/
  2. Download the SDK (version 2 and not 1.2.3)
  3. Huge thanks to Sottilde – http://www.sencha.com/forum/showthread.php?203663-Sencha-SDK-Tools-2.0-and-ExtJS4-The-Missing-Docs (this is a must) – make sure you download the new PhantomJS file
  4. On the latter part of that forum, I posted my index-build.html, my configuration file (Layout.js) and some tips as well (especially if you using ASP.NET)

Hope that helps ya!

Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

ExtJs Double Load

I recently starting working with ExtJS, moving away from jQuery UI Layout for a bug in their “splitter”. This was not fixed by them, despite my bug report. They did make an effort which  I appreciate. But I’m getting side-tracked. The problem I was experiencing in migrating to ExtJS was that I had an iframe that was loading in my “center” but it was loading twice.

No matter what I did, it just reloaded twice. Whether I added it with $(document).ready(). The solution was to add it to my “ExtJs” layout configuration, and success:

Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Preventing ‘Stop running this script’ in Browsers

 Introduction

On all major versions of IE you may run into this error – “This page contains a script which is taking an unusually long time to finish. To end this script now, click Cancel”. This is beyond irritating especially when the code is live and is affecting customers. Microsoft has a fix for it, but obviously we cannot ask a customer to do this.

Background

What we are going to try and do is create a “for loop” that builds an array. But consisting of 100000 items.

Using the code

I’ve include a sample project – it’s always so much easier when you can play with the code yourself. Have fun!

Before we get into the code, Kudos completely to Guido Tapia for his code and implementation.

I’ve modified the code and made it slightly mode applicable to me, and also to external readers who do not have the context of the code. There was also some bugs which I ironed out. But again, Kudos to him.

 Collapse | Copy Code
 // Make an Object
RepeatOperation = function (anonymousOperation, whenToYield) {
    var count = 0;
    return function () {
        if (++count >= whenToYield) {
            count = 0;
            setTimeout(function () { anonymousOperation(); }, 100);
        }
        else {
            anonymousOperation();
        }
    }
};

Above we create a simple Object called “RepeatOperation”. In it we have to arguments. One will be our (or your) anonymous operation (work that needs to get done). The second argument, will be the when to yield, or when to fire the Time Out.

In side the function, is a basic count to determine where we are in the “process”. Every time our anonymous operation is called it will come back in here and increment count. When it reaches the yield count, it will then set the Time Out letting the Browser know that this is no an infinite loop.

 Collapse | Copy Code
// Implementation
var i = 0;
var myArray = new Array(noInArray);
var yieldAfter = 100;
var noInArray = 100000;
var ro = new RepeatOperation(function () {  // Anonymous function which is our work that we need 2 
    myArray[i] = i * 1;
    if (++i < noInArray) {
        ro();
    }
    else {
        // Finished with Operation
        $("#txtBox").val("Completed Operation and no Browser Warning!");
    }
}, yieldAfter);

// Let's begin
ro();

Now we get to the meat – remembering that state is maintained across the calls due to that little thing called “closure”. For a better understanding of this implementation, look at this, it’s a wonderful read.

Moving along, we create an instance of RepeatOperation, passing in our “operation” as well as when to yield (after x number of iterations). We then begin by calling RepeatOperation through ro(); Remembering in light of closures, this will now call the “return” function found in RepeatOperation, and where it will validate where we are, and set the Time Out if necessary.

The code will continuously call itself back, and while doing so, build the array that we need or get the work done that we need. When done, it will finish and add the text to our “txtBox”.

Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Notes On JavaScript

  1. JavaScript has nothing to do with “Java”, not is it an incomplete language because of that latter – “script”.
  2. JavaScript is a “Functional” programming language
  3. Best Book on JavaScript – http://books.google.co.za/books?id=2weL0iAfrEMC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
  4. JavaScript has Prototypal Inheritance – where objects inherit from other objects. Not classes. This is a class free language.
  5. Javascript makes use of Lamba – use of functions as first class objects
  6. Only one number type in JavaScript – and represented by a 64-bit floating point (double)
  7. NAN – not a number (divide something by zero = NAN). It’s toxic – any arithmetic operation with NAN as an input will have NaN as a result. NAN is not equal to anything; NAN is not NAN
  8. Number(value) – converts 
  9. parseInt(value, radix) – good to put in radix (10 – decimal)
  10. Most useful Math function – takes the integer part of a Number
  11. Strings are “immutable”
  12. Strings you can use double or singe quotes
  13. Strings and Char are the same
  14. String(value) – turns number to string
  15. Null – isn’t anything
  16. Undefined – a variable uninitalized is initialized to Undefined
  17. Falsy Values – false, null, undefined, “”, 0, NAN
  18. All other values are “truthy”
  19. It is a object-orientated language
  20. Loosly – any value can be used, any function
  21. Use === for exact equals (yes three)
  22. JavaScript – every function will return a value 
  23. Object is unordered collection of name value pairs
  24. Object Literal – var myObject = {name: “Jack”, ‘goto’: ‘Jail’, grade: ‘A’} 
Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone