Ext.NET Web Application Development A guide to building Rich Internet Applications with Ext.NET using ASP.NET Web Forms and ASP.NET MVC Anup Shah BIRMINGHAM - MUMBAI Ext.NET Web Application Development Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: November 2012 Production Reference: 1121112 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-324-0 www.packtpub.com Cover Image by Geoffrey McGill (geoff@ext.net) Credits Author Anup Shah Reviewers Geoffrey McGill Daniil Veriga Vladmir Shcheglov Acquisition Editor Usha Iyer Lead Technical Editor Kedar Bhat Technical Editors Vrinda Amberkar Devdutt Kulkarni Worrell Lewis Project Coordinator Vishal Bodwani Proofreaders Clyde Jenkins Linda Morris Indexer Tejal Soni Graphics Aditi Gajjar Production Coordinator Nilesh R. Mohite Cover Work Nilesh R. Mohite About the Author Anup Shah has been a professional software and web developer since 1997. After graduating from Manchester University with a First Class Honors degree in Computing and Information Systems, he got a job in the United States. There, he soon headed the web development for a rapidly growing dot com, experiencing both the highs and lows of the first dot com bubble. After a number of years there he moved back to England where he grew up and joined a small dynamic software company working as a consultant, architect, and web developer for some high profile retail e-commerce websites, including some of the world's largest. Around 2007, while at the same company, he changed focus from a consulting role to a product development role, responsible for the user interface of a complex retail web application product. It was at this time he came across Ext.NET (or Coolite as it was known back then) and rapidly adopted it and introduced it into the company's product. Anup can be found on the Ext.NET forums, and contacted via his blog, http://www.onenaught.com. I would like to thank a number of people for their direct or indirect role in producing this book. First, there is my wife Kajal, without whom none of this would be possible. Her support has been second to none, especially after what she has endured this year. Thank you. I also wish to thank my work colleagues—past and present—for their support and encouragement in various ways over the years (I dare not list names as I will certainly miss some out but you know who you are!) I must also thank all at Packt for giving me this opportunity, as well as having patience and understanding during some difficult times. And, of course, there is the Ext.NET team. They have not only created an amazing framework (that stopped me quitting ASP.NET development altogether!) but their professionalism, dedication, and support has been amazing and I have learned a lot both professionally and personally along the way. Geoffrey, Daniil, Vladimir: This book would not be possible without you. Finally, I dedicate this book to the loving memory of my baby twins, Preetam and Bhaav. About the Reviewers Geoffrey McGill is the founder of Ext.NET and a 10+ year veteran of ASP.NET, C#, and JavaScript development. Geoffrey is responsible for overseeing the technical and strategic direction of Ext.NET. As an early adopter of Ext JS (originally yui-ext), the benefit to ASP.NET developers was obvious, although how to integrate into the ASP.NET life cycle was not. This is where the idea for Ext.NET was born. As a passionate advocate for free and open-source software, Geoffrey has contributed code to many projects, including as the creator of DateJS (http://datejs.com/) which has been downloaded more than 2,000,000 times. Daniil Veriga was born in 1985. As a young man, he enjoyed programming and won prizes in school competitions on programming. His interest in programming predetermined his path. He graduated from the Department of Computer Systems and Programming of the Saint-Petersburg State University Of Aerospace Instrumentation with honors. He started his career as a Software Engineer in a company developing industrial automation systems. He got great experience designing and implementing high performance real-time systems and solving challenging tasks. But later, he got interested in web technologies and was eventually hired to work for Ext.NET in 2010. His main skills and experience are C#, .NET, ASP. NET, ASP.NET MVC (Web Form and Razor engines), SQL, Visual Studio, JavaScript, HTML, CSS, ExtJS, and (obviously) Ext.NET, which this book is about. In his spare time, Daniil likes reading, swimming, skiing, biking, exercising on horizontal bars, and arm-wrestling. First of all I would like to thank my chiefs and colleagues – Geoffrey McGill and Vladimir Shcheglov, as well as my brother – Leonid Veriga. They truly helped my professional development in the programming and web technologies area. Also, I thank my family and all my friends. All of them made a certain contribution to my professional growth! And, finally, I thank Anup Shah for his efforts to write this book and, respectively, for popularizing Ext.NET. I think we all did a good job! Vladimir Shcheglov graduated from Saint-Petersburg State University of Aerospace Instrumentation with a Master's degree in Computer Science. He began his IT career as a Delphi developer (industrial control). Since 2005, he has been a C#/ASP.NET developer. Vladimir started to learn ExtJS from Version 1.1 and tried using it in an ASP.NET context. He received an invite to participate in the Coolite framework (former name of Ext.Net) development after creating and sharing the first prototype of Visual Studio designers and ASP.NET controls. Vladimir is the lead Software Engineer on the Ext.NET team. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Getting Started with Ext.NET 7 An overview of Ext.NET 7 Ext.NET and its relationship with ASP.NET Web Forms and ASP.NET MVC 8 Ext JS 8 Comparing with other JavaScript libraries such as jQuery 8 From a web developer's point of view 9 Ext.NET from an ASP.NET application developer's point of view 10 Ext.NET and Ext JS versions 11 Prerequisites 12 When to use ExtJS/Ext.NET and when not to 13 Getting Ext.NET 13 Choosing the right Ext.NET license 13 Downloading Ext.NET 14 Compiling (if needed) 15 A walkthrough – creating a simple ASP.NET project with Ext.NET enabled 15 Creating the project and enabling Ext.NET 16 Running the sample Ext.NET page 16 What the sample page does 17 Ext.NET in the ASP.NET project 20 Ext.NET and Web.config 20 Ext.NET controls are registered in Web.config for you 22 A walkthrough – creating a simple ASP.NET MVC Project with Razor and Ext.NET enabled 23 Creating an MVC project and enabling Ext.NET 23 The sample Ext.NET page using MVC and Razor 23 Summary 26 Table of Contents [ ii ] Ext.NET Controls Overview 27 Control overview 28 Buttons 30 A simple button 30 Button with icon 31 Button with menu 32 Split button 33 Other button options 34 Events in Ext.NET 36 Listeners – client-side events 36 Passing the component ID around on the client side 38 Setting custom values on components. 39 Direct Events – server-side handlers for client-side events 42 MessageBus – inter-component messaging 43 Container components 45 Container 46 Toolbars and menus 46 Toolbars with various buttons 46 Overflowing toolbars 47 Nested menus 49 Menus and form fields 52 Dynamically inserting menus and buttons 54 Panels 56 Windows 60 Tooltips 63 Complex components 65 Desktop 66 Charts 67 Calendars 68 Even more! 68 Summary 69 Layout with Ext.NET 71 Viewport 71 Border layout 72 Different ways to create the same components 75 Border layout from code 75 Mixing markup and code 77 Loading layout items via User Controls 78 The containing component does not have to be a Viewport 79 More than one item with the same region 80 Regions are not limited to Panels only 81 Weighted regions 83 Table of Contents [ iii ] Accordion layout 84 Panel subclasses as Accordion items 86 Layout combinations 87 Fit Layout 89 HBox layout 90 VBox layout 94 Reordering Panels 94 Centering a component 95 Many other layouts 97 Further resources and examples 97 Summary 98 AJAX with Ext.NET 99 AJAX with ASP.NET 99 UpdatePanel 100 Page methods 102 Other approaches in .NET 103 How this relates to Ext.NET 103 DirectEvents 104 DirectEvents on Ext.NET Controls 104 Passing additional parameters to the event 106 Sending custom data back to the client 107 Event masks 110 The App client-side namespace 113 Event confirmation 114 DirectEvents on ASP.NET Controls 115 DirectEvents on HTML Elements 116 DirectEvents dynamically generating new Ext.NET Components 116 DirectEvents invoking web services 118 DirectEvents invoking web services with parameters 120 DirectEvents invoking web services that return new Ext.NET components 121 DirectEvents invoking generic ASHX handlers 122 DirectEvents invoking ASP.NET MVC Controllers 123 Best server option? ASMX, ASHX, MVC, ASPX, WCF? 125 DirectMethods 126 Basic DirectMethod 126 Running JavaScript after the DirectMethod is invoked 128 Static DirectMethods for best performance 130 Returning custom types 131 Handling exceptions 133 Global AJAX operation handlers 137 By-passing the DirectMethod proxy 142 Table of Contents [ iv ] DirectMethods calling an ASP.NET MVC Controller 144 DirectMethods calling web services 144 JSON Serialization considerations with ASMX Web Services 146 DirectMethods calling generic ASHX handlers 149 DirectMethods on user controls 151 DirectMethods on ASP.NET MVC Controllers 154 Turning off the ID mode for DirectMethods 155 Controlling the rendering of dynamically generated controls 156 AJAX options specific to certain controls 157 Loading content with Panels 157 Component loader 158 Ultimate performance option: avoid AJAX! 161 Summary 161 Working with Data 163 XTemplates 164 Basic XTemplates 164 Basic XTemplates with repeated data 167 More XTemplate rendering options 171 Stores 172 Models 172 Proxies 173 Separation of concerns and loose coupling 174 DataView 175 Our first attempt 175 Preparing the data 175 The Store and Model in action 177 DataView to display the formatted data 179 Paging 179 Putting it altogether 180 Second attempt 181 Generic ASHX handler for AJAX paging 181 Using an AjaxProxy 182 Filtering and sorting 183 Handling selections in DataViews 185 Example using a PageProxy 189 Example using an ASP.NET data source control 190 More about DataViews 192 ComboBox 192 Define Store and Model with a ComboBox 192 Formatting the ComboBox with an XTemplate 194 Enabling store paging on a ComboBox 196 Using a server-side Proxy for the Store 198 Summary 199 Table of Contents [ v ] Introducing GridPanels 201 GridPanel – overview 202 Simple grid 203 Column types 210 AJAX-based proxies 212 Paging 213 Client-side paging 213 Server-side paging 214 Filtering 215 Client-side filtering 215 Server-side filtering 219 Sorting 222 Client-side sorting 222 Server-side sorting 223 Grouping 224 Column summaries 226 Column summaries per group 229 Row expanding 231 Row expanding using templates 231 Row expanding using Ext.NET components 234 Selection models 236 Default row selection 237 Checkbox selection 239 Cell selection 240 Grid editing 241 Configuring columns to be editable 241 Cell editing 243 Committing changes 246 Automatically updating as you edit 246 Explicitly saving changes by letting the user click on a Save button 248 Paging while rows have been edited 249 Row editing 249 Other editing options 250 Many more GridPanel capabilities not covered here 251 Summary 251 Forms and Validation 253 Form fields – overview 253 TextField 253 Controlling field labels 254 Field icon 255 Default empty text 255 Field notes 255 Table of Contents [ vi ] Field indicator 256 Custom icons 256 Initial value 256 NumberField 257 TextArea 258 HtmlEditor 259 ComboBox 260 TimeField 261 DateField 262 TriggerField 263 DropDownField 264 Checkbox 266 Radio buttons 267 FileUploadField 267 Many more form fields 267 Form layout 267 Checkbox and Radio button grouping 267 Fieldsets 268 FormPanel 269 FieldDefaults 270 FieldContainer 271 Form validation 273 Constraining and guiding input 273 Customizing the appearance of validation messages 274 Validation messages using FieldContainers 276 Validation types 276 Custom validation VTypes 278 Remote validation 280 Validation events 281 Manually submitting a form 282 Binding Stores and Records to a form 284 Summary 286 Trees and Tabs with Ext.NET 287 TreePanel 287 TreePanel – overview 288 Asynchronous tree node loading 290 NodeID for asynchronous node requests 291 Using TreeStore to create nodes on the server 291 Expanding tree nodes 293 Data binding with TreeStore and ColumnModel 293 Custom node attributes and explicit TreeStore Models 293 Multiple fields and tree grids 296 Table of Contents [ vii ] What else can you do with TreePanels? 297 TabPanel 298 TabPanel – overview 298 Asynchronous tab loading 301 Useful tab features 302 Tabs rendered at the bottom 303 Plain tabs 303 TabScrollerMenu plugin 303 Tab menus 304 Using TabBar to add custom toolbar items 307 More TabPanel examples 308 Summary 309 Extending Ext.NET – Custom Controls and Plugins 311 Basic control builder 312 Example 312 Benefits of this approach 316 Drawbacks to this approach 316 Extending Ext.NET controls 316 Extending the Ext.NET class 316 Extending the Ext JS class 318 Embedding the resources 321 Declaring your embedded web resources 322 Adding your embedded resources to your Ext.NET component 322 Custom events 323 Defining the event in the JavaScript class 324 Defining the client-side event on the server side 324 Creating a custom DirectEvent 329 Passing properties to your JavaScript class 332 Using the custom component on an ASP.NET Web Form 333 Using your custom component in ASP.NET MVC (Razor) 334 A basic control renderer 335 Reusing Ext.NET's builder pattern for a richer custom MVC framework for your own application 336 Recap of steps to create a custom component 341 Scenario 1 – simple subclass, no custom events, no custom JavaScript or CSS 343 Scenario 2 – simple subclass, no custom events, but with custom JavaScript or CSS 343 Scenario 3 – subclass with custom Listeners and/or DirectEvents, and custom JavaScript/CSS 343 Component design considerations 344 Building more complex controls through composition 344 GenericComponent – a quick alternative to wrap Ext JS ready Components 345 Declaring DirectMethods on custom components 345 Supporting ASP.NET Web Forms IPostBackDataHandler 345 Table of Contents [ viii ] Benefits of extending Ext.NET controls 346 Drawbacks of this approach 346 Using plugins 346 Benefits of this approach 352 Drawbacks of this approach 353 Plugins versus extending components 353 Summary 354 Troubleshooting and Debugging 355 Debugging and troubleshooting Ext.NET applications 355 Enabling debug mode scripts 356 Controlling Source Formatting 357 Browser developer tools 359 Cross-browser considerations 359 HTML doc types 360 Setting IE rendering mode 360 IE developer tools and taking advantage of rendering modes 361 IE10 support 363 IE 6 support 364 Browser console 365 Illuminations for Developers 368 JavaScript debuggers 370 Debugging requests 371 Getting support from Ext.NET 374 The overall principle–reproduce the problem in small, staalone code 374 Use a test project independent of your production code 375 Examples of what to cut from your sample 375 If you cannot reproduce the problem 376 Effort should pay off in other ways 376 Summary 377 Index 379 Preface This book will show how to use Ext.NET 2 to create sophisticated and highly interactive web applications whether you use ASP.NET Web Forms or ASP.NET MVC. The chapters will go through setting up and exploring various controls that Ext.NET provides. It will look at the sophisticated AJAX and data-handling options available while also providing tips and guidance for creating reusable and maintainable components. The list of components that Ext.NET covers and the variety of ways in which you can use them are immense. It would be beyond the scope of this book to detail all of them, so this book will cover the most common and/or interesting ones, but importantly it will also empower you with the ability to learn and explore the rest in your own time. What this book covers Chapter 1, Getting Started with Ext.NET, provides an overview of what Ext.NET is and how it is related to Ext JS and ASP.NET. In addition, this chapter covers how you can obtain and set up your development environment ready for Ext.NET development. Chapter 2, Ext.NET Controls Overview, introduces various types of controls available in Ext.NET. Using the Button control, we introduce many concepts common throughout the Ext.NET control suite. We also look at how client-side and server-side events can be set up. This chapter also introduces other more common components including Panels, Toolbars, Menus, Windows, and Tooltips. We also get a glimpse of some of the complex UIs that are possible by reusing these components. Chapter 3, Layout with Ext.NET, covers the numerous layout options available in Ext.NET to help you organize your web applications. Topics covered include the Viewport, and specific layouts such as Border, Accordion, Fit, HBox, VBox, and more. Preface [ 2 ] Chapter 4, AJAX with Ext.NET, looks at the powerful AJAX options Ext.NET supports. We cover the powerful DirectEvents and DirectMethods features, as well as AJAX options specific to certain controls. This is a powerful chapter that lays the foundation for slick and usable applications that are responsive to user interactions. Chapter 5, Working with Data, looks at the powerful data handling techniques available in Ext.NET. We cover XTemplates, which allows you to define HTML templates to bind data to, and we explain the Stores, Models, and Proxies architecture that allows for powerful data-binding reuse across many Ext.NET components. The ComboBox and DataView are introduced as examples of controls that reuse this architecture. Chapter 6, Introducing GridPanels, covers the popular and highly sophisticated GridPanel control. It is another control that reuses the Stores, Models, and Proxies architecture, but is given its own chapter. We look at various features of the GridPanel such as paging, filtering, sorting, grouping, column summaries, row expanding, and selection models. We also look at how grid editing can be enabled, including in-line grid editing at the row or cell level. As large as this chapter is, there are many other GridPanel capabilities that we have not been able to fit into this book, so many links to further examples and resources are also provided. Chapter 7, Forms and Validation, looks at the numerous form controls available in Ext. NET, how to lay them out, and how to enable client and remote validation. We also look at how custom validators can be created. Lastly, we also see how Ext.NET's data-binding capabilities can also be reused with forms. Chapter 8, Trees and Tabs with Ext.NET, introduces the popular TreePanel and TabPanel controls. Due to limited space in the book, we cannot cover all the sophisticated possibilities that these controls offer, but we do provide an overview of how tree nodes can be loaded asynchronously and how to reuse the Store, Models, and Proxies architecture to bind data to trees. We also look at various ways TabPanels can be configured, including how to load content on-demand using various AJAX techniques supported by Ext.NET. Chapter 9, Extending Ext.NET Controls – Custom Controls and Plugins, is perhaps the most powerful chapter in this book. It shows you how to extend Ext.NET controls in a variety of ways to support both ASP.NET Web Forms and ASP.NET MVC Razor templates, enabling you to create highly reusable components. Most of the chapter looks at how controls can be extended, but we also look at how you can use the available plugin mechanisms to reuse functionality across different types of components. Preface [ 3 ] Chapter 10, Troubleshooting and Debugging, looks at how to debug your Ext.NET applications. In particular, we look at how to enable debug versions of Ext.NET and Ext JS JavaScript and what tools to use for cross-browser troubleshooting. This chapter also provides important tips on how to request help in the Ext.NET forums in a way that will increase your chances of receiving a quick response. What you need for this book Chapter 1, Getting Started with Ext.NET will explain prerequisites further. But as a summary, you will need Visual Studio 2008 or later (the book uses Visual Studio 2010). In addition to Internet Explorer, it is recommended to also use Chrome and Firefox (with the Firebug plugin installed) to test the examples. Who this book is for This book is for anyone who wants to use ASP.NET to create sophisticated applications, whether you have used Ext JS directly with ASP.NET before or not. As a .NET based component framework, Ext.NET code can be written in any supported .NET language, but this book will use C#. As such, familiarity with C# and ASP.NET is assumed. It is also assumed that the reader will have some basic knowledge of HTML, CSS, and JavaScript. Although it is not essential to know Ext JS upfront, it would be highly beneficial. That being said, some Ext JS code will naturally be used in various examples, where necessary. Such code will be explained appropriately and references for further Ext JS related information will also be provided, where needed. Conventions In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text are shown as follows: "When normally developing ASP.NET applications, you add controls to the container's Controls collection." A block of code is set as follows: Preface [ 4 ] When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: Any command-line input or output is written as follows: Install-Package Ext.NET.MVC New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Right-click on the file and select View in Browser and you will see a page similar to the following". Warnings or important notes appear in a box like this. Tips and tricks appear like this. Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to 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 you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors. Preface [ 5 ] Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase. Downloading the example code You can download the example code files for all Packt 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. Downloading the color images of this book We also provide you a PDF file that has color images of the screenshots used in this book. You can download this file from http://www.packtpub.com/sites/ default/files/downloads/3240OT_Images.pdf. Errata Although 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 in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub. com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support. Preface [ 6 ] Piracy Piracy 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 you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at copyright@packtpub.com with a link to the suspected pirated material. We appreciate your help in protecting our authors, and our ability to bring you valuable content. Questions You can contact us at questions@packtpub.com if you are having a problem with any aspect of the book, and we will do our best to address it. Getting Started with Ext.NET This chapter will introduce you to Ext.NET and how it fits into ASP.NET-based development. It will then guide you through installing and setting up Ext.NET on your local development machine. In particular, we cover the following topics: • An overview of Ext.NET • Choosing the right Ext.NET license • Downloading Ext.NET • Compiling Ext.NET • Creating a simple ASP.NET project with Ext.NET enabled • Creating a simple ASP.NET MVC Razor Project with Ext.NET enabled An overview of Ext.NET As mentioned on Ext.NET's official website (http://ext.net): Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library. Sencha's official website (http://www.sencha.com/products/extjs/) describes Ext JS (pronounced eee-ecks-tee) as a JavaScript framework for rich apps in every browser. In other words, Ext.NET is an ASP.NET framework, or a set of controls and classes, that typically generates JavaScript (though HTML and CSS are generated wherever needed). And, the JavaScript it generates is based on the Ext JS framework, from Sencha. Ext.NET also includes components that are not found in Ext JS, and extends various Sencha Ext JS classes wherever needed, thus providing its own JavaScript layer on top of Ext JS. Getting Started with Ext.NET [ 8 ] Ext.NET is a good abstraction over Ext JS. The abstraction is not leaky or restrictive—you can also write Ext JS-based JavaScript directly, as well as in conjunction with Ext.NET. This flexibility importantly allows you to tap into the wider Ext JS community of plugins and components that you might want to incorporate into your Ext.NET applications. This means that knowing the underlying Ext JS library can really help you understand Ext.NET, and will open you to more options when building complex applications. The other way of thinking about it is that Ext.NET is a great bridge between Ext JS on the client side and ASP.NET on the server side. Ext.NET and its relationship with ASP.NET Web Forms and ASP.NET MVC A great thing about Ext.NET is that it works with both ASP.NET Web Forms and ASP.NET MVC. If you are integrating Ext.NET into a legacy application built with ASP.NET Web Forms, or if you simply prefer ASP.NET Web Forms, Ext.NET will work very well and provide enhanced HTML5 functionality. The newer ASP.NET MVC framework is a powerful and well-architected MVC framework, designed to avoid the Post Back model that ASP.NET Web Forms is based on and allow better access for developers to the underlying HTML, JavaScript, and CSS. The choice of using ASP.NET MVC or Web Forms is not important for the scope of this book. Examples of both will be shown from time to time, though most of these will be based on ASP.NET Web Forms. Ext JS Many ASP.NET developers, especially those using ASP.NET MVC may be more familiar with jQuery or other JavaScript frameworks. It is, therefore, worth explaining Ext JS a bit further. Comparing with other JavaScript libraries such as jQuery Although Ext JS is a reasonably popular JavaScript framework (especially in the enterprise and in the Java world), there are other more popular JavaScript frameworks, such as the excellent jQuery. Chapter 1 [ 9 ] However, as popular as jQuery may be (Microsoft includes it by default in their MVC framework, for example), there is a significant difference between Ext JS and libraries such as jQuery, Prototype, and MooTools. Libraries such as jQuery attempt to solve common problems for web developers and designers by providing cross-browser compatible ways to navigate and manipulate the DOM. They provide standard event, AJAX and other capabilities. Their UI components, such as jQuery UI are typically designed to work in a progressive enhancement way (i.e. the web page will work with and without JavaScript; JavaScript in that context, when structured properly, is used to enhance the base functionality of a web document to add further behavior and improved user experience, but the absence of JavaScript allows search engines and users of lower- grade browsers to still access the page and use it). Ext JS's goal, however, is to provide a complete UI framework for building complex web-based applications. Ext JS also provides a full and extensible object-oriented UI component framework, in addition to providing cross-browser abstractions in the similar ways that other JavaScript frameworks do. (Ext.NET mimics this component hierarchy on the server side quite closely, which makes for easier learning of both frameworks). In that regards, it is more appropriate to compare jQuery UI with Ext JS, and in that context, Ext JS is far richer in capability. All that being said, the use of Ext JS—and, therefore, Ext.NET—does not preclude the use of other frameworks. For example, you can include jQuery on the same page as an Ext.NET application. From a web developer's point of view Progressive enhancement and web standards are excellent principles for building websites. However, Ext JS is not about progressive enhancement. The problem space it addresses is different; it is intended for much richer applications where a dependency on JavaScript can be mandated. A back-office application in a corporate or intranet setting is one example. Another may be a public application but where search engine visibility is not required. In such scenarios typically, JavaScript is the starting point for the application; the HTML-based web page then becomes a container to load and initialize the JavaScript-based application. It is possible to use Ext JS on top of HTML and get it to replace say an HTML table with a powerful Ext JS grid, but that is not considered the optimal way to use Ext JS. Getting Started with Ext.NET [ 10 ] All is not lost from a web standards perspective, however! You should still test on modern browsers, such as Chrome, Firefox, and Opera, first and then work backwards. It is well established that this way of working with web technologies will reduce (though not eliminate) the number of workarounds you need for older web browsers, in a maintainable way. For many components, Ext JS and Ext.NET will also let you override the underlying HTML it uses to generate its components. In addition, Ext JS is also increasing its HTML5 and ARIA accessibility standards support in its numerous widgets. From a CSS point of view, complete themes are provided. These also include resets of default styles to normalize them across browsers as much as possible. The default themes may be quite suitable for many Ext JS-based applications, which also means less time may be required working with CSS on Ext.NET-based applications. You can also create your own themes but this will be beyond the scope of this book. You can find various tutorials on the Web, as well as on Sencha's official website. Ext.NET from an ASP.NET application developer's point of view If you are used to creating ASP.NET applications using ASP.NET controls or using vendor controls that follow ASP.NET controls closely (for example, using the Post Back model where most of the control state is maintained on the server via ViewState) then Ext.NET may initially appear quite similar, but behind the scenes, there are some useful enhancements and considerations, for example: • ViewState is typically not required for Ext.NET controls and is turned off by default (but is on if you use FormsAuthentication, which requires it). This can save a lot of bandwidth. In one case, a roughly 1.5 MB page (mostly due to ViewState) during an AJAX request became a mere 500 bytes using one of Ext.NET's AJAX approaches. • An ASP.NET Web Forms application requires a single ASP.NET
, which contains all the controls, ViewState, event arguments, and so on. With Ext.NET it is optional as later chapters will show. Furthermore, you can choose to have multiple HTML form tags if you require and Ext.NET will happily work with that. • When normally developing ASP.NET applications, you add controls to the container's Controls collection. With Ext.NET, you typically add child Ext. NET controls to an Ext.NET component's Items collection. This is important to bear in mind. This helps generate more optimized Ext.NET JavaScript and lets you take advantage of additional Ext.NET features such as Layout which we will see in Chapter 3, Layout with Ext.NET. Chapter 1 [ 11 ] It is worth focusing on the point about ViewState for a moment. In a traditional ASP. NET Web Forms application, ViewState and the associated Post Back Model are the keys to recreating complex controls in the state the user expects them to be. With Ext. NET's approach, however, control state does not typically need to be maintained on the server; this usually flies against conventional ASP.NET Web Forms applications, but rich Internet applications are becoming more and more AJAX-oriented, which means less (sometimes no) browser page reloads. As such, the control state management normally associated with page reloads and post backs is less prominent and helps simplify code. For the client side, Ext.NET's JavaScript and the underlying Ext JS framework handles most complexities of control management such as instantiation, destruction, layout management, and redrawing components. This also means the client-side code needed to maintain the state is also very minimal, if anything; Ext JS components will handle most of the internal state for you and if you need more, the API is flexible enough for you to introduce your own code as needed. Because Ext.NET uses Ext JS's built-in AJAX capabilities, mixing different server- side toolkits—while not impossible—can limit the flexibility and performance you can get out of Ext.NET. For example, if you have a mix of components on your page, and the other non-Ext.NET components rely on ASP.NET Web Form's Post Back and ViewState, Ext.NET will still work with that, but you won't be able to take advantage of some of Ext.NET's more sophisticated capabilities, as frequently. At the same time as being a complete UI framework, you can always by-pass Ext. NET on the server side and do something directly using Ext JS or Ext.NET's own JavaScript, if that proves more optimal. This flexibility makes the Ext.NET server-side abstraction more flexible and less "leaky". From an ASP.NET development perspective, the main thing to take away is that as powerful as ASP.NET is, Ext.NET enhances and integrates client and server coding much more completely and gives you the flexibility to get your hands dirty with JavaScript, if you so wish. To get the most out of Ext.NET, it is strongly recommended to spend time learning more about Ext JS as well. Ext.NET and Ext JS versions With Ext.NET's integration of Ext JS the versions are important to understand. The latest version of Ext JS, as of writing, is 4.1. It is an impressive evolution of the previous version (Ext JS 3.4) which is still widely used. Getting Started with Ext.NET [ 12 ] Ext.NET targets specific Ext JS versions: • Ext.NET 1.x works with Ext JS 3.x • Ext.NET 2.x works with Ext JS 4.x This book covers Ext.NET 2.1 which is the latest version as of writing. However, note that the Ext.NET team works to produce updates as frequently as they can. If Ext.NET 2.2 or later has been produced, most principles and techniques from this book will still apply. This is important to note if ever consulting the Ext.NET or Ext JS documentation online. Prerequisites Ext.NET 2 will work with the following: • Visual Studio 2010 or 2012 • Visual Web Developer Express 2010 or 2012 • .NET Framework 4.0 and 4.5 In this book, code examples will be created using Visual Studio 2010 Service Pack 1 and .NET Framework 4. Ext JS and Ext.NET support all the major modern browsers such as Chrome, Firefox, IE9, Opera, and Safari) as well as older versions of Internet Explorer (also referred to as IE)—IE8, IE7, and IE6. As of writing, IE10 has only just come out, so is not officially supported, but we can expect both Ext.NET and Ext JS to provide maintenance releases to support IE10, as they have done with IE9 in the past. Keep an eye on the Ext.NET website, http://ext.net, because new versions of the .NET framework and Visual Studio are being released as of writing, and browser manufacturers are frequently releasing newer versions of their software. Chapter 1 [ 13 ] When to use ExtJS/Ext.NET and when not to With all the benefits that Ext.NET may offer, why might you consider not using it? The following points are just guidelines as there will always be exceptions, but the main consideration is that Ext.NET is based on Ext JS, which is a JavaScript framework. If you have a website where search engine visibility is crucial, progressive enhancement is important, and full control over every bit of HTML and CSS is important, Ext JS (and therefore Ext.NET) may not be for you. This may include public-facing consumer websites such as blogs and e-commerce sites. You can certainly use Ext JS (and Ext.NET) on these sites, but it would not be the main or intended use cases. However, if you are building complex applications, such as business/intranet applications or a public-facing site where JavaScript dependency can be an accepted pre-requisite, then Ext JS/Ext.NET can be an excellent choice. If you are looking to build a sophisticated application, the user interface, the usability, and interaction design principles may also differ to what you would follow for websites. There is certainly a lot of overlap, but additional principles such as those described in the authoritative About Face 3: The Essentials of Interaction Design by Alan Cooper et al is highly recommended. Getting Ext.NET We will now look at what is involved in downloading the Ext.NET framework. Choosing the right Ext.NET license The first thing to note is that Ext.NET is dual licensed and you can choose between the following: • Ext.NET Pro: For commercial closed-source projects • Ext.NET Community: For open source AGPL licensed projects The differences between the two are very minimal. In the Ext.NET Pro release there is an option to render resources (JavaScript, CSS, and images) from a global Content Delivery Network. The Community version does not have this option. The Pro version also does some license checking. Other than that, the code is the same. Getting Started with Ext.NET [ 14 ] If your own project is licensed with the AGPL license, then you can use the Community license. If you are producing a closed source project, then you should purchase an Ext.NET Pro license. The Pro license includes a license to the underlying Ext JS framework so you do not have to purchase both. The Pro license also comes with a license key that can be added to Web.config or Global.asax without which you would see a message appearing on any web pages that are not running locally. This message warns about the software being unlicensed. The FAQs at Ext.NET's download page, http://ext.net/download/, has further details and can help you decide which license is suitable for your project. Downloading Ext.NET There are a number of ways you can download Ext.NET: From the Ext.NET download site: http://ext.net/download/ • From GitHub: https://github.com/extnet/ • From SVN, if you have a Premium Support Subscription: http://ext.net/store/ • As a NuGet Package: http://nuget.org/packages/Ext.NET All these options, except the NuGet option, include the full source code so you can choose whether to build the solution yourself or use the supplied assemblies. Downloading the source code is useful to at least explore how Ext.NET has been put together. The SVN option will include a pre-release source code if you want bug fixes more quickly than official releases. NuGet is a popular Visual Studio extension to manage packages for you and will install the Ext.NET binaries to your web project's bin folder. The download from Ext. NET is a ZIP file. The DLLs that you will find are as follows: • Ext.Net.dll: The Main Ext.NET assembly • Ext.Net.pdb: The debugging symbols • Ext.Net.xml: The IntelliSense help text for the assembly when you are coding • Ext.Net.Utilities.dll: Additional utilities from the Ext.NET framework • Ext.Net.Utilities.xml: IntelliSense help text • NewtonSoft.Json.dll: The Json.NET framework that Ext.NET uses • NewtonSoft.Json.xml: The Json.NET IntelliSense • Transformer.NET.dll: A .NET template parsing and transformation library • Transformer.NET.xml: The Transformer.NET IntelliSense Chapter 1 [ 15 ] Json.NET is itself a popular open source .NET library for working with JSON. It is extremely effective at serializing .NET into JSON and deserialization from JSON to .NET. So much so that Microsoft itself has started using it instead of some of its own JSON serializers. More information about Json.NET can be found at its website: http://james.newtonking.com/pages/json-net.aspx. In addition to the DLLs, the following text files are also available and worth reading: • README.txt • CHANGELOG.txt • LICENSE.txt Compiling (if needed) If you have opted for the Ext.NET Premium Support Subscription service, amongst other benefits, you get access to their latest source code. So, for example, any bug fixes or feature requests reported by you or others in the community that have recently been implemented are available immediately for you to compile and use. If you go for this option, Ext.NET will send you instructions on how to connect to the public SVN code repository to download the latest code. You can then open the Visual Studio solution file and compile the code manually. If you then look in the Ext.Net project's bin\Debug or bin\Release directory (depending on which mode you want) you will find the same DLLs as above. You can then include the output assemblies in your own solution. This means you do not need to compile their source code every time you compile your own solution; only when you update your local Ext.NET code from their SVN repository. A walkthrough – creating a simple ASP. NET project with Ext.NET enabled We will use the simplest and quickest approach to get you ready and playing with Ext.NET. Although the following steps and screenshots assume Visual Studio 2010 Service Pack 1, similar steps can be performed with Visual Studio 2012. Downloading the example code You can download the example code files for all Packt 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. Getting Started with Ext.NET [ 16 ] Creating the project and enabling Ext.NET The quickest way to get going in just a few seconds is to use NuGet. First, ensure you have the latest version of NuGet installed and then perform the following steps: 1. In Visual Studio, create a new ASP.NET Empty Web project. 2. Once it is created, open the Package Manager Console in Visual Studio. 3. Enter the following NuGet command: Install-Package Ext.NET 4. Once installed, compile your project and you are done! You can also run the NuGet command on an existing web project and it will add the new references and update your Web.config with its new additions for you. Running the sample Ext.NET page Following the above steps, the project will include a new page called Ext.NET.Default.aspx. Right-click on the file and select View in Browser and you will see a page similar to the following: Chapter 1 [ 17 ] The above page renders a simple Ext.NET Window in the center of the page with a message textbox. But it is not a static page; go ahead, type a short message, and click on Submit. An AJAX request will be made to the server and a message notification will slide up from the lower-right side of the browser window, then slide-out and disappear after a few seconds: What the sample page does This very simple example does many things for you • It loads the required JavaScript and CSS resources • It generates the necessary client-side initialization script, which renders the Ext. NET Components, such as the Window, TextArea, and Button, to the browser • When the message is submitted, an AJAX request is posted to the server • The server responds with a snippet of JavaScript to pop up the Ext.NET Notification Getting Started with Ext.NET [ 18 ] The code for the sample page is quite minimal. Here is the full ASPX code: <%@ Page Language="C#" %> Ext.NET Example The key things happening in the preceding code are as follows: • All the Ext.NET components are registered from the Ext.NET assembly using the ext tag prefix. • In the HTML, inside the form, is ext:ResourceManager. It is responsible for including the required JavaScript and CSS resources. In the above code, the theme has been set to the Gray theme. If this is not set, you get the default theme which is currently Blue. • Next, an Ext.NET Window component is placed on the screen and inside that, is a TextArea and a Button component. • The button, when clicked, will invoke an Ext.NET DirectEvent. A DirectEvent is Ext.NET's mechanism for doing server side calls in such a way it looks like a remote procedure call and the details of making the AJAX request and handling it on the server are all taken care of for you. (Chapter 4, AJAX with Ext.NET, will cover this in a bit more detail.) • The Button1_Click server-side event handler is defined near the top of the ASPX page. It simply calls the Notify method on the Msg property of the X class, which creates the Ext.NET Notification widget in the browser's corner using the supplied configuration options for the title, title icon, and the main text which is the value picked up from the TextArea. The X class contains many Ext.NET utilities and properties. All the components and techniques used in the above code will be expanded upon in subsequent chapters. A key thing to note at this point is that overall, this looks much like a regular ASP.NET button-click handler in terms of the code you write. However, the significant difference is that this is not doing a full page post back; it is a light-weight AJAX request, with an even lighter AJAX response. Here is the full response from the server to the browser: {script:"Ext.net.Notification.show({title:\"Working\",html:\"Hello Wor ld!\",iconCls:\"#Accept\"});"} Getting Started with Ext.NET [ 20 ] It is just 100 bytes of JSON which Ext.NET's JavaScript will handle and process for you. Had this been an ASP.NET traditional post back, the response would have been a full HTML page. In a real application these kinds of responses can save a lot of server resources and improve the user experience considerably. Let's take moment to go back to the project we created and see what other project artifacts we now have after the NuGet package installed Ext.NET for us. Ext.NET in the ASP.NET project In addition to creating Ext.NET.Default.aspx, the only other things that were done to the project were the following: • Four new references were added, to Ext.Net, Ext.Net.Utilities, Newtonsoft. Json and Transformer.NET • Web.config was updated to include a few additional settings (discussed in the next section) • A folder called App_Readme with useful Ext.NET files such as a change log, readme files, and license information were added • A packages.config file was also added (by NuGet) to list the added components Ext.NET and Web.config Web.config is an important file in ASP.NET and for Ext.NET too. The bare minimum Web.config that is created is as follows:
Chapter 1 [ 21 ] The above configuration uses both system.web and system.webServer to support IIS6 and IIS7+ to set up the AJAX handlers that Ext.NET will be using, as well as defining the custom section called extnet. This important configuration setting doesn't look like much by default: However, it is where global settings can be applied to determine how Ext.NET will behave across all pages in your application. The above example sets a global setting to tell the Ext.NET ResourceManager to use the default theme when rendering out the Ext.NET pages. As we saw in the sample page, we can also set the theme on the ResourceManager on the page itself. Getting Started with Ext.NET [ 22 ] The extnet configuration has many more options The configuration can take many other parameters which the accompanying README in the project lists and explains. Useful options include a scriptMode property which can be set to Release or Debug (we will look at this in a later chapter to help troubleshoot your application), a property on whether to gzip your resources or not, and many more. The Examples Explorer page on Ext.NET's website has a full list of the configuration options and is worth studying: http://examples.ext.net/#/Getting_Started/ Introduction/README/ If you have purchased an Ext.NET Pro license, then the license key should have been sent to you by the Ext.NET team. That key can be put in the licenseKey property of the extnet configuration section. Without this key, if your site is accessed remotely (for non-development purposes) each page will get a notification pop up saying the software is not licensed. Ext.NET controls are registered in Web.config for you In the earlier code for Ext.NET.Default.aspx, there was no explicit registration of the Ext.NET components (using a <%@Register line). Instead, the NuGet installation process adds the following into the system.web section of your Web.config file: As a result, none of your ASPX pages require the <%@ Register line. If you do not use the NuGet install method, then you can add the above code manually into Web.config. As an aside, the NuGet package used above does not have MVC support built into it, which means you can use it against a .NET 3.5 solution, if you require, though .NET 4 would usually be recommended. Ext.NET's MVC support is for MVC 3 including the popular Razor engine so .NET 4 is, therefore, needed then. Conveniently, Ext. NET provides a separate NuGet package for this, which we turn to next. Chapter 1 [ 23 ] A walkthrough – creating a simple ASP.NET MVC Project with Razor and Ext.NET enabled Ext.NET also supports ASP.NET MVC with both the default view template engine, as well as the popular Razor engine. Although the majority of this book will mostly show examples using ASP.NET Web Forms, there will be some examples showing MVC and Razor usage. Creating an MVC project and enabling Ext.NET To get MVC support, there is a similar NuGet package, called Ext.Net.MVC. So, you can follow the earlier steps, but instead do the following: 1. Create a new ASP.NET MVC 3 Web Application project. 2. Use the following NuGet command: Install-Package Ext.NET.MVC The changes will be the same as before. Web.config will be updated for you as needed, and Global.asax will have an additional route registered to handle Ext.NET resources. The following Ext.NET forum post is worth looking at to see how to manually apply the configuration changes to an existing project (because you can always use ASP.NET Web Forms and ASP.NET MVC in one project if you wish): http://forums.ext.net/showthread.php?16920 The sample Ext.NET page using MVC and Razor To get a feel of how Ext.NET looks in MVC/Razor, here is a similar example as earlier, but using the MVC/Razor syntax. First, the View: Ext.NET Example Getting Started with Ext.NET [ 24 ] @Html.X().ResourceManager().Theme(Theme.Gray) @(Html.X().Window() .Title("Welcome to Ext.NET 2.1") .Height(215) .Width(350) .Layout(LayoutType.Fit) .Items(Html.X().FormPanel() .Layout(LayoutType.Anchor) .DefaultAnchor("100%") .Border(false) .BodyPadding(5) .Items(Html.X().TextArea() .ID("message") .EmptyText(">> Enter a Message Here <<") .FieldLabel("Text Message") .Height(85) ) .Buttons( Html.X().Button() .Text("Submit") .Icon(Icon.Accept) .DirectClickAction("Notify", "ExtNET") ) ) ) And next, the Controller: using System.Web.Mvc; using Ext.Net; using Ext.Net.MVC; using Controller = System.Web.Mvc.Controller; namespace ExtNet2Mvc.Controllers { public class DirectEventExampleController : Controller { // // GET: /DirectEventExample/ public ActionResult Index() { return View(); } Chapter 1 [ 25 ] // // GET: /DirectEventExample/Notify/ public ActionResult Notify(string message) { var config = new NotificationConfig { Icon = Icon.Accept, Title = "Working", Html = message }; X.Msg.Notify(config).Show(); return this.Direct(); } } } The code does the same thing as the ASP.NET Web Forms example, earlier. We have defined two actions in the same controller. The Index, or default action when browsing /DirectEventExample/ will simply return the View. The View creates the same components as before, but using Razor syntax and Ext.NET's MVC helper methods. The button's Click DirectEvent is slightly different; the associated controller action, Notify, takes a string parameter. To set that parameter, the Click DirectEvent adds it as an extra parameter getting the value via a small bit of client-side JavaScript code (which gets the value of the client-side representation of the text area). To handle the event on the server side, the Notify action creates an Ext.NET Notification object and shows it. The Direct() method generates a DirectResult which is a subclass of ActionResult. It is a class created by Ext.NET and handles the script generation so that the Notification object appears on the user's browser. These techniques will, of course, be expanded upon in this book, so don't worry about the inner workings in too much detail for now! The key points to take away for MVC Razor is that it generally follows the standard ASP.NET MVC Razor patterns and Ext.NET components come with their own helper methods to help configure the controls as needed. There will be additional features specific to MVC that Ext.NET is building even as this book goes to print so there will be more capabilities to expect that cannot be covered in this book, including Data Annotations support, Model Binding support, specialized Ext.NET action results, and more. Getting Started with Ext.NET [ 26 ] Summary In this chapter we looked at what Ext.NET is and how it integrates both the Ext JS JavaScript framework and the ASP.NET server-side web framework. We also saw how you can set up Ext.NET on your development environment. We saw a variety of ways that Ext.NET can be added to your project, depending on your needs. Using NuGet is perhaps the quickest way to get started with using Ext.NET. We created an empty ASP.NET Web Application project and installed Ext.NET via NuGet. This gave us a simple Ext.NET ready project with a sample Ext.NET page. With very little code we saw a component that could talk to the server via AJAX and result in an AJAX response that interacted with the user. We also got a glimpse of how Ext.NET can be used with an ASP.NET MVC 3 project that uses a Razor template engine. In the next chapter we will look at various controls that Ext.NET provides. Ext.NET Controls Overview Ext.NET provides a rich and vast set of UI controls that extends the already versatile set provided by Ext JS. Given the extensiveness of the set of controls, it won't be possible to cover them all in detail in this book. Instead, in this chapter we look at some of the more basic—but still powerful—controls, such as buttons, toolbars, menus, panels, and more. This will help to introduce Ext.NET syntax and conventions, showing how the server side and the client side (JavaScript) can integrate together. Subsequent chapters will explore more complex controls, such as various layout controls and more advanced controls like grids and trees. At the end of this chapter, you will also get a glimpse of some complex controls that we will not be able to cover in this book, just so you get an idea of the possibilities that Ext. NET offers. By the end of this chapter you will understand: • The type of controls in Ext.NET • Common features of most controls • Handling events on the client side and server side • Using Container components, such as Menus, Toolbars, Panels, Windows, and Tooltips • How complex controls can come about from these concepts Ext.NET Controls Overview [ 28 ] Control overview Ext.NET provides a vast array of controls. We can broadly group the controls by their main functionality as follows: Functionality Area Examples Data visualization DataView, GridPanel, PropertyGrid, TreePanel, Chart, and Calendar Data handling Store, Proxies, Model, Reader/Writer, and Associations Containers Container, Panel, Window, ButtonGroup, Toolbar, ViewPort, TabPanel, and Menu Special containers Desktop and Portal Control elements Various types of buttons (such as Button, SplitButton, and LinkButton), pickers (such as ColorPicker and DatePicker), Slider, ProgressBar, Image, and Editor Layouts Accordion, Anchor, Border, HBox, VBox, and many more Form and fields FormPanel, FieldContainer, TextField, NumberField, ComboBox, CheckBoxField, DateField, DropdownField, FileUploadField, HyperLink, Label, MultiSelect, SpinnerField, TimeField, TriggerField, and many more Utilities and helpers DragDrop, KeyMap, KeyNav, XTemplate, TaskManager, Selection Models, and XScript This list is not a complete list, but it gives you an idea of the types of controls Ext.NET provides in these areas. Some of these controls such as the GridPanel, TreePanel, and others are extremely sophisticated themselves. In addition, some of these are covered in dedicated chapters later in this book. However, it would be impossible to cover all of them in detail in this one book alone! This chapter attempts to give you a sufficient overview in the hope that it will enable you to know how to learn and explore these more quickly. All these controls, and more, are demonstrated in the Ext.NET Examples Explorer. It is the best online resource to see all the controls in action. For each example, you can see the source code, to see how it was put together: http://examples.ext.net. Chapter 2 [ 29 ] The base class for most controls in Ext.NET is Component. All components can be shown/hidden and enabled/disabled, and can take part in sophisticated Ext.NET component registration and internal management. The class model is a close mirror of the client side, with Component being the base class for most Ext JS components, which provides some familiarity regardless of which way you look at the framework. Common to most visual controls is the ability to set dimensions, provide a class attribute, handle core events (on the client side and via AJAX requests), and so on. Container components additionally let you contain other components (recursively). Containers can also be defined with a layout, allowing you to arrange those contained components in numerous ways to help you bring about an application-type look and feel. In this chapter, we will use the humble Button to demonstrate various features common to most Ext.NET controls. We will then introduce the mechanisms Ext. NET provides for setting up client-side and server-side events. Following that, we will look at Container components, such as Toolbar, Panel, and Window to get an introduction to how Container components work. The following chapter will then be dedicated to a variety of layout options for flexible component arrangement. Later chapters will cover other types of controls, such as DataView, GridPanel, TreePanel, TabPanel, various form controls, and more. Ext.NET provides many controls and capabilities over what the underlying Ext JS provides. Ext.NET also extends many Ext JS components to enhance functionality or provide better integration with the server side of Ext.NET. As a result, it can be very valuable to learn about Ext JS. However, it is beyond the scope of this book to go into the Ext JS component hierarchy as well. Sencha's own blogs and documentation are quite detailed and growing quickly. Their own examples explorer is also very rich. Here are some suggested resources: Ext JS 4 First Look, Loiane Groner, PACKT Publishing, 2011 Ext JS 4 Web Application Development Cookbook, Stuart Ashworth, Andrew Duncam, PACKT Publishing, 2012 Ext JS code, documentation and examples: http://www.sencha.com/products/extjs/ Ext.NET Controls Overview [ 30 ] Buttons A number of Ext.NET features and capabilities will be introduced alongside these seemingly simple components. Examples of features that are common to many components include: • Setting icons • Client-side (JavaScript) event handlers • Server-side (via DirectEvents) event handlers There are many others, and these will be introduced in the following examples. AJAX event handling will also be covered in its own chapter later, but you will get a taste of it here. A simple button If you are using regular HTML, you can create buttons using either the