Ext JS 4 First Look potx

[...]... Validation 2 34 Form label 238 Actions 238 Summary 240 Chapter 6: Ext JS 4 Themes 241 Getting started with Ext JS 4 themes 241 Installing Ruby 242 Windows and Mac OS 242 Linux 242 Ubuntu and Debian Red Hat Enterprise and Fedora 243 243 Installing Sass and Compass Setting up an Ext project Creating a new theme Variables 243 246 248 252 Bugs in earlier versions of Ext JS 4. 1 2 54 Creating new Ext JS Component... Ext JS platform is now organized • The new Ext JS 4 class system • Ext JS 4 SDK • Ext JS 3 versus Ext JS 4 compatibility • Migrating from Ext JS 3 to Ext JS 4 • A quick overview of new components Getting started with Ext JS 4 Ext JS is a cross-browser RIA (Rich Internet Application) framework, easy to use with rich UI components, used by one million developers around the world The change from Ext JS. .. to a folder, preferably named extjs This is how the Ext JS 4 SDK should look: First, let's take a look at the JavaScript files located in the root folder (extjs): • ext- all .js: This file contains the entire Ext JS framework, everything we need • ext. js: This file contains the minimum Ext JS code (Ext JS base library) [ 11 ] What's New in Ext JS 4? If we take a closer look at the previous screenshot,... http://localhost/extjs/ index.html In the next topic, we will start showing some code snippets of the new Ext JS 4 features As we deployed Ext JS 4 locally, we will also create the example code in a web server To do so, we will create a folder named ext4 firstlook to host the code presented in this book And, as we are on Chapter 1, we will place the code in ext4 firstlook/chapter01 The new Ext JS 4 class system Ext JS. .. to you In Ext JS 4, we define a new class as follows: Ext. define('MyApp.NewClass', { //class functionalities here }); The Ext. extend is deprecated; it is recommended to use Ext. define instead Extending a class Let's compare the code between Ext JS 3 and Ext JS 4 to create the following customized window (extending Ext. Window): [ 15 ] What's New in Ext JS 4? This is how we do it in Ext JS 3: Ext. namespace('MyApp');... please go to http://www.sencha.com/products/jsbuilder [ 12 ] Chapter 1 Inside the builds folder, we will find the following files: • ext- all-sandbox .js: Ext JS 4 is sandboxed and this is the file that replaces extall .js and ext- base .js in sandbox mode • ext- core .js: This is Ext JS core library • ext- foundation .js: This is the foundation library for Ext JS 4 • These files also have the debug and dev... applied to Ext JS 4 applications This chapter covers how to structure an application using the MVC pattern and how to create and organize the components and files in an Ext project structure This chapter demonstrates a step-by-step approach on how to create an MVC Ext JS 4 application Appendix A, Ext JS 4 Versus Ext JS 3 Class Names, presents a comparison list between Ext JS 3 classes and Ext JS 4 class... adapter folder is no longer in the Ext JS 4 SDK What is the difference between ext. js and ext- all .js? When we start the development of a new Ext JS project, the first thing we have to do is to add the imports of Ext JS files on the HTML page If we choose a version of the ext- all file, the browser will load the entire Ext JS framework If we choose a version of the ext. js file, the browser will load the... convention names in your code For example, in Ext JS 3, we have the Ext. PagingToolbar component In Ext JS 4, we can create a new instance declaring Ext create (Ext. PagingToolbar), using PagingToolbar (Ext JS 3 name) But, it is highly recommended not to use the alternative class name (Ext JS 3 name), since we have a new name for this class in Ext JS 4 (Ext. create (Ext. toolbar.PagingToolbar)) [8] Download from... class names In this new version of Ext JS, the names of some classes have changed, and this list can help you find the new Ext JS 4 class names easily, while migrating an application from Ext JS 3 to Ext JS 4 Beta What you need for this book The source code listed in this book uses the Ext JS 4 SDK, available from the Ext JS website http://www.sencha.com/products/extjs/download You need to download and . Ext JS 4 class system • Ext JS 4 SDK • Ext JS 3 versus Ext JS 4 compatibility • Migrating from Ext JS 3 to Ext JS 4 • A quick overview of new components Getting started with Ext JS 4 Ext JS. an MVC Ext JS 4 application. Appendix A, Ext JS 4 Versus Ext JS 3 Class Names, presents a comparison list between Ext JS 3 classes and Ext JS 4 class names. In this new version of Ext JS, the. New in Ext JS 4? 7 Getting started with Ext JS 4 7 Package and namespace updates 8 Upgraded documentation 9 Ext JS 4 SDK quick look 11 What is the difference between ext. js and ext- all .js? 13 Deploying