Ext.ux.TouchCalendar is an extension and series of related plugins that allow a calendar component to be integrated into Sencha Touch applications.

Links to the repository, documentation and demos (along with some inline demos) can be found further down this post.

Download

The extension can be downloaded from our GitHub repository - https://github.com/SwarmOnline/Ext.ux.TouchCalendar

Features

Ext.ux.TouchCalendar/Ext.ux.TouchCalendarView

• Month, Week and Day views
• Gesture support to change current period
• Time slot (day or time interval) selection

Ext.ux.TouchCalendarEvents

• Bind a data store to the calendar to display Event Bars
• Drag and Drop event moving

Ext.ux.TouchCalendarSimpleEvents

• Bind a data store to the calendar to display ‘dots’ on days with events

Documentation

Please go to swarmonline.com/Ext.ux.TouchCalendar/docs for full documentation of this extension and its plugins. You will find it under the ‘ux’ namspace folder.

A big thanks to the Rene Saarsoo (@nene) and the other guys at Sencha for their work on JSDuck!

Demos

You can try out the extension live inside the following iPhone graphics or you can view the various other demos using the links below. All of these demos can be found in the ‘examples’ directory of the project.

You are currently not using a WebKit browser. Please reopen this page in Google Chrome or Safari to get the full experience.

You are currently not using a WebKit browser. Please reopen this page in Google Chrome or Safari to get the full experience.

You are currently not using a WebKit browser. Please reopen this page in Google Chrome or Safari to get the full experience.

Issues or Suggestions?

As this is a first release we anticipate a few issues cropping up so please open an Issue on the GitHub repository and we’ll get onto it as soon as possible!

Packed with over 130 easy to follow recipes which demonstrate, through real life examples, numerous features of Ext JS 4. This book will help you create anything from basic components to advanced web applications using Sencha’s unrivalled Ext JS framework.

Ext JS 4 is Sencha’s latest JavaScript framework for developing cross-platform web applications. Built upon web standards, Ext JS provides a comprehensive library of user interface widgets and data manipulation classes to turbo-charge your application’s development. Ext JS 4 builds on Ext JS 3, introducing a number of new widgets and features including the popular MVC architecture, easily customisable themes and plugin-free charting.

Ext JS 4 Web Application Development Cookbook works through the framework from the fundamentals to advanced features and application design. More than 130 detailed and practical recipes demonstrate all of the key widgets and features the framework has to offer. With this book, and the Ext JS framework, learn how to develop truly interactive and responsive web applications.

Starting with the framework fundamentals, you will work through all of the widgets and features the framework has to offer, finishing with extensive coverage of application design and code structure.

Over 130 practical and detailed recipes describe how to create and work with forms, grids, data views, and charts. You will also learn about the best practices for structuring and designing your application and how to deal with storing and manipulating data. The cookbook structure is such that you may read the recipes in any order.

The Ext JS 4 Web Application Development Cookbook will provide you with the knowledge to create interactive and responsive web applications, using real life examples.

What you will learn from this book :

• Structure your application according to best practices, manipulate the DOM, and handle events raised by users and the framework
• Learn the layouts available in Ext JS and understand how to combine these to make complex layouts
• Create aesthetic and user-friendly forms, validate these on the client, and submit data to your server
• Present and organize data with Trees, Tabbed layouts, Data Views, and Templates
• Make AJAX requests, model data objects, incorporate Ext.Direct, perform CRUD operations on data, and integrate HTML5 local storage with Ext JS
• Work with Grids to present and manipulate tabular data by editing rows, dragging and dropping records, scrolling infinitely, and grouping data
• Represent data visually with flexible and interactive Charts and Drawing components
• Customize the look and feel of your application with SASS and Compass

What we want to do is add a button to our form that, when tapped, will add a new field to the form. By adding this functionality we can allow users to enter arbitrary amounts of data. This can be applied to situations such as, when entering ingredients for a recipe (we don’t want to restrict them to a set number, nor do we want to prepopulate the form with too many fields); adding qualifications to your CV (not everyone has the same number of qualifications so how do we allow them to enter the right number?).

