Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
Learning Ext JS_Fourth Edition
Learning Ext JS_Fourth Edition

Learning Ext JS_Fourth Edition: Create powerful web applications with the new and improved Ext JS 5 library

$43.99 $9.99
Book Jul 2015 452 pages 1st Edition
eBook
$43.99 $9.99
Print
$54.99
Subscription
$15.99 Monthly
eBook
$43.99 $9.99
Print
$54.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Learning Ext JS_Fourth Edition

Chapter 1. An Introduction to Ext JS 5

When learning a new technology such as Ext JS, some developers face a hard time to begin with, so this book will give you the best possible way to start to understand this technology more than any other source. We have to go from the library documentation to blogs and forums looking for answers, trying to figure out how the library and all the components work together. Even though there are tutorials in the official learning center, it would be great to have a guide to learn the library from the basics to a more advanced level; this is the main goal of this book.

Ext JS is a state of the art framework to create Rich Internet Applications (RIAs). The framework allows us to create cross-browser applications with a powerful set of components and widgets. The idea behind the framework is to create user-friendly applications in rapid development cycles, facilitate teamwork (MVC or MVVM), and also have a long-term maintainability.

Ext JS is not just a library of widgets anymore; the brand new version is a framework full of new exciting features for us to play with. Some of these features are the new class system, the loader, the new application package, which defines a standard way to code our applications, and much more awesome stuff.

The company behind the Ext JS library is Sencha Inc. They work on great products that are based on web standards. Some of the most famous products that Sencha also have are Sencha Touch and Sencha Architect.

In this chapter, we will cover the basic concepts of the framework of version 5. You'll learn how to set up the library or SDK and create our first program, get to know the available tools to write our code, and take a look at some of the new features in Ext JS 5.

  • Considering Ext JS for your next project

  • Getting started with Ext JS—our first program

  • Tools and editors

  • What's new in Ext JS 5?

Considering Ext JS for your next project


Ext JS is a great library to create RIAs that require a lot of interactivity with the user. If you need complex components to manage your information, then Ext is your best option because it contains a lot of widgets such as the grid, forms, trees, panels, and a great data package and class system.

Ext JS is best suited for enterprise or intranet applications; it's a great tool to develop an entire CRM or ERP software solution. One of the more appealing examples is the Desktop sample (http://dev.sencha.com/ext/5.1.0/examples/desktop/index.html). It really looks and feels like a native application running in the browser. In some cases, this is an advantage because the users already know how to interact with the components and we can improve the user experience.

Ext JS 5 came out with a great tool to create themes and templates in a very simple way. The framework for creating themes is built on top of Compass and Sass, so we can modify some variables and properties and in a few minutes we can have a custom template for our Ext JS applications. If we want something more complex or unique, we can modify the original template to suit our needs. This might be more time-consuming depending on our experience with Compass and Sass.

Compass and Sass are extensions for CSS. We can use expressions, conditions, variables, mixins, and many more awesome things to generate well-formatted CSS. You can learn more about Compass on their website at http://compass-style.org/.

The new class system allows us to define classes incredibly easily. We can develop our application using the object-oriented programming paradigm and take advantage of the single and multiple inheritances. This is a great advantage because we can implement any of the available patterns such as MVC, MVVM, Observable, or any other. This will allow us to have a good code structure, which leads us to have easy access for maintenance.

Another thing to keep in mind is the growing community around the library; there are lots of people around the world that are working with Ext JS right now. You can even join the meeting groups that have local reunions frequently to share knowledge and experiences; I recommend you to look for a group in your city or create one.

The new loader system is a great way to load our modules or classes on demand. We can load only the modules and applications that the user needs just in time. This functionality allows us to bootstrap our application faster by loading only the minimal code for our application to work.

One more thing to keep in mind is the ability to prepare our code for deployment. We can compress and obfuscate our code for a production environment using the Sencha Cmd, a tool that we can run on our terminal to automatically analyze all the dependencies of our code and create packages.

Documentation is very important and Ext JS has great documentation, which is very descriptive with a lot of examples, videos, and sample code so that we can see it in action right on the documentation pages, and we can also read the comments from the community.

Getting started with Ext JS


So, let's begin with Ext JS! The first thing we should do is download the framework from the official website, http://www.sencha.com/products/extjs/. The version available at the time of writing this book is 5.1.1.

There are three types of license:

  • The open source license: If you are creating or want to develop an open source application compatible under the GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html).

  • The commercial license: You need to buy this if you are planning/wanting to develop a closed source project and want to keep the source code as your own property. Usually used by corporations, banks, or enterprises.

  • The commercial OEM: If you want to use Ext JS to create your own commercial SDK or web application builder, or use it as frontend for some embedded device, then this comes into the picture. As this type of license can vary, it's customized for each customer.

You can see more detailed information about this subject at http://www.sencha.com/products/extjs/licensing.

Downloading Ext JS

If you download Ext JS directly from http://www.sencha.com/products/download/, this will be a 30-day trial version of Ext JS and you will also be required to enter some personal information in order to get the trial. To obtain the GPL version, you can get it from http://www.sencha.com/legal/GPL/. We can also use the available Content Delivery Network (CDN), as shown in the following table, so that we don't need to store the library on our own computer or server:

Setting up and installing Ext JS 5

After you download the Ext JS Library (ZIP file), extract the contents to a working folder. For the first time, you will probably get overwhelmed by the size of the ZIP file and by the number of files and folders, but don't worry, the purpose of each file and the content of each folder will be explained shortly.

Sencha Cmd

Besides the Ext JS library, we need to download the Sencha Cmd (command tool). This tool is intended to be a cornerstone for building applications, creating workspaces, and new themes, and the ability to minify and deploy our applications to a production environment.

Download this tool at http://www.sencha.com/products/sencha-cmd/ and also check that the following requirements are met in order for Sencha Cmd to work properly:

  • JRE Sencha Cmd requires Java Runtime Environment version 1.7 to support all functionality, however, most features will work with 1.6 (the minimum supported version).

  • Ruby differs by OS:

    • Windows: Download Ruby from http://rubyinstaller.org. Get the .exe file version of the software and install it.

    • Mac OS: Ruby is preinstalled. You can test whether Ruby is installed with the Ruby -v command.

    • Linux-based OS: Use sudo apt-get install ruby 2.0.0 to download Ruby.

Run the Sencha Cmd setup, follow the instructions, and after installing Sencha Cmd, we need to verify the installation. Proceed to open the command line and type the following command:

sencha

Tip

On Windows environments, it's recommended that you restart the system after installation in order to get the proper environment variables applied.

After typing the command Sencha, we should see the following output:

Why so many files and folders?

This is a natural question when you look at the downloaded files and folders for the first time, but every file and folder is there for a purpose and now you're going to learn it:

  • The build folder contains compiled files of the SDK and is ready to be used. This folder is very useful to start with in Ext JS without the need to use Sencha Cmd. From version 5, this folder also contains examples and ready-to-use Ext JS themes located in packages (folder).

  • The examples folder contains the source code of the examples. These examples are built to show what we can do with the library. However one significant change in version 5 is that this folder needs to be compiled using Sencha Cmd in order to be deployed/compiled into the build folder.

  • The overrides folder contains JavaScript files used to add extra functionality and behavior to components and widgets and they are also used when an application or code is compiled.

  • The packages folder is where the styles and images are located; we can also find the Sass files to create our custom theme in here. Sass is an extension of CSS3 to improve the language; we can use variables, mixins, conditionals, expressions, and more with Sass. From version 5 onward, this folder also contains more folders, which are Locales, Ext JS Core, Charts, Aria, and many more.

  • The src folder contains the source code files that are part of the framework. Each file represents a class/object so we can read it easily, and every folder corresponds to the namespace assigned to the class. For example, the Ext.grid.Panel class is in a file called Panel.js, which in a folder called grid (src/grid/Panel.js).

  • The welcome folder contains the styles and images that are shown when we open the index.html file in the root folder.

    If you look at the root folder, you can also see other JavaScript files. Basically, they are the compressed, debug, and development versions of the library.

  • The bootsprap-*.js files contain information about the framework; these files are used by ext*.js files in order to load the required files (the src folder or packages folder).

  • The ext-all.js file loads the complete library with all the components, utilities, and classes.

  • The ext-all-debug.js file is the same as the ext-all.js file. The difference is that this file will show console logs and we can use this file to debug our application.

  • The ext.js file is the core and foundation layer for Ext JS. If we use this file, we're not loading the whole library; this file contains only the class system, the loader, and a few other classes. We can use the Ext.Loader class to load just the required classes and not the entire framework.

Folders that changed in version 5 from previous versions

Developers that use previous versions of Ext JS may find the new folder structure confusing, and may notice that some of folders disappeared in version 5. The significant changes to folders are listed below. The builds folder no longer exists; instead, we should use the build folder.

  • The locale folder has been moved to the packages/ext-locale folder. In version 5, Locales have a more complex folder structure and we also now have the ext-locale-language.js file and ext-locale-language-debug.js file. By default, the components are displayed in English, but you can translate them to any other language.

  • The jsbuilder folder was removed, now in version 5 we will use Sencha Cmd to build and compress our source code.

  • The ext*-dev.js file was removed in version 5, as according to Sencha, there was much confusion about the use of these files. On Sencha Touch these files were merged and following the same pattern as Sencha Touch on Ext JS. *-dev.js files and ext*-debug.js files were merged into one.

  • The resources folder was removed, so now we need to use the packages folder.

  • The docs folder was removed, so as of version 5, developers should check the documentation and guides at http://docs.sencha.com/. Also, there is an alternative to download the offline documentation selection (offline docs) from the link in the documentation menu:

Now that you have a basic understanding of the downloaded files and folders, we can advance to the next step of "getting started."

Looking at the whole picture

Before we start writing code, you need to learn and understand a few concepts first. Ext JS is divided into three layers, as shown in the following screenshot. The purpose of these layers is to share code with Sencha Touch, a framework to create mobile web applications.

In the Ext Foundation layer, the Ext object is created, as well as some useful utilities and the class system that allows us to extend classes, override methods and properties, add mixins and configurations to classes, and many more things.

Note

To understand more about mixins, see http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Mixin.

The Ext Core layer contains the classes that manage the Document Object Model (DOM), the setting and firing of events, support for Ajax requests, and classes to search the DOM using CSS selectors. Also now, part of Ext.Core is the data package (classes related to data such as fields, store, and so on). As of version 5.1, Ext JS Core will have common shared code with Sencha Touch (the next major release).

Finally, the Ext JS 5 layer contains all the components, widgets, and many more features that you're going to be learning about in this book.

Our first program


We need to set up our workspace to write all the examples of this book. Let's create a folder named learning-ext-5. For now, we don't need a web server to host our examples, but in the following chapters we are going to use Ajax; therefore, it's a good idea to use your favorite web server to host our code from these first examples.

In our new folder, we are going to create folders that contain the examples for each chapter in this book. At this point, we have a folder called chapter_01 that corresponds to this chapter and other called extjs-5.1.1 that contains the Ext JS framework. Both folders are located on the same level.

Inside the chapter_01 folder, we're going to create a file called myfirstapp.html, where we need to import the Ext library and create a JavaScript file called app.js that will contain our JavaScript code:

Open the myfirstapp.html file in your favorite editor and type the following code:

<!doctype html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>My first application</title>
    <!-- Importing the stylesheet (theme neptune) --> 
    <link rel="stylesheet" type="text/css" href="../ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <!-- Importing the Extjs library --> 
    <script src="../ext-5.1.1/build/ext-all.js"></script>
    <!-- Importing overrides Js code special for theme neptune -->
    <script src="../ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <!-- Importing our application -->
    <script type ="text/javascript" src="app.js"></script>
</head>
<body> </body>
</html>

Tip

Downloading the example code

You can download the example code files for all Packt Publishing books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Writing the Ext JS code

The previous code shows how to import the library for a development environment. First, we import the stylesheet that is located at ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css. The second step is to import the whole library from ext-5.1.1/build/ext-all.js. The third step is to import a JavaScript file that contains overrides so the theme can work properly (specific adjustments on this theme).

Now we're ready to write our code in the app.js file.

Before we can start creating widgets, we need to wait until the DOM is ready to be used and Ext JS is loaded and parsed. Ext JS provides a function called Ext.onReady, which executes a callback automatically when all the nodes in the tree can be accessed. Let's write the following code in our app.js file:

Ext.onReady(function(){
  alert("This is my first Extjs app !");
});

An alternative to this code can also be:

Ext.application({
    name : 'MyFirstApplication',
    launch : function() {
        Ext.Msg.alert("Hello"," my first Ext JS app");
    }
});

One of the advantages of using Ext JS is that the library only uses one single object in the global scope called Ext to allocate all the classes and objects within the framework.

If you open the HTML file in your favorite browser, you will see something like the following screenshot:

Tip

Feel free to use your favorite browser to work through the examples in this book. I recommend you use Google Chrome because it has more advanced developer tools and it's a fast browser. If you are a Firefox fan, you can download the Firebug plugin; it's a powerful tool that we can use for debugging in Firefox.

If for some reason we can't see the alert message in our browser, it's because we haven't defined the correct path to the ext-all.js file. If you look at the JavaScript console, we'll probably see the following error:

Uncaught ReferenceError: Ext is not defined

This means that the ext-all.js file is not imported correctly. We need to make sure everything is correct with the path and refresh the browser again.

Adding interaction to the program

Now that we know how to execute code when the DOM is ready, let's send an alert message from the Ext library. Using the Ext.MessageBox alias Ext.Msg object, we can create different types of messages such as an alert, confirmation, prompt, progress bar, or even a custom message:

Ext.onReady(function(){
  //alert("This is my first Extjs app !");
  Ext.Msg.alert("Alert","This is my first Ext js app !");
});

The output for the preceding lines of code is shown in the following screenshot:

Tip

If you're not getting any errors in the JavaScript console but still you can't see the message on the screen, as seen in the preceding screenshot, make sure you have inserted the stylesheet correctly.

In this case, we're using the alert method of the Ext.Msg object. The first parameter is the title of the message and the second parameter is the content of the message. That was easy, right? Now let's create a confirmation dialog box:

Ext.onReady(function(){
  Ext.Msg.alert("Alert","This is my first Ext JS app !");
  Ext.Msg.confirm("Confirm","Do you like Ext JS 5?");
});

We use the confirm method to request two possible answers from the user. The first parameter is the title of the dialog box and the second parameter is the question or message we want to show to the user:

Before the confirmation dialog box appeared, there was an alert that didn't show up. One important thing to keep in mind is that the messages and alerts from the Ext library don't block the JavaScript loop, unlike the native browser dialog box. This means that if we add another alert or custom message after the confirm method is called, we will not see the confirmation dialog box anymore.

So far, we have shown a confirmation dialog box requesting two possible answers from the user, but how can we know the user's response in order to do something according to the answer? There's a third parameter in the confirmation dialog box, which is a callback function that will be executed when the user clicks on one of the two answers:

Ext.onReady(function(){
  Ext.Msg.alert("Alert","This is my first Ext JS app !");
  Ext.Msg.confirm("Confirm","Do you like Ext JS 5?",
    function(btn){
      if (btn === "yes") {
        Ext.Msg.alert("Great!","This is great!");
      } else {
         Ext.Msg.alert("Really?","That's too bad.");
      }
  });
});

The callback function is executed after the user clicks on the Yes or No button or closes the confirmation dialog box. The function receives the value of the clicked button as a parameter, which is Yes or No; we can do whatever we want inside the callback function. In this case, we're sending a message depending on the given answer. Let's refresh our browser and test our small program to watch our changes. Confirmations are usually asked when a user wants to delete something, or maybe when they want to trigger a long process, basically anything that has only two options.

Tools and editors


Before we go any further, it's important we use some tools in order to be more productive when building our code and our applications. There are many editors in the market we can use to write code. Let's review some of them that will be useful in this book.

XAMPP or WAMP

XAMPP is an open source distribution of Apache that contains MySQL, PHP, and Perl, and is easy to install and easy to use. XAMPP can provide us with a local web development environment that is easy to handle without the need to test on a public server or hosting.

XAMPP is available for Windows (32-bit), Linux, and OS X versions and you can download XAMPP at https://www.apachefriends.org/index.html.

WAMP is another free package containing Apache, MySQL, and PHP, especially designed for the Windows OS. You can get it at http://www.wampserver.com/en/. WAMP comes in 32-bit and 64-bit versions according to your Windows OS.

In order to test the code or review some Ext JS examples, we will need a web server (Apache) or IIS to get the proper functionality and AJAX responses that the examples and code require.

Aptana

