Results 1 to 3 of 3

Thread: Quick and Dirty Theme Tester

  1. #1

    Default Quick and Dirty Theme Tester

    Hey folks. I've been (slowly) working on converting the Slate theme from 2.2.1 to 3.0. This morning, frustrated with my testing process, I whipped up the attached code that might serve as a pattern to help other theme converters. It's not pretty, but it works, and I'll refine as I go. With some tweaking, it might also help out people building brand new themes.

    The premise is: load up two iframes, one with Ext2.2.1 and one with Ext3, and then run the same (or as same as they can be with the 3.0 code changes) tests in each. The attached zip file has the files I'm using for testing the Slate theme:

    SlateTest.html - the main test file that you load in your browser that contains the iframes.
    SlateTest2.html - Boot html to run the 2.2.1 examples.
    SlateTest3.html - Boot html to run the 3.0 examples.
    tester.js - base tester class that holds most of the "guts" of the test harness
    tester2.js - specific test functions for Ext 2.2.1.
    tester3.js - specific test functions for Ext 3.0.

    You would only put test functions in tester2 and tester3 if there are differences in how you write the code for those tests due to API changes between the versions. (See the files for a couple specific cases.)

    You will also need to create a folder structure to include both ext2 and ext3, along with your theme's individual resources. See my attached image of my textmate project to see how I have it laid out.

    As you add new tests, you have to add a reference to them in the dropdown list. The dropdown list is an array at the top of tester.js and you can just tack on new tests as you develop them. The first value in the item array is the function that will be called (by eval) when you select the test from the list. So if you add in a function called test5, you'd add ['test5', 'This is my 5th test'] to the array.

    Finally, there is a third attachment showing it in action. Basically, you just select the test from the dropdown and it runs. Select the same test in both frames and you see them side by side in one browser window.

    For theme designers just concentrating on a single version, you should be able to use the same basic pattern. Just change your SlateTest2.html to include version 3 ext libraries and change your CSS references.

    Hope it helps someone and if anyone cleans it up or adds features, please post them up.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Redwood City, CA


    Good to hear that slate theme is being converted (: Nice work dude

  3. #3
    Ext JS Premium Member dancablam's Avatar
    Join Date
    Apr 2008
    Dallas, TX


    Thanks Dave. Can't wait to get my hands on Slate for 3.0. Keep us posted!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts