Training Tip: Learning About Features in Ext JS 5.1

Gxt

This month we’d like to remind you that if you’ve ever attended the Fast Track to Ext JS course, you have access to the material for a year via http://training.sencha.com. We’re continuously updating the course to reflect new features of Ext JS, so if you’ve taken the course you will have access to the updated material.

Sign Up for the Next Ext JS Training Class
See the 
complete class listing for details.

Sencha Ext JS 5.1 included some great new features. The Fast Track course summarizes those changes in the Overview > What’s New In Ext JS 5.1 topic.

That topic discusses:

  • The spreadsheet selection model that allows you to select rows, columns, and blocks of cells. It’s an all-in-one selection model that you may choose to use in all your grids. It was a customer request to add a feature that more closely behaves like a desktop spreadsheet app.
  • The grid clipboard plugin that allows you to cut, copy, and paste from a grid.
  • 3-D bar and column charts. Your charts will look great, and the colors you use will have 3-D shading done for you automatically.
  • The chart item event plugin lets you listen to item events, such as itemclick or itemmouseover. Item events are passed the field, record, and other parameters. That makes it easy to view or change the underlying data. Charts often display so much information that they are difficult to decipher. Among other benefits, these new events make it possible to drill down into the details without cluttering the chart.
  • The enhanced color field widget gives you more ways to specify colors.
  • The new rating widget that lets you specify a customizable set of images. The user clicks or taps along the range to specify a value.

Many of these feature are already implemented in the YelpExtplorer application that you developed in class. The labs incorporating the new enhancements to Ext JS are also worth a look.

Here are a few things that have changed in YelpExtplorer:

Previously, the YelpExtplorer grid used a template column image and a slider to reflect the business rating. Those have been replaced with the rating widget. Besides being simpler and better looking, the slider also lets you edit the data.

The YelpExtplorer edit window also changed. Previously, your code listened to the window show event, and initialized the form via loadRecord():

 
onWindowShow: function(win){
  var business = this.getViewModel().get('editBusiness');
  this.lookupReference('form').loadRecord(business);
}

When the form was closed, you ran updateRecord() to copy the data back to the business record. Even though this worked, it was not optimal.

In the revised instructions, form fields are bound directly to the record, which means the onWindowShow event isn’t needed at all. Furthermore, edits are live — as the user types a business name, the view, grid, and detail panel show the edits immediately. The Save and Cancel then simply need to commit or reject the edits:

 
onSave: function(button) {
    this.getViewModel().get('business').commit();
    this.getView().close();
},
onCancel: function(button) {
    this.getViewModel().get('business').reject();
    this.getView().close();
}

A record reject reverts the record’s values to their original values, or to the most previously committed values. Therefore, we need to do a commit every time the user presses Save.

The code also uses the rating widget instead of a slider and associated images. With the old code, you had to use controller logic to listen to changes in the slider and update the image accordingly. That’s all built into the rating widget now, so that control logic is no longer needed.

In addition, the form now uses model validation, and a formBind on the Save button. Model validation means the input field reflects the record’s validation rules. Having formBind:true on the Save button means it is enabled or disabled based on whether the form is valid. These changes result in simpler code and make use of more 5.x features.

We also revised the Tree Panel topic to more clearly explain Ext.data.NodeInterface properties and methods. The slides go into more detail about ways to configure and use a tree store. There are also examples of how to use styling properties and methods for adding and styling nodes.

A link to all lab steps is available in the course materials in the Appendix > Lab Index topic. If you have questions about any part of the training material, please email training@sencha.com.

We pride ourselves on keeping these training materials up to date, so come back to the Training website regularly to check for the latest info on Ext JS.

Gxt No Comments   Read more

Our Engineers Want to Talk App Dev With You at SenchaCon

Senchacon TeaserSenchaCon is right around the corner, and our engineers are gearing up to share some pretty impressive presentations with you, including some exciting new updates on theming.

But that’s not all. You’ll also have face time with engineers in the Community Pavilion where you can hang out in the Sencha Zone, discuss enhancements to the frameworks and work through any dev questions about your apps. Let’s take a look at what our engineers have in store for you.