So, you get the idea about why we might want this – but how do we make it?

As with all our tutorials there is a Tutorial Package that contains all the files you need to try the examples and follow the tutorial step by step. If you click on the Step’s header you can view the demo for that step.

Step 1 – Create our Form

As in the previous parts we’re going to create a basic form to house our dynamic fields. This is a simple form (with no fields) with an Add button docked to the top and a Submit button docked to the bottom.

Ext.ns('DynamicForms'); // register our namespace
DynamicForms.MyForm = Ext.extend(Ext.form.FormPanel, {

    initComponent: function(){

        Ext.apply(this, {
            floating: true,
            width: 350,
            height: 370,
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            scroll: 'vertical',
            dockedItems: [{
                dock: 'top',
                xtype: 'button',
                text: 'Add Field',
                handler: function(){
                    // handler to be completed in Step 2
                },
                scope: this
            }, {
                dock: 'bottom',
                xtype: 'button',
                text: 'Submit',
                handler: function(){
                    // handler to be completed in Step 2
                },
                scope: this
            }],
            items: []
        });

        DynamicForms.MyForm.superclass.initComponent.call(this);
    }

});

We have left our buttons’ handlers empty just now, but we will add in that functionality in Step 2.

Step 2 – Make it Dynamic

Now we add the fun stuff. What we want to do is, when the Add button is tapped, create a new TextField and add it to the Form. This is remarkably simple and requires a whopping two lines of code. So we add this code to the Add button’s handler.

this.add({
    xtype: 'textfield',
    name: 'MyField-' + this.items.length
});

this.doLayout();

We use the Form’s ‘add‘ method to create the new TextField and just pass it a configuration option that will create the field (I’ve only used a couple of config options to show the idea but you can add a full config object). We have dynamically added a number to the TextField’s name by appending the item count which is necessary due to a (in my opinion) bug with the ‘getValues‘ method which I’ll discuss later.

Finally we call a wee doLayout to force the Form to redraw itself with the new field in place.

Now if you open the Step 2 HTML page and tap the Add button a new TextField will be added. That’s it, done!

These dynamically added fields will be automatically included in the form submission and if you add the following code to the Submit button’s handler you will get a popup that shows the output of the ‘getValues‘ method.

var displayString = '';
var formValues = this.getValues();

for(var fieldName in formValues){
    displayString = displayString + fieldName + ': ' + formValues[fieldName] + '<br/>';
}

Ext.Msg.alert('Output of this.getValues()', displayString);

The aim of this post is to describe how we can use Select Fields (combo-boxes) to create a form whose options change based on the previous selections made by the user. So basically when a user makes a selection from the first Select Field we want the next one’s possible values to change, reflecting the choice made.

The scenario we will use is a simple form where the User can choose a Country and then a City from two Select Fields which could be used in a form where a User completes their Address.

As with all our tutorials there is a Tutorial Package that contains all the files you need to try the examples and follow the tutorial step by step. If you click on the Step’s header you can view the demo for that step.

I have thrown together a quick form to demonstrate this idea which consists of 2 Models (Country & City), 2 Stores (to contain the Country and City data) and a form with 2 Select Fields linked to the Country and City stores. If you view the Step 1 demo page (by clicking the Step 1 title) you will see that the first Select Fields contains 4 Countries and the second contains 8 Cities.

DynamicForms.MyForm = Ext.extend(Ext.form.FormPanel, {

    initComponent: function(){

        Ext.apply(this, {
            floating: true,
            width: 350,
            height: 370,
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            items: [{
                xtype: 'selectfield',
                label: 'Country',
                store: countryStore,
                displayField: 'CountryName',
                valueField: 'CountryID'
            }, {
                xtype: 'selectfield',
                label: 'City',
                store: cityStore,
                displayField: 'CityName',
                valueField: 'CityID'
            }]
        });

        DynamicForms.MyForm.superclass.initComponent.call(this);

     }
});

