Learning Ext JS 4

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, its 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. What will you 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 Cover 1 Copyright 3 Credits 4 About the Authors 5 About the Reviewers 7 www.PacktPub.com 9 Table of Contents 10 Preface 16 Chapter 1: The Basics 22 Should I use Ext JS for my next project? 23 Getting started with Ext JS 24 Looking at the whole picture 25 Why so many files and folders? 26 Our first program 27 Editors 32 Sublime Text 2 33 Eclipse Web Tools Platform project 34 Aptana 35 Textmate 36 Sencha Architect 37 Building an application 41 Planning our application 41 Wireframing 42 Data structure 45 File structure 46 Summary 47 Chapter 2: The Core Concepts 48 The class system 48 Simple inheritance 52 Pre-processors and post-processors 54 Mixing many classes 57 Configurations 64 Statics methods and properties 66 Singleton 67 Alias 68 Loading classes on demand 69 Enabling the loader 70 Dependencies 72 Synchronous Loading 75 Working with the DOM 76 Getting elements 77 Query – How to find them? 78 Manipulation – How to change it? 81 Summary 85 Chapter 3: Components and Layouts 86 The components lifecycle 86 The creation phase 87 The rendering phase 90 The destruction phase 93 The lifecycle in action 94 About containers 97 The panel 101 The Window component 105 The layout system 106 Fit layout 107 Card layout 108 HBox layout 110 VBox layout 114 Border layout 116 Accordion layout 117 Summary 119 Chapter 4: It's All About the Data 120 Ajax 121 Models 126 Validations 128 Relationships 132 Dealing with the store 134 Adding new elements 135 Looping through the elements 137 Retrieving the records 137 Removing records 140 Retrieving remote data 141 Ajax proxy 141 JSON reader 143 XML reader 145 Mappings 147 Sending data 149 Summary 153 Chapter 5: Buttons and Toolbars 154 Event driven development 154 A simple button 160 Adding menus 166 Toolbars 171 The main menu for our application 177 Summary 187 Chapter 6: Doing it with Forms 188 The form component 188 Anatomy of the fields 197 Available fields 197 The Textfield class 198 The number field 200 The combobox field 203 The date field 207 The checkbox 211 The radio button 213 The field container 216 Submitting the data 219 Summary 221 Chapter 7: Give me the Grid 222 The data connection (models and stores) 223 Defining a model for the store of the grid 223 Defining a store for the grid 224 A basic grid panel 225 Columns 228 Columns renderers 231 Selection models 233 Grid listeners 235 Features 238 Ext.grid.feature.Grouping 238 Ext.grid.feature.GroupingSummary 242 Ext.grid.feature.RowBody 245 Ext.grid.feature.Summary 247 Plugins 248 Ext.grid.plugin.Editing 249 Ext.grid.plugin.CellEditing 249 Ext.grid.plugin.RowEditing 251 Grid paging 254 Infinite scrolling 256 Summary 259 Chapter 8: Architecture 260 The MVC pattern 260 Creating our first application 261 The views 265 The controller 268 Listening events 270 Opening modules 272 Creating a module 278 Adding functionality 287 References 294 Summary 296 Chapter 9: DataViews and Templates 298 The data connection (models and stores) 298 Defining our User Model 299 Defining the store 300 A basic dataview 300 Getting all our code together 301 Handling events on the dataview 302 Adding the listeners to the dataview 303 Templates 304 A more complex dataview 309 Summary 312 Chapter 10: The Tree Panel 314 A basic tree panel 315 The TreeStore 318 Tree nodes 320 Tree drag-and-drop 321 Adding and removing nodes 324 The check tree 328 The grid tree 330 Adding an invoices' categories tree panel 335 Summary 342 Chapter 11: Drag and Drop 344 Make an item draggable 345 Hitting the drop zone 348 Drag and drop between Ext JS components 353 Enhancing our application with drag and drop 363 Summary 365 Chapter 12: Look and Feel 366 Setting up our environment 366 The resources folder 368 Variables 372 Advanced theming 373 Adding new gradients 373 Styles for the tabs 377 Styling the panel 382 Different styles for the same component 385 Supporting legacy browsers 388 Summary 391 Chapter 13: From Drawing to Charting 392 Basic drawing 393 Adding interaction 397 Charts 399 Legend 399 Axis 400 Gradients 400 Series 401 Theming 401 Series examples 401 Area 402 Bar 404 Line 406 Pie 409 Radar 410 Scatter 412 Gauge 414 Enhancing our application with charts 415 Summary 421 Index 422

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.