Meet the Speakers – Click to watch their videos

  • Art Kay – “I’ll be discussing some advanced features of Chrome Developer Tools, and then talking about how we built App Inspector for Sencha.”
  • Don Griffin – “I’ll be covering the data package, data binding, view models and how to target apps for desktop to smartphones.”
  • Lee Boonstra – “My talks will be on advanced theming, and I’ll show you how to make your apps look great.”
  • Mark Brocato – “I’ll be doing a technical talk on the new plugin for IntelliJ, WebStorm and the other JetBrains IDEs that provide language support for Ext JS.”
  • Ross Gerbasi – “I’ll be talking aboutapplication configuration and the microloader.”

Check out the complete speaker list.

One Day Pass

If you can’t be away from the office for three days, we’ve got the perfect solution. You can attend one day of the conference — either April 8th or 9th. The discounted price is only $750 — that’s more than 50% off the regular conference pass price.

Training

Don’t forget to sign up for Ext JS & GXT training sessions — only $200 per class. Beginner and advanced sessions on April 7th at the same location.

Fun Stuff

Come to learn and stay for the parties! At the Levi’s Stadium party, we’ll take you on a behind-the-scenes stadium tour. And, you might be lucky enough to walk away with tickets to the NFL’s biggest game in 2016.

Senchacon Teaser No Comments   Read more

Optimizing Your Ext JS Apps for Touch and Tablets

Optimizing Your Ext JS Apps for Touch and TabletsWoop there it is — Ext JS 5. Now, you might wonder why you should upgrade. There are many reasons why you’ll want to upgrade your existing Ext JS 4 applications, but most important is optimizing your application to support touch and tablet devices.

Right now, everybody is used to running their applications on “mobile” devices. We live in a multi-device world. I read most of my email on my phone. Usually when I have to read a PDF or browse to a website, I use my tablet. I don’t even print documents anymore because I have a tablet. Going mobile is extremely important. This is why a lot of enterprises want to have their apps work on a touch device too.

Sure, you can run any website or web app on your iPad, so your existing Ext JS 4 application might run fine. But often, it behaves strangely or looks funky. That’s because it’s not optimized for touch support.

To learn more, join us for our upcoming webinar.

Optimizing Your Current Ext JS Apps for Touch and Tablets

Thursday, 9/25 at 9:00am PDT

Let’s take a look at the next screenshot — the app is running on an iPad Retina. Obviously, it doesn’t look right, there’s not enough space for the chart. The grid rows are too small, and there’s no white space around the buttons. I could easily tap the wrong button with my fingers.

Also, tablets don’t support the features that were designed for use with a mouse and keyboard, such as right mouse click, hover states, etc.

Band Manager App

MC Hammer would say: “U can’t touch this!”.

That’s why you need to optimize for touch. Because Ext JS 5 is an HTML5-based framework, we can optimize our apps by upgrading to Ext JS 5. But what about Sencha Touch — the other “mobile” framework.

Hammer Time

The Difference Between Sencha Touch and Ext JS

Sencha Touch is a lightweight framework, specifically designed to support phones. It ships with all these device-specific themes (for iOS, Android, Tizen, Blackberry and Windows Phone). Sencha Touch also has a platform switcher, and it can run in offline mode.

You may wonder: if I can use Sencha Touch for tablets, why would I use Ext JS 5 instead?
Ext JS 5 also has support for mouse and keyboard, so you can run your apps on desktop and touch devices. Ext JS 5 continues to support Internet Explorer 8 and 9. It has many components and the architecture was developed to support large data sets. When you need to build large enterprise applications, Ext JS 5 should be your first choice. Also, when you already have an existing Ext JS 4 application, it’s much easier to upgrade to Ext JS 5 (and also better to maintain), than writing another Sencha Touch app.

Stop! Hammer Time!

Let’s break it down, and review all the features and components that ship with Ext JS 5, and what you can use to create touch applications.

  • New Event System & Touch Gestures
  • Touch Themes
  • Responsive Config
  • Touch Components

Event System & Touch Gestures

The Ext JS 5 event system makes a significant paradigm shift from previous releases by moving away from directly attached DOM listeners to a delegated event model (first implemented by Sencha Touch). The advantages are that it reduces the number of interactions with the DOM which can, especially on older browsers, be quite expensive. Also, it enables Touch Gestures, such as: swipe, pinch and rotate.

This means that for each type of event (mousedown, touchstart, etc.) a single listener is attached at the very top of the DOM hierarchy (the window object). When a DOM element fires an event, it bubbles all the way to the top before it is handled.

So we have an event system, which works out of the box; what else can we do for easy touch optimization? Well, Ext JS 5 has new touch optimized themes you can directly use in your apps.

Touch Themes

Ext JS 5 ships with new themes that are designed for touch devices. Buttons, components and icons are bigger and include more white space to make sure you won’t mis-tap an item.

Take a look at the next screenshots.

Neptune Touch Theme

The Neptune Touch theme is highly customizable. This theme takes the modern and minimalistic look and feel of Neptune and adapts it for use in touch­-centric contexts by increasing the size of some tappable elements to make the theme more touch­ friendly.

Crisp Touch Theme

The Crisp Touch theme takes Neptune Touch and modifies the default colors, icons, etc., while keeping the same touch­-friendly, iOS-like dimensions.

You can switch between themes by adding the theme property to myapp/app.json:

"theme": "ext-theme-neptune-touch", //or "ext-theme-crisp-touch"

Although technically, you are running a touch-optimized app now, it still might not feel exactly right. That’s because optimizing for tablets also requires that you wear your designer hat. Sencha gives you all the tools, but you might need to re-think and re-design some parts of your existing app.

For example, on your desktop you can layout components next to each other, but on a tablet you might want to dock components underneath each other; maybe there are even components you would like to hide. You can do this with the responsive design feature in Ext JS.

Responsive Design

With the release of Ext JS 5, Sencha supports responsive design. To implement responsive design, you don’t need to code media queries in your CSS, you can write Sencha configurations, just like you’re used to:

plugins: ['responsive'],
responsiveConfig: {
        portrait: {
                dock: 'bottom'
        },
        landscape: {
                dock: 'right'
        }
}

For more info, see also:
http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.plugin.Responsive

Responsive Theme Ex

Apart from responsive design, you might also need to review your current view components. By upgrading to Ext JS 5, all current components would be optimized for touch support. For example, the grid would behave perfectly on a tablet. A long press on a grid header would show the sorting dropdown. But you may also want to change certain components.

Touch Components > Forms

Ext JS 5 uses the HTML5 doctype. Therefore, we can use HTML5 forms and set form types. Such a form type can force a particular device to display the correct keyboard. Such as email, search, file, url, number, datetime, etc.

Here’s an example of how to set form types in Ext JS:

{
        xtype: 'textfield',
        inputType: 'email',
        name: 'email',
        fieldLabel: 'Email'
}

On an iPad, it will display the keyboard used for email addresses — note the @ key.

ipad Display

Touch Components > Tabs

In Sencha Touch, you could position the Ext.tab.Panel at the bottom of your screen, center aligned with an icon — a common design choice for tablet interfaces. Now, in Ext JS 5, the Ext.tab.Panel can be configured like that too:

Ext.create('Ext.tab.Panel', {
        title : 'Bands',
        renderTo : Ext.getBody(),
        height : 500,
        width: 400,
        layout : 'hbox',
 
        tabBar: {
                layout: {
                        pack: 'center'
                }
        },
        tabPosition: 'bottom',
 
        defaults: {
                iconAlign: 'top',
                bodyPadding: 15
        },
 
        items : [{
                title: 'The Ramones',
                glyph: '117@Pictos',
                html: 'Blitzkrieg Pop'
        }, {
                title: 'Billy Idol',
                glyph: '117@Pictos',
                html: 'White Wedding',
        }, {
                title: 'Rolling Stones',
                glyph: '117@Pictos',
                html: 'Paint it, Black'
        }]
});

Touch Tabs

Touch Components > Charts

Chart components can use the same chart package as the one in Sencha Touch. These charts are SVG- or HTML5 Canvas-based, and can deliver better performance on mobile devices. This enhanced charting package brings many new features to Ext JS 5, including:

  • Pan, zoom and crosshair interactions
  • Candlestick and OHLC series
  • Floating axes
  • Multiple axes
  • Greater customization