The Aptana editor is an IDE from Appcelerator. It's based on Eclipse but optimized for web applications. It's an open source project and free of charge.

Among other IDEs, Aptana contains an autocomplete functionality for JavaScript and Ext JS, a JavaScript validator, a CSS and HTML validator, a JavaScript debugger, Bundles, and more:

Aptana is a great tool when working with Python, Ruby, or PHP as the backend of our projects. It contains tools to work with those out-of-the-box languages and also contains tools to deploy your application in the cloud using Heroku or Engine Yard.

Sencha Architect

The Sencha Architect desktop application is a tool that will help you design and develop an application faster than coding it by hand. The idea is to drag and drop the components into a canvas, and then add the functionality. The Sencha Architect desktop application is a product from Sencha Inc. that aims to help developers define components with a few clicks. We can create an Ext JS or Sencha Touch project. We can get a free trial from the official website of Sencha. We can also buy the license there.

Note

The current Sencha Architect version is 3.1.0. This works for Ext JS versions 4.x and 5.x. Previous versions of Sencha architect, such as 2.x will not work for Ext JS 5.

One of the advantages that Architect has is that you can drag-and-drop components into the work zone and this tool will create (generate) the basic code of the components and/or the part(s) you are working with.

Also, you can switch to the code view and see the results so far (some parts of the Ext JS classes/components can be edited but not all of them). You can see the code view in the following screenshot:

The intention of this book is not to teach you about Sencha Architect, it's for you to understand and learn Ext JS and create applications without the need to use Sencha Architect. Later, if you feel you need to use Sencha Architect or want to give a try, it may be easier once you know the basics and essentials that are covered in this book.

What's new in Ext JS 5?


