Learning Ext JS 4


Learning Ext JS 4
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
$25.49
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
$49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Learn the basics and create your first classes
  • Handle data and understand the way it works, create powerful widgets and new components
  • Dig into the new architecture defined by Sencha and work on real world projects

 

Book Details

Language : English
Paperback : 434 pages [ 235mm x 191mm ]
Release Date : January 2013
ISBN : 1849516847
ISBN 13 : 9781849516846
Author(s) : Crysfel Villa, Armando Gonzalez
Topics and Technologies : All Books, Web Development, Open Source, Web Development

Table of Contents

Preface
Chapter 1: The Basics
Chapter 2: The Core Concepts
Chapter 3: Components and Layouts
Chapter 4: It's All About the Data
Chapter 5: Buttons and Toolbars
Chapter 6: Doing it with Forms
Chapter 7: Give me the Grid
Chapter 8: Architecture
Chapter 9: DataViews and Templates
Chapter 10: The Tree Panel
Chapter 11: Drag and Drop
Chapter 12: Look and Feel
Chapter 13: From Drawing to Charting
Index
  • Chapter 1: The Basics
    • Should I use Ext JS for my next project?
    • Getting started with Ext JS
      • Looking at the whole picture
      • Why so many files and folders?
    • Our first program
    • Editors
      • Sublime Text 2
      • Eclipse Web Tools Platform project
      • Aptana
      • Textmate
      • Sencha Architect
    • Building an application
      • Planning our application
      • Wireframing
      • Data structure
      • File structure
    • Summary
    • Chapter 2: The Core Concepts
      • The class system
        • Simple inheritance
        • Pre-processors and post-processors
        • Mixing many classes
        • Configurations
        • Statics methods and properties
        • Singleton
        • Alias
      • Loading classes on demand
        • Enabling the loader
        • Dependencies
        • Synchronous Loading
      • Working with the DOM
        • Getting elements
        • Query – How to find them?
      • Manipulation – How to change it?
      • Summary
      • Chapter 3: Components and Layouts
        • The components lifecycle
          • The creation phase
          • The rendering phase
          • The destruction phase
            • The lifecycle in action
        • About containers
          • The panel
          • The Window component
        • The layout system
          • Fit layout
          • Card layout
          • HBox layout
          • VBox layout
          • Border layout
          • Accordion layout
        • Summary
        • Chapter 4: It's All About the Data
          • Ajax
          • Models
            • Validations
            • Relationships
          • Dealing with the store
            • Adding new elements
            • Looping through the elements
            • Retrieving the records
            • Removing records
          • Retrieving remote data
            • Ajax proxy
            • JSON reader
            • XML reader
            • Mappings
          • Sending data
          • Summary
            • Chapter 6: Doing it with Forms
              • The form component
                • Anatomy of the fields
              • Available fields
                • The Textfield class
                • The number field
                • The combobox field
                • The date field
                • The checkbox
                • The radio button
              • The field container
              • Submitting the data
              • Summary
              • Chapter 7: Give me the Grid
                • The data connection (models and stores)
                  • Defining a model for the store of the grid
                  • Defining a store for the grid
                • A basic grid panel
                • Columns
                • Columns renderers
                • Selection models
                • Grid listeners
                • Features
                  • Ext.grid.feature.Grouping
                  • Ext.grid.feature.GroupingSummary
                  • Ext.grid.feature.RowBody
                  • Ext.grid.feature.Summary
                • Plugins
                  • Ext.grid.plugin.Editing
                  • Ext.grid.plugin.CellEditing
                  • Ext.grid.plugin.RowEditing
                • Grid paging
                • Infinite scrolling
                • Summary
                • Chapter 8: Architecture
                  • The MVC pattern
                  • Creating our first application
                    • The views
                    • The controller
                      • Listening events
                      • Opening modules
                  • Creating a module
                    • Adding functionality
                    • References
                  • Summary
                  • Chapter 9: DataViews and Templates
                    • The data connection (models and stores)
                      • Defining our User Model
                      • Defining the store
                    • A basic dataview
                      • Getting all our code together
                    • Handling events on the dataview
                      • Adding the listeners to the dataview
                    • Templates
                    • A more complex dataview
                    • Summary
                    • Chapter 10: The Tree Panel
                      • A basic tree panel
                      • The TreeStore
                      • Tree nodes
                      • Tree drag-and-drop
                      • Adding and removing nodes
                      • The check tree
                      • The grid tree
                      • Adding an invoices' categories tree panel
                      • Summary
                      • Chapter 11: Drag and Drop
                        • Make an item draggable
                        • Hitting the drop zone
                        • Drag and drop between Ext JS components
                        • Enhancing our application with drag and drop
                        • Summary
                        • Chapter 12: Look and Feel
                          • Setting up our environment
                          • The resources folder
                          • Variables
                          • Advanced theming
                            • Adding new gradients
                            • Styles for the tabs
                            • Styling the panel
                          • Different styles for the same component
                          • Supporting legacy browsers
                          • Summary
                          • Chapter 13: From Drawing to Charting
                            • Basic drawing
                            • Adding interaction
                            • Charts
                              • Legend
                              • Axis
                              • Gradients
                              • Series
                              • Theming
                            • Series examples
                              • Area
                              • Bar
                              • Line
                              • Pie
                              • Radar
                              • Scatter
                              • Gauge
                            • Enhancing our application with charts
                            • Summary

                            Crysfel Villa

                            Crysfel Villa is a Software Engineer with more than 7 years of experience with JavaScript on a daily basis. He started his career as a Web Developer working with HTML and basic JavaScript in the late nineties, but then he started focusing on Server Side technologies, such as PHP and Java J2EE. Before he started working with the Ext JS library he loved to work with MooTools, but in late 2007 he started learning about an awesome new library that was emerging as an Open Source project. At that time the version 2.0 of the Ext JS library was just coming out and Crysfel started using this new library for medium-large projects in the agency that he used to work with. In early 2010 Crysfel started working as a freelancer, he began to train teams on Ext JS for private companies, writing a blog with tutorials, tips and tricks, developing custom components on Ext JS for his clients, and working on Open Source projects to share his knowledge with the world. If you want to find more information about his work, you can follow him on Twitter (@crysfel) or download his Open Source projects from GitHub (crysfel).

                            Armando Gonzalez

                            Armando Gonzalez is a Software Engineer with more than 4 years of experience in developing enterprise applications with Ext JS. He has plenty of experience in server-side technologies like PHP, Java J2EE, Node JS, and ROR. Before he started with Ext JS he was a Java and PHP developer. Since he started using JavaScript and Ext JS he became a JavaScript Evangelist, and started training teams on JavaScript and Ext JS. He loves to teach and share his knowledge with other developers and is always trying to make them use this awesome library. In early 2012 Armando started a software company, Codetlan, with some of his friends. This company focuses on developing enterprise applications using Sencha technologies. He is also a minor actionist in a Mexican startup called Cursame, where he developed the mobile version of the application and helped developing the main application using ROR technologies. If you want to know more about his work, you can follow him on Twitter (@manduks) or can watch his Open Source projects on Github (manduks).
                            Sorry, we don't have any reviews for this title yet.

                            Code Downloads

                            Download the code and support files for this book.


                            Submit Errata

                            Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                            Errata

                            - 13 submitted: last submission 07 Mar 2014

                            Errata type: Typo | Page number: Preface

                            Chapter 14, Finishing our Application, and Chapter 15, Ext JS 4 Next Steps, are not present in the book but are available for download at the following links:

                            http://www.packtpub.com/sites/default/files/downloads/6846OS_14_Final.pdf

                            http://www.packtpub.com/sites/default/files/downloads/6846OS_15_Final.pdf

                            Errata type: Typo | Page No.: 72

                            In the diagram of the lifecycle the box on the right should read Destruction not Distraction

                            Errata type: Code

                            Throughout the book, wherever you find:

                            <linkrel=...

                            it should be

                            <link rel=...

                            Errata type: Code| Page No.: 49

                            The code towards the end of the page needs a comment "//Step 1".

                            Code line number 2 should look like:

                            config : { //Step 1

                            Errata type: Code| Page No.: 255

                            The line
                            //Step 1
                            me.control({
                            'toolbar[itemId=mainmenu] button[itemId=startbutton] menuitem: {

                            Should be
                            //Step 1
                            me.control({
                            'toolbar[itemId=mainmenu] button[itemId=startbutton] menuitem': {

                            Errata type: Code | Page number: 64

                            //Step 1
                            varlis = Ext.DomQuery.select("#main .menu ulli");

                            It should read:


                            //Step 1
                            var lis = Ext.DomQuery.select("#main .menu ul li");

                            Errata type: Graphics | Page number: 72

                            The diagram on page 72 is incorrect. Distraction should be Destruction. The correct diagram is as follows:

                            Errata type: Code | Page number: 143

                            In the upper part of the page:
                            "functionclallback(user){"

                            Should read

                            "function callback(user){"

                            Errata type: Code | Page number: 196

                            Setting of "fieldLabel" and "labelSeparator" should NOT be an empty space for both (as described in the text on bottom of the page) but like in the code above.

                            Errata type: Typo | Page number:191, 193, 196

                            It should be "varchkbox = ..." instead of "var chkbox = ..."
                            Also, var combobox..." and "var datefield should be varcombobox, vardatefield.

                            Errata type: Typo | Page number:191

                            In the upper part of the page: "...records that matche..." should be "records that matches..."

                            Errata type: Typo | Page number:189

                            It should be "varcombobox = ..." instead of "var combobox..."

                            Errata type: Code | Page number:146-154

                            "varbtn..."should be "var btn..."

                            Errata type: Code | Page number:184

                            At the bottom '<script type... src="MyApp/view/AvailableFields">' the file 
                            extension ".js" is missing. It should be '<script type... src="MyApp/view/AvailableFields.js">'.

                            Errata type: Typo | Page number: 76

                            Bullet point "7. In the sixth step, the render event is fired." Should be

                            7. In the seventh step, the render event is fired.

                             

                            Bullet point "8. The seventh step is to initialize the content." Should be

                            8. The eight step is to initialize the content.

                            Errata type: Typo | Page number: Source code 02-avaliable.html file in Chapter 6

                            The code:
                            <script type="text/javascript" src="MyApp/view/AvailableFields"></script>

                            should be
                            <script type="text/javascript" src="MyApp/view/AvailableFields.js"></script>

                            Errata type: Code | Page number: 325

                            refs: [{
                             ref: 'treePanel',
                             selector: '#categoriesmaintreepanel'
                            }],
                            init   : function(){
                            var me = this;
                            me.control({
                             '#categoriesmaintreepanel #savebtn' : {// we get the save button reference
                             click : me.addTreeNode
                             },
                             '#categoriesmaintreepanel toolbar #deletebtn':{// we get the delete button  
                            reference
                             click : me.deleteTreeNode
                             }
                            });
                            me.getCategoriesCategoriesStore().load();
                            me.getInvoicesInvoicesStore().load();
                            },
                            	
                            The codes should be changed to:
                            refs: [{
                             ref: 'CategoriesForm',
                             selector: 'categoriesForm'
                             }, {
                             ref: 'Treepanel',
                             selector: 'treepanel'
                            }],
                            init   : function(){
                            var me = this;
                            me.control({
                             'categoriesForm #savebtn' : {// we get the save button reference
                              click : me.addTreeNode
                             },
                             'treepanel toolbar #deletebtn':{// we get the delete button  reference
                              click : me.deleteTreeNode
                             }
                            });
                            me.getCategoriesCategoriesStore().load();
                            me.getInvoicesInvoicesStore().load();
                            },
                            	....
                            	
                            The itemID 'savebtn' is defined in the CategoriesForm.js and itemID  
                            'deletebtn' is defined inside of toolbar 'tbar' in the Treepanel.js
                            

                            Errata type: Code | Page number: 239 | Section: Grid Paging

                            In the code:

                            url:'clients.php,

                            should be:

                            url: 'clients.json',

                            Sample chapters

                            You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                            Frequently bought together

                            Learning Ext JS 4 +    Microsoft Exchange 2010 PowerShell Cookbook =
                            50% Off
                            the second eBook
                            Price for both: $45.60

                            Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                            What you will learn from this book

                            • Learn how the Ext JS class system works and is organized
                            • Dig into how the Ext JS components and widgets work
                            • Use the powerful layout system that Ext JS 4 offers
                            • Focus on the new MVC pattern and good architecture
                            • Get the best of templates, dataviews, and grids
                            • Change the default theme of the library easily with compass and sass, and create custom themes
                            • Drag and drop easily and quickly with Ext JS 4

                             

                            In Detail

                            Ext JS is a JavaScript library for building interactive web applications using techniques such as Ajax, DHTML, and DOM scripting.

                            Ext JS 4 features expanded functionality, plugin-free charting, and a new MVC architecture, it's the best Ext JS web application development platform yet. It helps develop incredible web apps for every browser.

                            Learning Ext JS 4 will teach you how to get the best of each Ext JS component and also show you some very practical examples that you can use in real world applications. You will also learn why it is so useful and powerful in developing fast and beautiful applications.

                            The book starts with the very basics of Ext JS. You will learn to create a small application step-by-step, and add new features to it in every chapter.

                            Once you grasp the basics, you will learn more complicated topics such as creating new components, templates, architecture, patterns, and also tips and techniques that will help you improve your skills on JavaScript and Ext JS 4. We also cover how to create themes to make your application design beautiful and customize it the way you need.

                            At the end of the book, you will have a working application built using all the knowledge you gained from the book.

                             

                            Approach

                            The book is a step-by-step tutorial full of example code and explanations to help a beginner learn Ext JS thoroughly.

                             

                            Who this book is for

                            This book will help you to learn Ext JS from scratch, it would be better if you have some JavaScript knowledge. Knowledge of HTML and CSS3 would be helpful but not required.

                             

                            Code Download and Errata
                            Packt Anytime, Anywhere
                            Register Books
                            Print Upgrades
                            eBook Downloads
                            Video Support
                            Contact Us
                            Awards Voting Nominations Previous Winners
                            Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                            Resources
                            Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software