Touch Charts are not included in the framework, but they are available in a separate package. Therefore, to use them, you’ll need to enable the package:

"requires": [
        "sencha-charts" // ext/packages/sencha-charts
]

Please note when using the new charting package, some of the chart syntax has changed. It’s best to look at the Charts API docs or guides for more info.

Touch Charts

Conclusion

There are many more tricks that Ext JS 5 can offer that would work perfectly in the multi-device world. Device and feature checking, offline proxies…and more. You can start playing with this right now and test it on your touch device.

If you’d like to learn more about upgrading to Ext JS 5 and optimizing your existing apps for tablets, take our course: Upgrade to Ext JS 5 & Optimize for Tablets. Check out our course listings to sign up for one of our classes — online, on-site or at worldwide locations.

No Comments   Read more

Training Tip: Developing Apps in a Multi-Device World

I work for Sencha as a technical trainer, which means I travel a lot. Whenever I go through security at the airport, I have to pull out all my electronics. I’m always so amazed how many devices I have with me — a laptop, a tablet, an e-reader, my portable game console, a smartwatch, maybe my camera and of course my phone. Be honest, how many devices do you have with you right now while you’re reading this article — 3? 4? 5 or more?

We live in a multi-device world. You all have the same devices I do. Others have cars with smart navigation systems. All these devices have screens and often an internet connection. They come in different flavors — but they all run apps.

Multi-device world

As you think about developing apps, which of these different devices will you target? Will you develop a native app for every device? That’s gonna be a pain to maintain, and it will cost a lot. So ideally, you would like to build a single app that runs on every device. To do this, you will have to look at the differences between all these devices.

Various Screen Sizes

Sencha Touch Multi-device world

The first thing you probably noticed is the screen size. Looking back, the days when I developed websites for 800×600 and 1024×768 are over. Nowadays, there are so many different resolutions that you can’t keep track of them all. Different devices have more or less space available on the screen, so it makes sense to design your application differently.

Think about an email application that runs on your phone and only displays a list. When you tap on an email subject, it displays the email. Now, when you run this app on a tablet, suddenly the list with emails is docked to the left, and all the email bodies are always visible in the center of your screen — simply because there is more space available.

One solution for building interfaces like these is responsive design. With techniques like CSS3 media queries, flexible grids, images and relative units, you can have a website respond to the user’s screen size.

With the release of Ext JS 5, Sencha supports responsive design. To implement responsive design, you don’t need to code media queries in your CSS, you can write Sencha configurations, just like you’re used to:

plugins: ['responsive'],
responsiveConfig: {
        wide: {
                height: 100
        },
        tall: {
                height: 20
        }
}

See more information in the Sencha docs.

In Sencha Touch, we deal with various screen sizes by creating device profiles. Device Profiles are great because not only can you create different views per device, you can also create different functionality:

Ext.define('MyApp.profile.Tablet', {
        extend: 'Ext.app.Profile',
 
        config: {
                name: 'Tablet',
                views: ['Main']
        },
 
        isActive: function() {
                return Ext.os.is('Tablet');
        }
});

See more information in the Sencha docs.

Different Operating System, Different Browser

Assuming all these devices can run a browser, another big difference across platforms is the operating system and the browser engine. Windows, Linux, Android, Mac OS X, iOS use different browser engines: Webkit (Safari, Google Chrome), Trident (Internet Explorer), Gecko (Firefox) or others.

Often, websites and web applications look and behave differently on each browser or browser and OS combination. This is why you need to test your application on multiple devices. Or, you can use a framework, such as Ext JS 5 or Sencha Touch. A good framework can make a developer’s life easier. We can focus on the things we love like implementing our business logic and creating app ideas. We let the framework deal with all the challenges and pitfalls of app development for different browsers on different platforms.

User Input

All these devices vary in the types of user input they support. Does your device support touch and gesture input? Mouse and keyboard? Maybe you run your app on a device with a stylus? Your smart TV app might require a remote control. Or maybe you want to go totally overboard and create Minority Report / Xbox Kinect like gestures? For example, you could develop an app in JavaScript and implement support for the Leap Motion Controller by using their APIs. See this article for details: Using the Leap Motion Controller with Sencha Touch.