Now, at a basic level this form is fine – people should know what Country the city they live in is and they should be able to pick their City from an alphabetical list of cities. However, we know we’re better than this because this will no doubt cause some problems with data integrity later on (and we also know that, in general, we have to assume that all end-users are not very smart…) so we should make it easier and more bullet-proof. So, once the User has picked a Country we’re only going to give them the option to select a City that we already know is that chosen Country.

Step 2 – Make it Dynamic!

Like we did in the first Part we are going to hook into the ‘change’ event of the first Select Field and filter the Store (containing the Cities) attached to the second Select Field. This is especially easy because we have our Models set up to have nice relationships between them meaning we can pick up the CountryID of the selected Country and apply that to the City store to get a list of Cities. Easy!

Firstly we’ll listen for the ‘change’ event as we can see below. This code is placed below the initComponent superclass call and we also add the onCountryChange method that will be executed when the event happens:

...
initComponent: function(){

    // config omitted

    DynamicForms.MyForm.superclass.initComponent.call(this);

    this.items.get(0).on({
        change: this.onCountryChange,
        scope: this
    });

},

onCountryChange: function(selectField, value){

}
...

Next we need to implement what happens when a new Country is chosen, i.e. the contents of our onCountryChange method.

In pseudocode this is what we want to do:

1. Remove any Filter that is currently on the City select field
2. Add a new Filter based on the newly selected Country ID
3. Select the first City that appears in that list by default

So, how do we actually do that?

Remove any Existing Filters

Firstly, we grab a reference to the City Select Field component using the ‘get‘ method of the items’ MixedCollection.

var citySelectField = this.items.get(1);

Next we remove the existing filter that is on the City select field. We do this by calling the ‘clearFilter‘ method of the Select Field’s store which we can access via the Select Field’s public property ‘store‘.

citySelectField.store.clearFilter(); // remove the previous filter

Filter the Cities Based on the Selected Country

The second of the two parameters that are passed into our ‘onCountryChange‘ method is the value that was selected. This is the Model instance’s CountryID because of the way we configured the Countries Select Field. If you look back to the first code snippet we set the ‘valueField‘ config option to ‘CountryID’ which means that when calling methods such as ‘getValue‘ or ‘setValue‘ on this field you will be dealing with the CountryID of the selected Model instance.

Now that we know which Country has been selected, and the CountryID of it, we can use that to filter the Cities Select Field’s store by that value. This is a simple case of calling the ‘filter‘ method on the City store passing in the Field we want to filter on, and the Value to filter with. For anyone with SQL experience, this is performing a simple WHERE-style filtering, i.e. .filter(‘CountryID’, 1) <=> WHERE CountryID = 1.

citySelectField.store.filter('CountryID', value);

Make a Default Selection

The final step is to make sure that we keep things tidy. If you run your code right now you will find that the filtering works a treat but after selecting a City and then changing your Country, the selected City remains. We can’t have that because then an incorrect City could be submitted for the selected Country. We can fix this by automatically selecting the first City in the newly filtered list or, if there are no Cities available for the chosen Country, just set the value to a blank.

First we grab the first City in the filtered Store.

var firstCity = citySelectField.store.getAt(0);

If there are no Cities present then the firstCity variable will be set to ‘undefined’ and so we can use this as a check before we set the default City value because if there isn’t any we want to reset the Select Field to a blank string.

// if not undefined we can set the value to the first record's CityID
if(firstCity){
 citySelectField.setValue(firstCity.data.CityID);
} else {
 citySelectField.setValue('');
}

That’s all we need to put in our change event handler and the full method looks like this:

onCountryChange: function(selectField, value){
    var citySelectField = this.items.get(1);

    citySelectField.store.clearFilter(); // remove the previous filter

    // Apply the selected Country's ID as the new Filter
    citySelectField.store.filter('CountryID', value);

    // Select the first City in the List if there is one, otherwise set the value to an empty string
    var firstCity = citySelectField.store.getAt(0);
    if(firstCity){
        citySelectField.setValue(firstCity.data.CityID);
    } else {
        citySelectField.setValue('');
    }
}

