You are previewing Ext.NET Web Application Development.
O'Reilly logo
Ext.NET Web Application Development

Book Description

If you’re looking to build .NET based rich internet applications, look no further. This is the ideal primer that takes you step by step through the practical aspects of combining Ext.NET and Ext JS, and much more.

  • Build rich internet applications using the power of Ext.NET controls

  • Learn how Ext.NET leverages Sencha’s popular Ext JS JavaScript framework to provide a full client-server web development experience

  • Full of examples and tips, with clear step-by-step instructions

  • In Detail

    To build a rich internet application, you need to integrate a powerful client side JavaScript framework with a server side framework. Ext.NET achieves this by integrating Sencha’s Ext JS framework with the power of ASP.NET. The result – a sophisticated framework offering a vast array of controls, layout, and powerful AJAX and server bindings, which can be used to build rich, highly usable web applications.

    "Ext.NET Web Application Development" shows you how to build rich applications using Ext.NET. Examples guide you through Ext.NET’s various components using both ASP.NET Web Forms and MVC examples. You will also see how Ext.NET handles data binding and server integration. You will also learn how to create reusable components and put them together in great looking applications.

    This book guides you through the various Ext.NET components and capabilities to enable you to create highly usable Ext.NET components and web applications.

    You will learn about various UI components and numerous layout options through examples. You will see how the AJAX architecture enables you to create powerful data-oriented applications easily. This book will also teach you how to create reusable custom components to suit your needs.

    "Ext.NET Web Application Development" shows you how to create rich and usable applications using Ext.NET through numerous examples.

    Table of Contents

    1. Ext.NET Web Application Development
      1. Table of Contents
      2. Ext.NET Web Application Development
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Getting Started with Ext.NET
        1. An overview of Ext.NET
          1. Ext.NET and its relationship with ASP.NET Web Forms and ASP.NET MVC
          2. Ext JS
            1. Comparing with other JavaScript libraries such as jQuery
            2. From a web developer's point of view
          3. Ext.NET from an ASP.NET application developer's point of view
          4. Ext.NET and Ext JS versions
          5. Prerequisites
          6. When to use ExtJS/Ext.NET and when not to
        2. Getting Ext.NET
          1. Choosing the right Ext.NET license
          2. Downloading Ext.NET
          3. Compiling (if needed)
        3. A walkthrough – creating a simple ASP.NET project with Ext.NET enabled
          1. Creating the project and enabling Ext.NET
          2. Running the sample Ext.NET page
          3. What the sample page does
          4. Ext.NET in the ASP.NET project
            1. Ext.NET and Web.config
            2. Ext.NET controls are registered in Web.config for you
        4. A walkthrough – creating a simple ASP.NET MVC Project with Razor and Ext.NET enabled
          1. Creating an MVC project and enabling Ext.NET
          2. The sample Ext.NET page using MVC and Razor
        5. Summary
      9. 2. Ext.NET Controls Overview
        1. Control overview
        2. Buttons
          1. A simple button
          2. Button with icon
          3. Button with menu
          4. Split button
          5. Other button options
        3. Events in Ext.NET
          1. Listeners – client-side events
            1. Passing the component ID around on the client side
            2. Setting custom values on components.
          2. Direct Events – server-side handlers for client-side events
          3. MessageBus – inter-component messaging
        4. Container components
          1. Container
          2. Toolbars and menus
            1. Toolbars with various buttons
            2. Overflowing toolbars
            3. Nested menus
              1. How did we know to use the date and color arguments in the select handlers?
            4. Menus and form fields
            5. Dynamically inserting menus and buttons
          3. Panels
          4. Windows
          5. Tooltips
        5. Complex components
          1. Desktop
          2. Charts
          3. Calendars
        6. Even more!
        7. Summary
      10. 3. Layout with Ext.NET
        1. Viewport
        2. Border layout
          1. Different ways to create the same components
            1. Border layout from code
            2. Mixing markup and code
            3. Loading layout items via User Controls
          2. The containing component does not have to be a Viewport
          3. More than one item with the same region
          4. Regions are not limited to Panels only
          5. Weighted regions
        3. Accordion layout
          1. Panel subclasses as Accordion items
          2. Layout combinations
        4. Fit Layout
        5. HBox layout
        6. VBox layout
          1. Reordering Panels
          2. Centering a component
        7. Many other layouts
        8. Further resources and examples
        9. Summary
      11. 4. AJAX with Ext.NET
        1. AJAX with ASP.NET
          1. UpdatePanel
          2. Page methods
          3. Other approaches in .NET
          4. How this relates to Ext.NET
        2. DirectEvents
          1. DirectEvents on Ext.NET Controls
            1. Passing additional parameters to the event
            2. Sending custom data back to the client
            3. Event masks
            4. The App client-side namespace
            5. Event confirmation
          2. DirectEvents on ASP.NET Controls
          3. DirectEvents on HTML Elements
          4. DirectEvents dynamically generating new Ext.NET Components
          5. DirectEvents invoking web services
          6. DirectEvents invoking web services with parameters
          7. DirectEvents invoking web services that return new Ext.NET components
          8. DirectEvents invoking generic ASHX handlers
          9. DirectEvents invoking ASP.NET MVC Controllers
          10. Best server option? ASMX, ASHX, MVC, ASPX, WCF?
        3. DirectMethods
          1. Basic DirectMethod
          2. Running JavaScript after the DirectMethod is invoked
          3. Static DirectMethods for best performance
          4. Returning custom types
          5. Handling exceptions
          6. Global AJAX operation handlers
          7. By-passing the DirectMethod proxy
          8. DirectMethods calling an ASP.NET MVC Controller
          9. DirectMethods calling web services
            1. JSON Serialization considerations with ASMX Web Services
          10. DirectMethods calling generic ASHX handlers
          11. DirectMethods on user controls
          12. DirectMethods on ASP.NET MVC Controllers
          13. Turning off the ID mode for DirectMethods
          14. Controlling the rendering of dynamically generated controls
        4. AJAX options specific to certain controls
          1. Loading content with Panels
          2. Component loader
        5. Ultimate performance option: avoid AJAX!
        6. Summary
      12. 5. Working with Data
        1. XTemplates
          1. Basic XTemplates
          2. Basic XTemplates with repeated data
          3. More XTemplate rendering options
        2. Stores
          1. Models
          2. Proxies
          3. Separation of concerns and loose coupling
        3. DataView
          1. Our first attempt
            1. Preparing the data
            2. The Store and Model in action
            3. DataView to display the formatted data
            4. Paging
            5. Putting it altogether
          2. Second attempt
            1. Generic ASHX handler for AJAX paging
            2. Using an AjaxProxy
            3. Filtering and sorting
            4. Handling selections in DataViews
            5. Example using a PageProxy
            6. Example using an ASP.NET data source control
          3. More about DataViews
        4. ComboBox
          1. Define Store and Model with a ComboBox
          2. Formatting the ComboBox with an XTemplate
          3. Enabling store paging on a ComboBox
          4. Using a server-side Proxy for the Store
        5. Summary
      13. 6. Introducing GridPanels
        1. GridPanel – overview
        2. Simple grid
        3. Column types
        4. AJAX-based proxies
        5. Paging
          1. Client-side paging
          2. Server-side paging
        6. Filtering
          1. Client-side filtering
          2. Server-side filtering
        7. Sorting
          1. Client-side sorting
          2. Server-side sorting
        8. Grouping
        9. Column summaries
          1. Column summaries per group
        10. Row expanding
          1. Row expanding using templates
          2. Row expanding using Ext.NET components
        11. Selection models
          1. Default row selection
          2. Checkbox selection
          3. Cell selection
        12. Grid editing
          1. Configuring columns to be editable
          2. Cell editing
            1. Committing changes
            2. Automatically updating as you edit
            3. Explicitly saving changes by letting the user click on a Save button
            4. Paging while rows have been edited
          3. Row editing
          4. Other editing options
        13. Many more GridPanel capabilities not covered here
        14. Summary
      14. 7. Forms and Validation
        1. Form fields – overview
          1. TextField
            1. Controlling field labels
            2. Field icon
            3. Default empty text
            4. Field notes
            5. Field indicator
            6. Custom icons
            7. Initial value
          2. NumberField
          3. TextArea
          4. HtmlEditor
          5. ComboBox
          6. TimeField
          7. DateField
          8. TriggerField
          9. DropDownField
          10. Checkbox
          11. Radio buttons
          12. FileUploadField
          13. Many more form fields
        2. Form layout
          1. Checkbox and Radio button grouping
          2. Fieldsets
          3. FormPanel
          4. FieldDefaults
          5. FieldContainer
        3. Form validation
          1. Constraining and guiding input
          2. Customizing the appearance of validation messages
            1. Validation messages using FieldContainers
          3. Validation types
            1. Custom validation VTypes
            2. Remote validation
          4. Validation events
        4. Manually submitting a form
        5. Binding Stores and Records to a form
        6. Summary
      15. 8. Trees and Tabs with Ext.NET
        1. TreePanel
          1. TreePanel – overview
          2. Asynchronous tree node loading
            1. NodeID for asynchronous node requests
            2. Using TreeStore to create nodes on the server
            3. Expanding tree nodes
          3. Data binding with TreeStore and ColumnModel
            1. Custom node attributes and explicit TreeStore Models
            2. Multiple fields and tree grids
          4. What else can you do with TreePanels?
        2. TabPanel
          1. TabPanel – overview
          2. Asynchronous tab loading
          3. Useful tab features
            1. Tabs rendered at the bottom
            2. Plain tabs
            3. TabScrollerMenu plugin
            4. Tab menus
            5. Using TabBar to add custom toolbar items
            6. More TabPanel examples
        3. Summary
      16. 9. Extending Ext.NET – Custom Controls and Plugins
        1. Basic control builder
          1. Example
          2. Benefits of this approach
          3. Drawbacks to this approach
        2. Extending Ext.NET controls
          1. Extending the Ext.NET class
          2. Extending the Ext JS class
          3. Embedding the resources
            1. Declaring your embedded web resources
            2. Adding your embedded resources to your Ext.NET component
          4. Custom events
            1. Defining the event in the JavaScript class
            2. Defining the client-side event on the server side
              1. Defining your custom listeners class
              2. Using the custom listener in your custom component
            3. Creating a custom DirectEvent
          5. Passing properties to your JavaScript class
          6. Using the custom component on an ASP.NET Web Form
          7. Using your custom component in ASP.NET MVC (Razor)
            1. A basic control renderer
            2. Reusing Ext.NET's builder pattern for a richer custom MVC framework for your own application
          8. Recap of steps to create a custom component
            1. Scenario 1 – simple subclass, no custom events, no custom JavaScript or CSS
            2. Scenario 2 – simple subclass, no custom events, but with custom JavaScript or CSS
            3. Scenario 3 – subclass with custom Listeners and/or DirectEvents, and custom JavaScript/CSS
          9. Component design considerations
            1. Building more complex controls through composition
            2. GenericComponent<T> – a quick alternative to wrap Ext JS ready Components
            3. Declaring DirectMethods on custom components
            4. Supporting ASP.NET Web Forms IPostBackDataHandler
          10. Benefits of extending Ext.NET controls
          11. Drawbacks of this approach
        3. Using plugins
          1. Benefits of this approach
          2. Drawbacks of this approach
        4. Plugins versus extending components
        5. Summary
      17. 10. Troubleshooting and Debugging
        1. Debugging and troubleshooting Ext.NET applications
          1. Enabling debug mode scripts
          2. Controlling Source Formatting
        2. Browser developer tools
          1. Cross-browser considerations
            1. HTML doc types
            2. Setting IE rendering mode
            3. IE developer tools and taking advantage of rendering modes
            4. IE10 support
            5. IE 6 support
          2. Browser console
          3. Illuminations for Developers
          4. JavaScript debuggers
          5. Debugging requests
        3. Getting support from Ext.NET
          1. The overall principle–reproduce the problem in small, standalone code
          2. Use a test project independent of your production code
          3. Examples of what to cut from your sample
          4. If you cannot reproduce the problem
          5. Effort should pay off in other ways
        4. Summary
      18. Index