Architect Pattern Library

Constructing a complex form layout with Ext JS 4 In previous releases of Ext JS complicated form layouts were quite difficult to achieve. This was due to the nature of the FormLayout, which was required to display labels and error messages correctly, and how it had to be combined with other nested layouts. This article is an adapted excerpt of the  Ext JS 4 Web Application Development Cookbook . Ext JS 4 takes a different approach and utilizes the Ext.form.Labelable mixin, which allows form fields to be decorated with labels and error messages without requiring a specific layout to be applied to the container. This means we can combine all of the layout types the framework has to offer (which are discussed in detail in Chapter 3, Laying Out your Components) without having to overnest components in order to satisfy the form field’s layout requirements. We will describe how to create a complex form using multiple, nested layouts and demonstrate how easy it is to get ...

It is possible to integrate Ext Js 4′s charts with an Ext JS 3 application. There is a demo of this on the main demos page ( http://dev.sencha.com/deploy/ext-4.0.1/examples/sandbox/sandbox.html ) which should show you how to integrate it. We are very pleased to introduce several new resources that will assist in migrating existing Ext JS 3 applications to Ext JS 4, and will hopefully minimize the difficulty and effort involved. These are bundled in our new Ext JS 3 to 4 Migration Pack, the components of which are outlined below. Ext JS 3 Compatibility Layer Ext JS 3 to 4 Migration Guide Ext JS Migration Demo App Ext JS Migration Screencasts Download the Ext JS 3 to 4 Migration Pack (Updated October 20, 2011) I tried to look at the sample sandbox code; but it’s difficult to understand for the beginner. I will really appreciate if someone can provide me small working example like this: var ext3Panel = new Ext.Panel({ title:’Ext3′ }); ext3Panel.on(‘afterrender’, func...

10 Reasons Why Ext JS 4′s Charts Are Awesome The new Charting package that is shipping with the latest Ext JS 4 Preview is fantastic and really does dwarf the previous releases offering (which was also very good). I’m going to outline a few of the key features that make it so good. 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 ...

20 Things To Avoid/Do When Getting Started With Ext JS & Sencha Touch When learning a new topic people often make the same mistakes and follow the same bad practices as each other. It usually follows by them realising that what they’ve been doing for a few days/weeks/months is a bad way of doing it and wondering how they didn’t realise earlier. 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! Although we are only explicitly talking about Ext JS, most, if not all, of these tips can be applied to Sencha ...

Ext JS has been getting more flexible with each release. You can do many more things with it these days than you used to be able to, but there has been a performance cost associated with that. In many cases this performance degradation is down to the way the framework is being used, as opposed to a fundamental problem with the framework itself. There’s a whole bunch of things that you can do to dramatically speed up the performance of an app you’re not happy with, and Nige “Animal” White took us through them this morning. Here’s what I was able to write down in time: Slow things Nige identified three of the top causes of sluggish apps, which we’ll go through one by one: Network latency JS execution Layout activity Network latency: Bad ux – got to stare at blank screen for a while Use Sencha Command to build the app – single file, minimized 4810ms vs 352ms = dynamic loading vs built JavaScript execution: Avoid slow JS engines (he says with a wry smile) Optimize ...