The last bit of code we need is to force all this to happen when the form first loads because otherwise all the Cities are present in the list even though no Country is selected. We can do this by simply calling the ‘onCountryChange‘ method ourselves at the end of the initComponent method. We pass in a reference to the Country Select Field and a value (CountryID) of 1, which is the default selection.

this.onCountryChange(this.items.get(0), 1);

And there we have it, a simple chained Select Field form.

This technique can improve your form in a couple of ways:

We reduce the possibility of incorrect data hugely.
There will always be someone who picks their Country as England and their City as Cardiff (obviously, being good app designers, we’re checking all this again on the serverside but we want to make that code redundant for the average, non-hacking user) so preventing them from doing this in the first place is an instant win.

It enhances the user experience.
In our simple example the lists are only a few of entries long meaning finding the right entry is fairly easy, but imagine dealing with much larger lists and the problem is multiplied, leading to frustrated and angry users.

I hope this quick tutorial has helped you to add some more clever dynamics to your forms. If you have any ideas for other ways to make forms a little more clever then leave a comment and we will see if we can come up with wee tutorial explaining how to do it.

In this article we’ve put together a (non-exhausted!) list of a few of the things we’ve picked up and things we recommend you do when starting out with Ext JS (hey, even you veteran developers might learn something new!). These things have come up through our own experience; through seeing and replying to the same issues on the forums again and again; and just general good programming practices.

Hopefully this will jump you a few rungs up the ladder of learning Ext JS and help you avoid falling into the usual traps!

Avoid using Ext.getCmp

Don’t be tempted to give all your components IDs and then use Ext.getCmp to find them again. If you structure your applications correctly and apply the principles of Object Oriented (OO) design properly then you shouldn’t have a problem getting access to your components when you need them.

Useful References:

Writing a Big Application by Saki

Component Communication Example by Saki

Avoid Using the ownerCt Property

Don’t rely on the ownerCt property to get a component’s parent. Chances are if you’re wanting to access the component’s parent within its code then the code shouldn’t be there. The code should likely be in the parent itself. This is a similar thing to using Ext.getCmp (above) so make sure you read the linked articles!

Do Not Overnest Components

A hugely common mistake found in new Ext JS developers’ code is the overnesting of Panels. Think carefully about your structure and remember that components such as FormPanels, GridPanels and TabPanels all extend the Panel class so don’t need to be wrapped in another Panel. They can be placed wherever their more generic parents can and be configured with the same options.

Be Careful of Spaghetti Code/Scope

Don’t define all your components in one big file or all inline – it will be a nightmare to debug and your scope will be all over the place. Make things easy and split each component definition into its own file and extend the base class to add your configuration and extra methods and behaviours. This way you can simply instantiate these components where you need them keeping things nice and tidy and loosely coupled.

If you don’t want to extend base classes all the time then using Factory Methods is another option.

Make Sure You Use Namespaces

Again, its all about organisation. Utilise the inbuilt namespace capabilities of Ext JS to organise your components and classes so its easy to navigate later. Typically you would want to do this by functional module, for example, MyApp.Users for all the User management code. I like to mirror this namespace structure with the folder structure so everything is dead easy to find.

Use Get/Set Methods or Static References

Don’t be tempted to delve into a component’s items or toolbar collections to get a reference to a particular button or panel using the ‘comp.get(0)’ or comp.getTopToolbar().get(1)’ syntax. If you ever add items to these collections the references will be broken and you will have to track them down. In a big application this becomes a mammoth task which will introduce bugs.

Save yourself some hassle and, in the extended class, create a get method for the necessary components, which delves into the collection, so when you do add more items you know there is only one method to be updated. Or, if you aren’t concerned about lazy instantiation, define your buttons and items as class variables and reference them that way so you won’t need to make any updates when new items are added.