Ext JS 5 introduces a great number of new features, and most of them will be covered in the upcoming chapters when we have a closer look, but for the moment we will briefly mention some of the significant additions in version 5:

  • Tablet support and new themes: This has introduced the ability to create apps compatible with touch-screen devices (touch-screen laptops, PCs, and tablets). The Crisp theme is introduced and is based on the Neptune theme. Also, there are new themes for tablet support, which are Neptune touch and Crisp touch.

  • New application architecture – MVVM: Adding a new alternative to MVC Sencha called MVVM (which stands for Model-View-ViewModel), this new architecture has data binding and two-way data binding, allowing us to decrease much of the extra code that some of us were doing in past versions. This new architecture introduces:

    • Data binding

    • View controllers

    • View models

  • Routing: Routing provides deep linking of application functionality and allows us to perform certain actions or methods in our application by translating the URL. This gives us the ability to control the application state, which means that we can go to a specific part or a direct link to our application. Also, it can handle multiple actions in the URL.

  • Responsive configurations: Now we have the ability to set the responsiveConfig property (new property) to some components, which will be a configuration object that represents conditions and criteria on which the configurations set will be applied, if the rule meets these configurations. As an example:

    responsiveConfig: {
        'width > 800': { region: 'west' },
        'width <= 800':{ region: 'north' }
    }
  • Data package improvements: Some good changes came in version 5 relating to data handling and data manipulation. These changes allowed developers an easier journey in their projects, and some of the new things are:

    • Common Data (the Ext JS Data class, Ext.Data, is now part of the core package)

    • Many-to-many associations

    • Chained stores

    • Custom field types

  • Event system: The event logic was changed, and is now a single listener attached at the very top of the DOM hierarchy. So this means when a DOM element fires an event, it bubbles to the top of the hierarchy before it's handled. So Ext JS intercepts this and checks the relevant listeners you added to the component or store. This reduces the number of interactions on the DOM and also gives us the ability to enable gestures.

  • Sencha Charts: Charts can work on both Ext JS and Sencha Touch, and have enhanced performance on tablet devices. Legacy Ext JS 4 charts were converted into a separate package to minimize the conversion/upgrade. In version 5, charts have new features such as:

    • Candlestick and OHLC series

    • Pan, zoom, and crosshair interactions

    • Floating axes

    • Multiple axes

    • SVG and HTML Canvas support

    • Better performance

    • Greater customization

    • Chart themes

  • Tab Panels: Tab panels have more options to control configurations such as icon alignment and text rotation. Thanks to new flexible Sass mixins, we can easily control presentation options.

  • Grids: This component, which has been present since version 2.x, is one of the most popular components, and we may call it one of the cornerstones of this framework. In version 5, it got some awesome new features:

    • Components in Cells

    • Buffered updates

    • Cell updaters

    • Grid filters (The popular "UX" (user extension) has been rewritten and integrated into the framework. Also filters can be saved in the component state.)

    • Rendering optimizations

  • Widgets: This is a lightweight component, which is a middle ground between Ext.Component and the Cell renderer.

  • Breadcrumb bars: This new component displays the data of a store (a specific data store for the tree component) in a toolbar form. This new control can be a space saver on small screens or tablets.

  • Form package improvements: Ext JS 5 introduces some new controls and significant changes on others:

    • Tagfield: This is a new control to select multiple values.

    • Segmented buttons: These are buttons with presentation such as multiple selections on mobile interfaces.

    • Goodbye to TriggerField: In version 5, TriggerField is deprecated and now the way to create triggers is by using the Text field and implementing the triggers on the TextField configuration. (TriggerField in version 4 is a text field with a configured button(s) on the right side.)

    • Field and Form layouts: Layouts were refactored using HTML and CSS, so there is improvement as the performance is now better.

  • New SASS Mixins (http://sass-lang.com/): Several components that were not able to be custom-themed now have the ability to be styled in multiple ways in a single theme or application. These components are:

    • Ext.menu.Menu

    • Ext.form.Labelable

    • Ext.form.FieldSet

    • Ext.form.CheckboxGroup

    • Ext.form.field.Text

    • Ext.form.field.Spinner

    • Ext.form.field.Display

    • Ext.form.field.Checkbox

  • The Sencha Core package: The core package contains code shared between Ext JS and Sencha Touch and in the future, this core will be part of the next major release of Sencha Touch. The Core includes:

    • Class system

    • Data

    • Events

    • Element

    • Utilities

    • Feature/environment detection

Summary


In this chapter, you learned how to set up and install Ext JS 5 and Sencha Cmd too. You also learned about the content of the folders included in the Ext JS 5 SDK, and the differences between folders in version 4 and version 5. We mentioned some useful tools that will be essential for this book; however, many developers may not like them or may not feel comfortable with these tools, so feel free to use your favorite tools and editors.

Through the course of this book, you are going to learn about the use of Ext JS 5, and we will cover the most important parts, features, and components, and many more classes and tools. At the end of this book, we will complete a small real-world application so you can get an idea of how to implement Ex JS for your next and future projects.

In the next chapter, we will focus on the Ext JS 5 core concepts and DOM manipulation.

Left arrow icon Right arrow icon

Key benefits

What you will learn

Create applications with powerful web components designed for an easy end user experience Discover how Ext JS works and how to make good use of this tool Understand the basics of web applications using Ext JS Use the new features of version 5 in your applications Build agile and responsive web applications using Ext JS Understand the MVVM application model to connect the model layer to the view Easily customize sizing, spacing, colors, fonts, and so on in the new touchfriendly themes

Product Details

Country selected

Publication date : Jul 31, 2015
Length 452 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781784394387
Vendor :
jQuery
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jul 31, 2015
Length 452 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781784394387
Vendor :
jQuery
Category :

Table of Contents

22 Chapters
Learning Ext JS Fourth Edition Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Authors Chevron down icon Chevron up icon
About the Reviewers Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. An Introduction to Ext JS 5 Chevron down icon Chevron up icon
2. The Core Concepts Chevron down icon Chevron up icon
3. Components and Layouts Chevron down icon Chevron up icon
4. It's All about the Data Chevron down icon Chevron up icon
5. Buttons and Toolbars Chevron down icon Chevron up icon
6. Doing It with Forms Chevron down icon Chevron up icon
7. Give Me the Grid Chevron down icon Chevron up icon
8. DataViews and Templates Chevron down icon Chevron up icon
9. The Tree Panel Chevron down icon Chevron up icon
10. Architecture Chevron down icon Chevron up icon
11. The Look and Feel Chevron down icon Chevron up icon
12. Responsive Configurations and Tablet Support Chevron down icon Chevron up icon
13. From Drawing to Charting Chevron down icon Chevron up icon
14. Finishing the Application Chevron down icon Chevron up icon
15. What's Next? Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.