Ext JS 5 and Sencha Touch have built-in touch and gesture support. You can use: tap, drag, swipe, pinch and rotate. But you do need to think about the best way to implement them. Double click and hover events might work best on a desktop computer. Swipe and pinch gestures work best on touch devices. Your buttons might need to be bigger and have more white space on touch devices. You’ll need to wear your designer hat and think about the best UI.

Features Sets

All these devices come with different feature sets. Obviously, your camera can take pictures or videos. Your TV has a cable connection or could record live TV. But there is more, on what type of internet connection are you running? Is your device location-aware using GPS? How much data can you store?

You also need to know whether there are APIs available for your device. For example, on phones and tablets, you might want to port your Ext JS 5 or Sencha Touch app with Adobe PhoneGap or Apache Cordova to build a hybrid app. By adding a native wrapper, you can get access to various device APIs. Think about the phone camera, calendar, contacts or push notifications.

There are lots of great Cordova plugins available. You could use a QR code reader plugin, or you could port your application to Google Glass? See this article for more details: Developing for Google Glass with Sencha Touch.

To create a hybrid build, you can use Sencha Cmd, in combination with Adobe PhoneGap or Apache Cordova on top of Node JS. Sencha has built-in integration, so you can use commands like these on your command line:

//for initializing Phonegap:
sencha phonegap init com.sencha.myapp MyApp
//for initializing Cordova:
sencha cordova init com.sencha.myapp MyApp
//..and then, build!
sencha app build native

Data Security

Sencha Space

The last multi-device development challenge I would like to discuss is data security. Where do you save your data and is it secure?

With HTML5 browser capabilities like cookies, local storage, local databases and app cache, the browser may contain sensitive data, such as login information, website or purchase history, or data from your email client or CRM. It’s important to protect this data, so you don’t have to worry if your device is lost or stolen.

You can easily deploy your apps in Sencha Space, which provides a secure delivery platform. When a device is lost or stolen, it’s possible to remotely revoke user/device access or wipe the data. You can monitor, audit and report on app, device and user activity and all apps deployed within Sencha Space can communicate with each other.

Conclusion

Differences in platforms, screen sizes, user input and feature sets can make it hard to build a good looking and performing cross platform app. HTML5 is the language that every modern device understands. With Sencha Touch, Ext JS and Space, you have everything you need to build apps for multiple devices.

Do you already have an Ext JS 4 application that you’d like to optimize for “mobile” use? Sencha is offering Ext JS 5 courses online and in Europe and the US. Take a look at the training schedule and sign up for a class. You can get 10% off upcoming Ext JS 5 training classes — use the code: TrainingTip.

20140702-multi-device-world.jpg No Comments   Read more

Training Tip: Using Custom Fonts with Sencha Architect

Back in the days when websites were restricted to typical fonts such as Arial, Georgia, Times and so on, fonts were delivered from the user’s machine. Fortunately today, because of HTML5 and CSS3, browsers support embedded web fonts.

In this month’s training tip, I will explain how to use custom fonts with Sencha Architect. For this tutorial, I will use one of the Sencha Touch starter apps, with the default theme. However, you can also use these tips for other Sencha Touch or Ext JS apps.

Incorporating a custom font from a font service

If you haven’t done so, drag the Default theme into your project (I used one of the Sencha Touch starter apps). Apply the Default theme, to create a custom theme extension.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Note: One thing you should know about working with custom fonts is that font imports must always be at the very top of your stylesheet. If you don’t change the compile order of the Scss resource, this snippet will be inserted after all the Sencha theme styles are inserted. That would cause your custom fonts to not be visible.

  5. A font service (or online font provider) is a directory of free hosted web fonts. This is nice, because with a font service, you don’t need to host the fonts locally, and therefore you don’t have to deal with font copyrights. There are a couple of popular font services, such as Google Web Font or Typekit.
  6. Let’s use Google Web Font and you can choose a font you like.

    Once, you have found the font you want, click the Add to Collection button.

    Next, click the “Use” tab. Scroll down to paragraph #3, and click the @import tab. Then, copy the code it displays.

  7. Open Architect, in the Code editor paste the font code, for example:
  8. @import
    url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
  9. Select the MyDefaultTheme and click on the Theme tab in the config inspector.
  10. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value (depending on the font you choose):
  11. 'Exo', sans-serif;