Name Your xtypes Carefully

Name your xtypes the same as your class, including namespaces, so you can track down the actual class definition very easily.

Reuse Your Code

If you find yourself writing the same code again and again (think masking elements while loading, response/error handling code etc) then wrap that stuff in a function in a way that makes it generic and reuse it. Save yourself the time, effort and RSI – you’ll thank yourself when you decide to change it and have to change hundreds of copies.

Try Not to Nest Functions

Don’t define functions within functions (within functions…within functions…). You may think your doing some good code reuse but your just creating a scoping and organisation nightmare. Trying to follow that sort of nesting is not pleasant, so spare a thought for your co-workers who might have to debug it.

Learn how to use FireBug

…or WebKit’s Developer tools. Make sure you install and use an in-browser tool like FireBug to debug your Javascript and to explore what HTML and CSS the framework is creating. It’s easy to forget that, at the ground level, all Ext is doing is generating markup and these tools will give you an insight into what’s happening in the black box. If you learn how to use these tools properly and how to debug your JS effectively you will save yourself a huge amount of time.

Not to mention everything else it can do – Monitor AJAX requests, DOM exploration, real-time CSS changes etc etc

Make it a White Box!

As Evan says “Don’t be afraid of the source code!”. Use your new found FireBug knowledge to break into the Ext JS Framework rather than always stepping over those calls. It’s incredible how much you can learn and how easily you can find a problem by stepping into a framework method, not to mention the hours of stress trying to figure out a problem.

Always Have the Docs Open

The API documentation is your best friend – it should be your first port of call when running into problems or when trying something new. Intellisense for Ext JS isn’t quite up to the standards of Visual Studio for .NET so we can’t get away with being so lazy – the docs are the answer to this. They are well laid out and easy to navigate, so make use of them!

Debugging Chain

How you should go about fixing a problem…

Check your Code (it’s easy to misspell config options, miss commas etc)

Refer to the Documentation (you might be missing a related config option)

Step into the Framework’s Source Code (break into the code around the error and try to see what’s going wrong, you’ll likely discover a config option you’ve missed, or realise something you expected to be there isn’t instantiated yet)

Search the Forum (it’s almost a guarantee that someone will have had the same problem and posted a question about it)

Search the wider WWW (if the forum can’t help the wider web might be able to)

Post on the Forum (if you still can’t find the resolution, create a new thread with as much detail about the problem as you can – make it easy for people to help you)

Build it Up Gradually

It’s all too easy to get too excited about a project and dive right in and create half a dozen components and then open the browser and give it a try. If it doesn’t work it can be very difficult to move backwards trying to find the culprit. We suggest creating things a stage at a time and gradually build it up once you’re sure each thing works as you want. For example, if you’re trying to create DataView that allows new items to be added to it with the new item being animated in – get the new items adding first then move on to animating it. If you try to do everything at once something’s likely to go wrong.

Minify & GZip your Production Code

We recommend separating out all of your components into their own files. This means you’re going to have a bucket load of requests to download them all so make sure you minify your scripts into a single file to minimise the number of requests and to compress the file size.

Once you’ve done this make sure your server is set up to GZip your scripts. This can reduce the download size by about 70%!

Don’t Edit the Framework Code

Yes, delve into it, read it, test it, learn from it – but don’t edit it! If you start making changes to the core library, whether it is the JS or CSS, you are planting a ticking time-bomb into your application. When you come to upgrade to a newer version all those changes will be lost and you will have to traipse through trying to figure out where things are broken!

If you want to alter the behaviour/look of the framework then go for it but do it by overriding the class (be it a JS class or a CSS class) or method in a seperate script file. By doing this you can remove it if necessary and keep track of it when it comes to reviewing those changes when new versions are released.

Use Plugins and User Extensions

