WIXLIB

Table of ContentsChapter 6: Doing It with Forms165Chapter 7: Give Me the Grid199The form componentThe anatomy of the fieldsThe available fieldsThe TextField classThe number fieldThe ComboBox fieldThe Tag fieldThe Date fieldThe Checkbox and the CheckboxGroup fieldsThe Radio and RadioGroup buttonsThe field containerTriggersSubmitting the dataSummaryThe data connection (models and stores)A basic gridColumnsThe column row numberThe number columnThe template columnThe date columnThe Boolean columnThe check columnThe action columnColumn renderersThe Widget columnSelection modelsGrid ditingExt.grid.plugin.RowEditing[ iv 230230233

Table of ContentsGrid pagingInfinite scrollingSummary236238241Chapter 8: DataViews and Templates243Chapter 9: The Tree Panel257Chapter 10: Architecture277The data connection (model and store)A basic DataViewHandling events in DataViewTemplatesExt.TemplateExt.XTemplateA more complex DataView componentSummaryA basic tree panelThe TreeStoreTree nodesAdding and removing nodesThe check treeThe tree grid 0272275The MVC and MVVM patternsModel-View-Controller (MVC)Model-View-ViewModel (MVVM)Creating our first applicationThe viewsThe controller278278279280282287Listening to eventsOpening modules288291Creating a moduleViewControllerViewModelBinding and data bindingRouter – implementing and usingSummary292296299301311314[v]

Table of ContentsChapter 11: The Look and Feel315Chapter 12: Responsive Configurations and Tablet Support343Chapter 13: From Drawing to Charting363Setting up our environmentThe packages folderVariablesAdvanced themingChanging the component's styleAdding new gradientsStyling the tabsAdding custom fonts to our themeDifferent styles for the same componentSupporting legacy browsersSummaryOverviewNew themesNeptune touch and Crisp touchImplementing responsiveness to the applicationCreating responsivenessInvestigating the outputChecking all panelsSummaryBasic drawingAdding interactionChartsLegendAxisSeriesThemesSeries examplesBar charts (building our first chart)Pie chartsMore chartsIntroducing chart themesEnhancing our application with chartsSummary[ vi 52354361364369373374374375375376376381385386388393

Table of ContentsChapter 14: Finishing the Application395Chapter 15: What's Next?407Index417Preparing for deploymentThe app.json fileThe Sencha commandCustomizing the build.xml fileCompressing the codePackaging and deployingTesting the applicationSummaryForumsResourcesThird-party plugins (commercial)Third-party plugins (free)The futureFinal 4414414415[ vii ]

PrefaceOver the past few years, Ext JS has become a popular and powerful JavaScriptframework for desktop application development. For an Ext JS developer, thelearning curve is not very easy/fast and I have seen cases where developers learningthis framework find it to be a slow process. While writing this book I was thinkingabout the easiest and most comprehensible points so that you can understand thebasics, just as I would have liked to learn about the framework if I was in your place.This book is intended for developers who have the desire to learn and begin usingthis framework for their applications, and also for developers who have not startedusing the current version. It is written as an easy-to-follow guide that will help youunderstand the basics and fundamentals of the framework. If you have experiencewith previous versions of the framework, this book may clear many of your doubtsabout upgrading and how things happen in version 5.x.This book covers all of the basic information you need to know to start developmentwith this nice and powerful framework.What this book coversChapter 1, An Introduction to Ext JS 5, covers an explanation of how to start by gettingthe framework (downloading the file) and setting up the basic requirements youneed in order to begin coding. This chapter also provides an explanation of how theframework is structured, how to set up some required tools, and gives a quick peekat the product, Sencha Architect.Chapter 2, The Core Concepts, is about the framework's class system, and tells you howto use object-oriented programming with Ext JS. Also, this chapter explains how toextend classes, how to inherit properties, and the use of the Loader system in orderto define and require dependencies in a dynamic way.[ ix ]

PrefaceChapter 3, Components and Layouts, explains how components work, how they arecreated, their life cycle, and how to take advantage of all this. Here, you also learnabout types of containers and the layout system, which will help you create amazingUIs with little effort.Chapter 4, It's All about the Data, explains how the framework handles andmanipulates data to display information using data-aware widgets or components.Chapter 5, Buttons and Toolbars, shows you how to make use of component events;listen to events; (mainly) create buttons, toolbars, and menus; and set the most basicconfigurations for these components.Chapter 6, Doing It with Forms, talks about the form component, the available fieldsthat we can use in our forms, and how to collect and submit data.Chapter 7, Give Me the Grid, covers the basics of the most popular component, theGrid panel, in the framework, how to implement it, its column model, and customdata renderers for displaying data. We also see how to listen to events in the Gridpanel and look at some plugins and features (specific capabilities) that can beimplemented in the grid.Chapter 8, DataViews and Templates, explains how to make use of DataViews andtemplates to create data-aware views, implement a nice organization of our data,and set styles and custom logic for the representation of data.Chapter 9, The Tree Panel, covers the use of the tree panel component and itsimplementation. It also explains how to create stores and data for this component.Chapter 10, Architecture, is one of the most important chapters in the book. It showshow to create an application using the MVC and MVVM patterns. This is done inorder to create applications that can be scalable and easy to maintain. The MVVMpattern, which is a powerful pattern for reducing code, is introduced in version 5.Chapter 11, The Look and Feel, demonstrates how to create new themes inside theframework and applications by giving our applications a new look and some colorchanges (themes). Also, you learn how to create specific component-style UIs usingCompass and Sass.Chapter 12, Responsive Configurations and Tablet Support, explains how we can usetouch screen themes and how to set responsive configurations in components inorder to make those components responsive-aware.[x]

PrefaceChapter 13, From Drawing to Charting, talks about the basics of drawing and chartcreation. We see how to create charts by the use of the SVG/VML engines. Thischapter also explains how to add the Chart package to applications and the themeengine introduced in version 5.Chapter 14, Finishing the Application, covers how to prepare our application forthe production environment and deployment, covering the most essential parts forfinal production.Chapter 15, What's Next?, shows you where to get more feedback and resources suchas forums, other useful resources to get information tutorials from, and so on. Thischapter also gives a sneak peek into some useful plugins (commercial and free).What you need for this bookThe web browsers recommended for use are as follows: Google Chrome: http://www.google.com/chrome Firefox: https://www.mozilla.org/en-US/firefox/new/ Firefox for developers: ese browsers come in handy because they come with debugging tools foreasy development.For a web server with PHP support, use this: Xampp: https://www.apachefriends.org/index.htmlFor the database, use the following: MySQL: http://dev.mysql.com/downloads/mysql/ (this also comesbundled in Xampp)For Sencha Cmd and the required tools, use these: Sencha Cmd: http://www.sencha.com/products/sencha-cmd/download Ruby 1.8 or 1.9: http://www.ruby-lang.org/en/downloads/ Sass: http://sass-lang.com/ Compass: http://compass-style.org/[ xi ]

Preface Java RTE (version 1.7.0): loads/java-se-jre-7-download-432155.html Apache ANT: http://ant.apache.org/bindownload.cgi Ext JS (of course): http://www.sencha.com/products/extjs/We will use Ext JS 5.1.1 in this book.Who this book is forIf you are new developers who are beginners in Ext JS, developers familiar with Ext JSwho want to augment the skills of creating better applications, or developers whohaven't yet used version 5.x and want to know more about it, this is the book for you.Users should possess a basic knowledge of HTML/JavaScript/CSS/Sass/Compass,and an understanding of JSON, XML, and any server-side language (such as PHP,ASP, JAVA, and so on) is required.ConventionsIn this book, you will find a number of styles of text that distinguish betweendifferent kinds of information. Here are some examples of these styles, and anexplanation of their meaning.Code words in text are shown as follows: "Inside the app/view folder, we removeall existing files (the initial skeleton), and proceed to create the initial view ourapplication will have."A block of code is set as follows:Ext.define('myApp.model.modulesModel', {extend: 'Ext.data.Model',requires: 'Ext.data.field.Integer'],fields: [[ xii ]

', name: 'description'},'boolean', name: 'allowaccess'},'int', name: 'level'},'string', name: 'moduleType', defaultValue: ''},'string', name: 'moduleAlias', defaultValue: ''},'string', name: 'options'}]});When we wish to draw your attention to a particular part of a code block, therelevant lines or items are set in bold:Ext.define('myApp.store.modulesTreeDs', {extend: 'Ext.data.TreeStore',requires: ,constructor: function(cfg) {var me this;cfg cfg {};me.callParent([Ext.apply({storeId: 'mymodulesTreeDs',autoLoad: true,model: 'myApp.model.modulesModel',proxy: {type: 'ajax',url: 'serverside/data/menu extended.json'}}, cfg)]);}}); Any command-line input or output is written as follows:sencha -sdk /path/to/ext generate app myApp /path/to/myApp[ xiii ]

PrefaceNew terms and important words are shown in bold. Words that you see on thescreen, in menus or dialog boxes for example, appear in the text like this: "Try towrite something in the Customer ID field and you will see that it is read-only."Warnings or important notes appear in a box like this.Tips and tricks appear like this.Reader feedbackFeedback from our readers is always welcome. Let us know what you think aboutthis book—what you liked or may have disliked. Reader feedback is important for usto develop titles that you really get the most out of.To send us general feedback, simply send an e-mail to feedback@packtpub.com,and mention the book title via the subject of your message. If there is a topic that youhave expertise in and you are interested in either writing or contributing to a book,see our author guide on www.packtpub.com/authors.Customer supportNow that you are the proud owner of a Packt book, we have a number of things tohelp you to get the most from your purchase.Downloading the example codeYou can download the example code files for all Packt books you have purchasedfrom your account at http://www.packtpub.com. If you purchased this bookelsewhere, you can visit http://www.packtpub.com/support and register to havethe files e-mailed directly to you.[ xiv ]

PrefaceErrataAlthough we have taken every care to ensure the accuracy of our content,mistakes do happen. If you find a mistake in one of our books—maybe a mistake inthe text or the code—we would be grateful if you would report this to us. By doingso, you can save other readers from frustration and help us improve subsequentversions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the erratasubmission form link, and entering the details of your errata. Once your errataare verified, your submission will be accepted and the errata will be uploaded onour website, or added to any list of existing errata, under the Errata section of thattitle. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.PiracyPiracy of copyright material on the Internet is an ongoing problem across all media.At Packt, we take the protection of our copyright and licenses very seriously. If youcome across any illegal copies of our works, in any form, on the Internet, pleaseprovide us with the location address or website name immediately so that we canpursue a remedy.Please contact us at copyright@packtpub.com with a link to the suspectedpirated material.We appreciate your help in protecting our authors, and our ability to bring youvaluable content.QuestionsYou can contact us at questions@packtpub.com if you are having a problem withany aspect of the book, and we will do our best to address it.[ xv ]

An Introduction to Ext JS 5When learning a new technology such as Ext JS, some developers face a hard timeto begin with, so this book will give you the best possible way to start to understandthis technology more than any other source. We have to go from the librarydocumentation to blogs and forums looking for answers, trying to figure out how thelibrary and all the components work together. Even though there are tutorials in theofficial learning center, it would be great to have a guide to learn the library from thebasics 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 ofcomponents and widgets. The idea behind the framework is to create user-friendlyapplications in rapid development cycles, facilitate teamwork (MVC or MVVM), andalso have a long-term maintainability.Ext JS is not just a library of widgets anymore; the brand new version is a frameworkfull of new exciting features for us to play with. Some of these features are the newclass system, the loader, the new application package, which defines a standard wayto code our applications, and much more awesome stuff.The company behind the Ext JS library is Sencha Inc. They work on great productsthat are based on web standards. Some of the most famous products that Sencha alsohave 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 toknow the available tools to write our code, and take a look at some of the newfeatures in Ext JS 5. Considering Ext JS for your next project Getting started with Ext JS—our first program[1]

An Introduction to Ext JS 5 Tools and editors What's new in Ext JS 5?Considering Ext JS for your next projectExt 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 bestoption because it contains a lot of widgets such as the grid, forms, trees, panels, anda great data package and class system.Ext JS is best suited for enterprise or intranet applications; it's a great tool to developan entire CRM or ERP software solution. One of the more appealing examples is theDesktop sample index.html). It really looks and feels like a native application running in the browser. Insome cases, this is an advantage because the users already know how to interact withthe 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 simpleway. The framework for creating themes is built on top of Compass and Sass, sowe can modify some variables and properties and in a few minutes we can have acustom template for our Ext JS applications. If we want something more complexor unique, we can modify the original template to suit our needs. This might bemore 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 developour application using the object-oriented programming paradigm and take advantageof the single and multiple inheritances. This is a great advantage because we canimplement any of the available patterns such as MVC, MVVM, Observable, or anyother. This will allow us to have a good code structure, which leads us to have easyaccess for maintenance.Another thing to keep in mind is the growing community around the library; thereare lots of people around the world that are working with Ext JS right now. You caneven join the meeting groups that have local reunions frequently to share knowledgeand experiences; I recommend you to look for a group in your city or create one.[2]

Chapter 1The 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 onlythe 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 theSencha Cmd, a

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, version 2.0 of the Ext JS library had just been released, and Crysfel started using this new library for medium-to-large