Now go back to the Design view, (if you don’t see anything, hit the “Refresh” button) and preview your new font.

Incorporating a custom @font-face (local) font

But what if you want to use your own font? Or, maybe your company has its own font you want to use. Before we get into that, let me explain a little more about local fonts.

@font-face is a CSS technique used to integrate custom web fonts. With system fonts, it picks the font if available in your OS, @font-face downloads the font from the Internet. Unfortunately, the major browsers have not standardized on one web font solution. Therefore, you have to embed multiple webfont extensions into your stylesheet.

You can get these packages of fonts online. For example, http://www.fontsquirrel.com is a website where you can download fonts, 100% free for commercial use.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Now let’s download a nice font-face kit from font-squirel.com to your hard drive, for example:
    http://www.fontsquirrel.com/fonts/exo-2
  5. Click on the Webfont kit tab, make sure the following extensions are included in the package: ttf, eot, woff, svg, and hit the blue Download @Font-face Kit button.

  6. Extract the zip file, and open one of the regular font folders. Check out the .css stylesheet that’s included, and copy the import lines of code.
  7. Go back to Sencha Architect, in the Code editor of the MyDefaultTheme, and paste the import. For example:
  8. @font-face {
            font-family: 'exo_2.0regular';
            src: url('Exo2.0-Regular-webfont.eot');
            src: url('Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                     url('Exo2.0-Regular-webfont.woff') format('woff'),
                     url('Exo2.0-Regular-webfont.ttf') format('truetype'),
                     url('Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
            font-weight: normal;
            font-style: normal;
    }
  9. Now save your Architect project, and copy the 4 font extensions over to your project resources folder in your file system; if you want, you may create a subfolder fonts here.
  10. Since my fonts are located in resources/fonts/, I need to fix the path in my Architect snippet. Sencha Architect expects the fonts to be located in the /theme/ folder. I also renamed the font-family name:
  11. @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
     
    @font-face {
            font-family: 'Exo2';
            src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot');
            src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                     url('../../resources/fonts/Exo2.0-Regular-webfont.woff') format('woff'),
                     url('../../resources/fonts/Exo2.0-Regular-webfont.ttf') format('truetype'),
                     url('../../resources/fonts/Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
            font-weight: normal;
            font-style: normal;
    }
  12. Select the MyDefaultTheme, and click on the Theme tab.
  13. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value: (depending on the font you choose):
  14. 'Exo2';
  15. Compile your project, and test the result in your browser. You will see the new font.

Looking for more help with theming for Sencha Touch? Sign up for a training class. In July, we will offer an advanced Sencha Touch online theming course.

20140519-training-tip-custom-fonts.png 2 Comments   Read more

Training Tip: Simple Techniques for Solving Common Coding Problems

Often when I’m teaching a Sencha Training class, students ask me to look at their apps because there’s a problem they don’t know how to fix. Since I didn’t write the code, it’s hard sometimes for me to give them a quick answer. However, I do have a set of simple techniques that filter out the most obvious problems.

In this tip, I’ll categorize a couple of the most common problems and tackle them with some simple but effective strategies.


Problem: “I don’t see my data”

You are browsing through your app, but the data is not visible.
Often, this problem is easy to fix.

Here, try this:

First, try to inspect the Store. You can do this from the browser console by running:

Ext.getStore('MyStore').load();

This returns the Store object. You can drill through the data config and see if the array length is greater than zero.

Training Tip

If there is data available, something probably went wrong with rendering. Consider these possible issues:

Do the data fields map the fields in the Model?

Is the data array empty? In your browser developer toolbar, hit the Network tab.

Do you get a status code 200? No? Then something went wrong with your request. Check your Model/Store proxy.

The request works correctly, but it still doesn’t display the data?
Verify whether the data you get back is valid. For example, when you are using JSON data, you can copy the data response from the browser network tab into http://jsonlint.com or http://jsonplint.com/. You can also use your own written test data too.


Problem: “I can’t build my app”

Sencha Cmd won’t build your app. Most of the time, Sencha Cmd gives a clear explanation of what’s going on, or what needs to be changed. However, every now and then, I see problems where Sencha Cmd won’t build. and the error description is not clear.

It might be that there is nothing wrong with your code. For example, your code runs perfectly on your local environment. It just won’t build.

Here, try this:

This trick is pretty radical, but most of the time it works.
Generate a new application with the same namespace from the command line:

sencha generate app App ../myapp

Next, copy over the app folder, and make sure you take the changes over from app.js.

Now try it again!


Problem: “Strange component-x behavior”

These types of problems are always the hardest ones.

For example, suddenly multiple scrollbars show up in your grid. Or, you see a tab panel with the wrong styling. Testing these kind of problems within your app can be time consuming. Not only do you have to navigate through your app to get to this problem, there can also be many reasons why it’s broken.

Here, try this:

A common problem-solving technique for developers is to isolate the problem into smaller, more manageable chunks.

Isolate the problem

Let’s generate a new application with Sencha Cmd, again with the same namespace.

Now, copy over the Class that contains the problems and test it.

Do you see the same bugs? You can try to solve it in this test app.

You can isolate it even further by trying to re-build your class from the ground up. Start with only the necessary code.

Did it work? There is nothing wrong with the framework, and there is nothing wrong with this Class. Something else must be wrong.

Switch to the default theme

Go back to your own app and try to switch to one of the Sencha default stylesheets. (Sencha Default StyleSheet in Sencha Touch, Neptune Theme in Ext JS)

Does it finally work? Then there is something wrong in your custom StyleSheet.

Is it still not working? At least now you know that your custom StyleSheet is correct. There might be something wrong with your nesting. Or maybe you used the wrong layout?

Query for Components

Do you have problems with querying for Components? You can easily query components from your browsers dev console:

Ext.ComponentQuery.query('button[action="test"]');

Does it return an empty array? Then there you go! Or maybe it does return the components, but you made a timing mistake. That can often be the case when you’re working with callbacks. When your code is executed, the component may not be rendered on the screen.


Common Debugging Techniques

As a developer, you will often run into bugs and problems that you have to solve.
But hey, that’s what makes our jobs challenging, right?

Aside from the above mentioned techniques, there are also a couple of standard tricks. First of all, know the framework and know your tools. Read the API Docs (or even better, browse through the framework code).

Training Tip

Switch to one of the debugging frameworks. The advantage is that it often shows extra log messages, and you can directly read through the framework code.
For Sencha Touch projects, open app.json and change the framework temporarily:

"js": [
        {
                "path": "../touch/sencha-touch-all-debug.js",
                "x-bootstrap": true
        },

For Ext JS projects, open index.html and change the framework temporarily:

<script src="../ext/ext-all-debug.js"></script>

Your browser dev tools can help (Google Chrome or Firebug). Also, there are some handy plugins for developing Sencha code: Illuminations and App Inspector for Sencha

Do you quickly want to prototype something? Try Sencha Fiddle.

There are great tools for testing available, such as Siesta.

And last but not least, if none of these techniques help you and you are staring at your code for hours (or even days)… take a break! Often, when you take a break and free your mind, you can solve it right away. Especially if you’ve made spelling mistakes or (case sensitive) typos that can cause hours of frustration because you just don’t see them.

Looking for more help? Check out one of the Sencha Ext JS and Sencha Touch training classes located around the world, or join an online class.

20140417-training-tip.png 5 Comments   Read more

Introducing Sencha.com/videos

Sencha Video Chanel

Over the years we’ve been producing videos on building better HTML5 apps, JavaScript tips, and thought-provoking conversations from around the world. Most of these videos have been available on our Vimeo channel, but now we’ve created a channel on our own site to make them easier to find.

Check it out at www.sencha.com/videos.

Here are some of our favorites…

20140213-sencha-video-preview.jpg 1 Comment   Read more

Sencha @ Developer Week With Architect Bootcamp

We will be at the Developer Week conference next week in San Francisco where we will be running a boot camp on Wednesday, February 19th from 9:00am–10:40am. At the boot camp you’ll use Sencha Architect to quickly build a Touch Asset Tracking application. You can still sign up for the bootcamp, so add Sencha to your agenda today.

Here’s a roundup of our recent blog posts about Architect to bring you up to speed:

Architect is a great value as part of Sencha Complete or Touch Bundles, which you can try free for 30 days or buy today.

We are looking forward to seeing you there!

20140214-developer-week.png 1 Comment   Read more

Get Certified as a Sencha Touch or Ext JS Developer!

Sencha Certification ProgramProve your skills, enhance your career prospects, and increase your earning potential by getting certified as a Sencha Developer!

We’ll be rolling out different levels of certification for both Sencha Touch and Ext JS. The first level that we’re releasing is Sencha Specialist Certification. This is a prerequisite for Sencha Professional Certification which we’ll be offering later this year.

To prepare for the Sencha Certification exams, we highly recommend that you attend one of the Fast Track to Sencha Training Courses and have real-world experience developing Sencha applications.

Save $200 on Certification by signing up for a Sencha Training Course now.


Sencha Touch Specialiist

The Sencha Touch Specialist exam is designed around the core competencies required to build a Sencha Touch mobile application. It will test your knowledge in the following areas of the Sencha Touch framework:

  • Class System
  • MVC
  • Basic Components
  • Templates
  • DataView
  • Data Package
  • Theming
  • List
  • NavigationView
  • NestedList
  • Forms
  • Charts
  • Carousels
  • Controllers
  • Routes
  • Profiles

Sencha Touch Specialiist

The Sencha Ext JS Specialist exam is designed around the core competencies required to build a Sencha Ext JS desktop application. It will test your knowledge in the following areas of the Sencha Ext JS framework:

  • Class System
  • MVC
  • Basic Components
  • Templates
  • DataView
  • Data Package
  • Theming
  • Grids
  • Trees
  • Forms
  • Windows
  • Menus
  • Charts
  • Controllers
  • State Management
  • Drag and Drop

The Sencha Certification Program is based on instructional systems development (ISD) principles for predictive- and knowledge-based testing. The predictive-based testing ensures certified developers can build applications at the level of complexity that is being tested (basic, intermediate, or advanced). The knowledge-based testing simply ensures a certified developer can recognize or recall factual information required for developing applications using Sencha frameworks.

You can take the Sencha Certification exams at a testing center near you. Our certification partner, Kryterion, has over 750 testing centers worldwide, or you can take the test from home using the live Online Proctoring option. All exams are administered and proctored using Kryterion world-class online testing technology.

Learn more about the Sencha Certification program and Sencha Fast Track Training courses here.

20130904-sencha-certification.jpg 8 Comments   Read more

Sencha Announces Instructor-led, Live Online Training

We’re pleased to announce that Sencha Training courses are now available as instructor-led remote training. If you’ve had trouble finding a training course in a nearby city, you can now attend our expert-led courses from any location in the world.

Sencha Live Online classes are offered as a series of half-day, hands-on tutorials. Your instructor uses screen sharing to deliver the same course you’d receive if you attended classroom training — all you need is a good internet connection, a computer with two monitors and a headset. Each lecture is recorded, and there are even “office hours” where you can ask your instructor questions or for help labs.

If you’re part of a distributed corporate team, everyone on the team can attend without having to go to a single central location. Choose one of the course links below and contact us to arrange Private Live Online Training for 6 or more developers:

Announcing Essential Ext JS + Architect Live Online Training

To kick off our new Live Online training, Sencha is offering a new course, Essential Sencha Ext JS + Architect. The first class will take place June 24-28, 2013. This 5 session course gives you essential Sencha Ext JS and Sencha Architect knowledge to quickly get you started developing Ext JS applications, using best practices. You’ll learn Sencha’s MVC architecture, how to fetch remote data into a structured data store, how to use the most important user interface components, event handling, and more.

As a special introductory offer, this course is being discounted 20%. The regular price is $1,900, but we’re offering a special introductory price of $1,520 for a limited time.

Sign up now!

Find out more about all of our Sencha Training courses.

training-globe.png No Comments   Read more