If you are wanting a component to do something that is fairly generic and a common functional requirement it is likely that someone has already coded it and released it as a Plugin or an Extension. Take some time before coding it from scratch (unless you have the time – it’s a great way to learn!) to search the forums and the web for a pre-made solution.

Define Generic Items in a Central Location

It’s handy to define all your variables, namespaces etc that are used application wide in a single config file. This keeps everything in one place, makes values easier to update and encourages reuse.

Consider Using Ext Direct

Ext.Direct is a brilliant feature of the Ext JS Framework and we highly recommend you implement it from the outset. It has various advantages including increasing speed, reducing code and a simplified way of interacting with your server. If you think you might consider it in the future, don’t, consider it now. It’s far easier to implement from the outset than convert everything over. You’ll thank us in the long run!

Test on All Browsers!

Although Ext JS takes care of 99% of cross browser issues always remember to test your application across all the browsers – especially IE! The usual IE CSS issues are common when creating custom data views and JS errors such as rogue commas will bring your application to its knees.

If you have any of your own tips or best practises please leave us a comment and we’ll add them to the list!

This plugin duplicates the functionality found in Twitter’s mobile apps where an options menu is exposed after swiping over an item in a list. The plugin was created as an ‘I wonder if that’s possible’ type project and serves to prove once again that anything native apps can do Sencha Touch can do too.

The Plugin

The plugin is added to Ext.List components and requires only a few configuration options to get it up and running quickly, however it also offers quite a lot of control over its behaviour.

Configuration Options

Events

The plugin adds 3 events to the parent Ext.List component.

An Example

I’ll talk through a simple example that is based on the Ext.List demo in the Sencha Touch download package.

First I’ll quickly explain the Model, Store and plain List. I’ll assume you have a base index.html file with all the library files etc linked into it.

Defining the plugin

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
    model: 'Contact',
    getGroupString: function(record){
        return record.get('lastName')[0];
    },
    data: [{
        firstName: 'Tommy',
        lastName: 'Maintz'
    }
    ...
    {
        firstName: 'Jay',
        lastName: 'Robinson'
    }]
});

var list = new Ext.List({
    fullscreen: true,
    itemTpl: '{firstName} {lastName}',
    indexBar: true,
    store: store,
    disableSelection: true
});

list.show();

If you fire this inside your Ext.setup function and load the page you should see a list with some of Sencha’s employees in it.

Now, let’s add the plugin!

Firstly make sure you’ve added the Plugin’s source file and CSS file.

//Inside the Ext.List's config
...
plugins: [new Ext.ux.touch.ListOptions({
    menuOptions: [{
        id: 'Team Icon Tapped',
            img: 'images/team1_small.png'
    }, {
        id: 'Favourite Icon Tapped',
        img: 'images/favorites1_small.png'
    }, {
        id: 'Cart Icon Tapped',
        img: 'images/shop2_small.png'
    }, {
        id: 'Share Icon Tapped',
        img: 'images/share_small.png'
    }]
})]
...

By taking the default values for all the other config options and adding some menuOptions we get the plugin up and running straight away. You can now play around with the various options to get the plugin working how you want!

If you have any problems with using the plugin, have questions about how it works or have suggestions about ways we can make it better then please leave us a comment or drop us an email!

Flashy? Yes. Flash? No

First things first, no Flash. That’s right, beautiful, animated, colourful, shiny graphs without any nasty plugins needed. Ideal. It relies on the Ext.draw package which uses SVG, Canvas or VML depending on what your browser has to offer and draws them directly on the page.

Maximum Interactivity

People like clicking stuff, your boss definitely wants to be able to click a graph point and have that data jump straight into his brain or at the very least expand out into a nice summary window. Now you can keep him happy.

Every part of the chart is a regular Ext object so you can attach to events and add functionality just like you would with any other part of Ext.

Create any Chart Style

You can create your own chart types by extending the Cartseisan Series class (or one of its sub-classes). This means you can finally have that bar chart that renders 10 bananas in a row to represent the amount of lunch your pet monkeys are actually eating. Sure, its not going to be that easy but its possible!

Smooooth Curves

Like things to be gentle and smooth? You’re in luck! You can now render line graphs with smooth paths through each point. Unfortunately it’s VERY difficult and requires a lot of code…

smooth: true

Oh wait, nope, that’s all it takes.

Variety out the Box

The sheer number of built in chart types is huge. At the base level you have 7 different types:

• Bar
• Column
• Pie
• Scatter
• Radar
• Area
• Line

And each of these has a boat load of configuration options to make them pretty unique even to themselves. And, as I mentioned before, its easily expandable until your imagination explodes.

Resolution Independent

All the graphs are created as vector graphics so you can zoom until your heart’s content without losing quality.

Customise. Everything.

Each tiny aspect of an Ext JS 4 chart can have its look customised through nothing fancier that its config object. From things like the appearance of a Line Graph’s point markers to the style of a pie slice when it’s hovered over – it’s all there, ready for people to make the most hideous looking graphs since Excel c.1999.

Make friends with Ext 3

You can use it with Ext 3! Yes, you heard me right. You can have Ext JS 4′s charting package sitting right alongside your Ext 3.x application and everyone will play nicely and won’t fight.

Mobile Friendly

You can use them with Sencha Touch. Ok, not yet but that is the plan and the way they have been written means it will be easy and work across all WebKit browsers.

Make Your Life Easier

Let’s be honest, the power that this charting and drawing package provides is going to make us developers’ lives much easier and keep our bosses happier than ever. This can only be a good thing, but will undoubtedly result in their imaginations running wild and demanding more – I’m confident that the future releases and the community contributions won’t disappoint!

Let us know if you’ve been tinkering with Ext JS 4 and its charting package and have some more words of praise.

For more information on Ext JS 4′s Charting package check out the links below:

Ext JS 4 Charts and Drawing Demos

Introduction to Charting and Drawing blog post

Sencha Conference 2010 Charting Presentation

Sencha Conference 2010 Charting Slides

or view the live demo (please use Safari, Google Chrome or your Smartphone!)

Step 1 : Basic Card Layout

The theory behind achieving this is pretty simple. We decide if we’re on a phone or a tablet and then alter the defined ‘layout‘ config accordingly. We’ll set up a simple example with a list and a map in a card layout initially, with a button in a docked toolbar that will switch between them.

Ext.ns('SwarmOnline');

SwarmOnline.CardPanel = Ext.extend(Ext.Panel, {

    initComponent: function(){
        var layoutCustom = 'card';

        var itemCustom = [{
            xtype: 'list',
            itemTpl: '{firstName} {lastName}',
            indexBar: true,
            store: store,
            disableSelection: true
        }, {
            xtype: 'map'
        }];

        var dockedItems = [{
            dock: 'top',
            xtype: 'toolbar',
            items: [{
                text: 'Switch',
                handler: this.onSwitchTap,
                scope: this
            }]
        }];

        Ext.apply(this, {
            fullscreen: true,
            layout: layoutCustom,
            items: itemCustom,
            dockedItems: dockedItems
        });

        SwarmOnline.CardPanel.superclass.initComponent.call(this);
    },

    onSwitchTap: function(){
        this.setActiveItem(this.getActiveItem() === this.items.get(0) ? 1 : 0);
    }
});

var cardPanel = new SwarmOnline.CardPanel();

If you open the demo for this step (by clicking the above) you will see a list and then a map if you click the Switch button. That’s a great start and is how most apps would display such data but what if the user is using an iPad? That list will be stretched hugely in the x-axis and will probably look pretty naff, so why not show both?

Before we move on, note that we defined the items and layout config options in variables and then put them into the Ext.apply call, we did this so we can fiddle with them before doing the final configuration.

Step 2 : Dynamically Change the Layout

So what we want to do is display the list at one side of the screen and the map alongside it so they can be viewed simultaneously giving a much better experience to the user and also improving the appearance of the list greatly. To do this we add a new method to decide what sort of device we’re on and then alter the ‘layout‘ variable depending on the result. In this case if it isn’t a Phone/iPod then we’re going to make it use an hbox layout with a 1/3 flex.

initComponent: function(){
    var layout = 'card';
    var items = [{
        flex: 1,
        xtype: 'list',
        itemTpl: '{firstName} {lastName}',
        indexBar: true,
        store: store,
        disableSelection: true
    }, {
        flex: 3,
        xtype: 'map'
    }];

    var dockedItems = [{
        dock: 'top',
        xtype: 'toolbar',
        items: [{
            text: 'Switch',
            handler: this.onSwitchTap,
            scope: this
        }]
    }];

    if (!this.isPhone()) {
        layout = {
            type: 'hbox',
            align: 'stretch',
            pack: 'justify'
        };
        dockedItems = [];
    }
}

..and then the method to decide what device the user is on…

...
isPhone: function(){
    return Ext.is.Phone || Ext.is.iPod;
}
...

As you can see on Line 4 and 11 we add a flex config option – this will be ignored if we are using a card layout so it can be set straight away no matter what the device. We then call our isPhone method, and if it isn’t a Phone/iPod then we change the value of the layout variable to be an hbox config (Line 26-30) and reset the dockedItems array so the Switch button doesn’t show. If you run this code (or click the Step 2 header) then you should see (assuming your on a PC/Mac and not a phone) the List and Map side by side.

So there we go, dynamic layouts based on the user’s device – easy!

Please post a comment or email us if you have any problems or suggestions!

or view the live demo (please use Safari, Google Chrome or your Smartphone!)

Integrating JS Builder 3 with Eclipse or Aptana may save you some time building your Javascript application for a testing or production environment.

Integrating

So, first off you need to get a copy. It’s currently included with Sencha Touch and will undoubtedly be included with Ext JS 4 when it’s fully released.

I’m not going to talk you through how to actually pick and choose files. The .jsb3 and .jsb2 files included with Sencha Touch and Ext JS are pretty self explanatory and there is plenty of documentation.

External Tools Configuration

We need to use the “External Tools Configuration” features in Eclipse for this to work. There are two ways to access this:

1. Right Click your Project -> Choose Properties -> Builders.

2. In the top toolbar there is a “External Tools”  button (green play button with a small toolbox). In it’s menu there is an “External Tools Configuration” option.

Step by step:

1. Click “New“
2. Select “Program” from the “Choose configuration type” selection
3. We only need to use the “Main” tab. You’ll need to give it the following parameters:

Location:

This is the path to cmd.exe which should be “C:\WINDOWS\system32\cmd.exe” without the quotes.

Working Directory:

The working directory is the directory where JSBuilder.bat is stored. In my case I’ve included the JSBuilder files in the project.

I’m therefore going to make use of the Variables on offer. More information can be found in Eclipses documentation.

So in the working directory we use “${workspace_loc:/SampleProject/JSBuilder}” again without quotes. You could alternatively put an absolute path to the correct directory.

Arguments:

The arguments are the parameters you’d supply the batch file. You’ll need to remember to include a reference to the batch file here also. We do this like this:

/C JSBuilder.bat -v -p “${workspace_loc:/SampleProject/build.jsb3}” -d “${workspace_loc:/SampleProject/deploy/}

Again I’ve made use of the Variables but you could use absolute paths like so:

/C JSBuilder.bat -v -p C:\Path\To\SampleProject\build.jsb3 -d C:\Path\To\SampleProject/deploy/

Note that if you decide to use variables or spaces in your path names you’ll need to wrap the individual arguments in quotations. Also, you don’t need to put a quotation mark at the end of the arguments.

Finally

You can try your new External Tool by running it with “CTRL + B“. The console will open and hopefully you’ll get some nice output of your application building and finally a few files in your deploy directory for inclusion in your application.

Hope you’ve found this useful. If you have any questions or run into issues please leave a comment below. You’ll also find some interesting reading in the JS Builder Forums.