Ext.Net Web Application Development电子书

Ext.NET Web Application Development

Table of Contents

Ext.NET Web Application Development

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started with Ext.NET

An overview of Ext.NET

Ext.NET and its relationship with ASP.NET Web Forms and ASP.NET MVC

Ext JS

Comparing with other JavaScript libraries such as jQuery

From a web developer's point of view

Ext.NET from an ASP.NET application developer's point of view

Ext.NET and Ext JS versions

Prerequisites

When to use ExtJS/Ext.NET and when not to

Getting Ext.NET

Choosing the right Ext.NET license

Downloading Ext.NET

Compiling (if needed)

A walkthrough – creating a simple ASP.NET project with Ext.NET enabled

Creating the project and enabling Ext.NET

Running the sample Ext.NET page

What the sample page does

Ext.NET in the ASP.NET project

Ext.NET and Web.config

Ext.NET controls are registered in Web.config for you

A walkthrough – creating a simple ASP.NET MVC Project with Razor and Ext.NET enabled

Creating an MVC project and enabling Ext.NET

The sample Ext.NET page using MVC and Razor

Summary

2. Ext.NET Controls Overview

Control overview

Buttons

A simple button

Button with icon

Button with menu

Split button

Other button options

Events in Ext.NET

Listeners – client-side events

Passing the component ID around on the client side

Setting custom values on components.

Direct Events – server-side handlers for client-side events

MessageBus – inter-component messaging

Container components

Container

Toolbars and menus

Toolbars with various buttons

Overflowing toolbars

Nested menus

How did we know to use the date and color arguments in the select handlers?

Menus and form fields

Dynamically inserting menus and buttons

Panels

Windows

Tooltips

Complex components

Desktop

Charts

Calendars

Even more!

Summary

3. Layout with Ext.NET

Viewport

Border layout

Different ways to create the same components

Border layout from code

Mixing markup and code

Loading layout items via User Controls

The containing component does not have to be a Viewport

More than one item with the same region

Regions are not limited to Panels only

Weighted regions

Accordion layout

Panel subclasses as Accordion items

Layout combinations

Fit Layout

HBox layout

VBox layout

Reordering Panels

Centering a component

Many other layouts

Further resources and examples

Summary

4. AJAX with Ext.NET

AJAX with ASP.NET

UpdatePanel

Page methods

Other approaches in .NET

How this relates to Ext.NET

DirectEvents

DirectEvents on Ext.NET Controls

Passing additional parameters to the event

Sending custom data back to the client

Event masks

The App client-side namespace

Event confirmation

DirectEvents on ASP.NET Controls

DirectEvents on HTML Elements

DirectEvents dynamically generating new Ext.NET Components

DirectEvents invoking web services

DirectEvents invoking web services with parameters

DirectEvents invoking web services that return new Ext.NET components

DirectEvents invoking generic ASHX handlers

DirectEvents invoking ASP.NET MVC Controllers

Best server option? ASMX, ASHX, MVC, ASPX, WCF?

DirectMethods

Basic DirectMethod

Running JavaScript after the DirectMethod is invoked

Static DirectMethods for best performance

Returning custom types

Handling exceptions

Global AJAX operation handlers

By-passing the DirectMethod proxy

DirectMethods calling an ASP.NET MVC Controller

DirectMethods calling web services

JSON Serialization considerations with ASMX Web Services

DirectMethods calling generic ASHX handlers

DirectMethods on user controls

DirectMethods on ASP.NET MVC Controllers

Turning off the ID mode for DirectMethods

Controlling the rendering of dynamically generated controls

AJAX options specific to certain controls

Loading content with Panels

Component loader

Ultimate performance option: avoid AJAX!

Summary

5. Working with Data

XTemplates

Basic XTemplates

Basic XTemplates with repeated data

More XTemplate rendering options

Stores

Models

Proxies

Separation of concerns and loose coupling

DataView

Our first attempt

Preparing the data

The Store and Model in action

DataView to display the formatted data

Paging

Putting it altogether

Second attempt

Generic ASHX handler for AJAX paging

Using an AjaxProxy

Filtering and sorting

Handling selections in DataViews

Example using a PageProxy

Example using an ASP.NET data source control

More about DataViews

ComboBox

Define Store and Model with a ComboBox

Formatting the ComboBox with an XTemplate

Enabling store paging on a ComboBox

Using a server-side Proxy for the Store

Summary

6. Introducing GridPanels

GridPanel – overview

Simple grid

Column types

AJAX-based proxies

Paging

Client-side paging

Server-side paging

Filtering

Client-side filtering

Server-side filtering

Sorting

Client-side sorting

Server-side sorting

Grouping

Column summaries

Column summaries per group

Row expanding

Row expanding using templates

Row expanding using Ext.NET components

Selection models

Default row selection

Checkbox selection

Cell selection

Grid editing

Configuring columns to be editable

Cell editing

Committing changes

Automatically updating as you edit

Explicitly saving changes by letting the user click on a Save button

Paging while rows have been edited

Row editing

Other editing options

Many more GridPanel capabilities not covered here

Summary

7. Forms and Validation

Form fields – overview

TextField

Controlling field labels

Field icon

Default empty text

Field notes

Field indicator

Custom icons

Initial value

NumberField

TextArea

HtmlEditor

ComboBox

TimeField

DateField

TriggerField

DropDownField

Checkbox

Radio buttons

FileUploadField

Many more form fields

Form layout

Checkbox and Radio button grouping

Fieldsets

FormPanel

FieldDefaults

FieldContainer

Form validation

Constraining and guiding input

Customizing the appearance of validation messages

Validation messages using FieldContainers

Validation types

Custom validation VTypes

Remote validation

Validation events

Manually submitting a form

Binding Stores and Records to a form

Summary

8. Trees and Tabs with Ext.NET

TreePanel

TreePanel – overview

Asynchronous tree node loading

NodeID for asynchronous node requests

Using TreeStore to create nodes on the server

Expanding tree nodes

Data binding with TreeStore and ColumnModel

Custom node attributes and explicit TreeStore Models

Multiple fields and tree grids

What else can you do with TreePanels?

TabPanel

TabPanel – overview

Asynchronous tab loading

Useful tab features

Tabs rendered at the bottom

Plain tabs

TabScrollerMenu plugin

Tab menus

Using TabBar to add custom toolbar items

More TabPanel examples

Summary

9. Extending Ext.NET – Custom Controls and Plugins

Basic control builder

Example

Benefits of this approach

Drawbacks to this approach

Extending Ext.NET controls

Extending the Ext.NET class

Extending the Ext JS class

Embedding the resources

Declaring your embedded web resources

Adding your embedded resources to your Ext.NET component

Custom events

Defining the event in the JavaScript class

Defining the client-side event on the server side

Defining your custom listeners class

Using the custom listener in your custom component

Creating a custom DirectEvent

Passing properties to your JavaScript class

Using the custom component on an ASP.NET Web Form

Using your custom component in ASP.NET MVC (Razor)

A basic control renderer

Reusing Ext.NET's builder pattern for a richer custom MVC framework for your own application

Recap of steps to create a custom component

Scenario 1 – simple subclass, no custom events, no custom JavaScript or CSS

Scenario 2 – simple subclass, no custom events, but with custom JavaScript or CSS

Scenario 3 – subclass with custom Listeners and/or DirectEvents, and custom JavaScript/CSS

Component design considerations

Building more complex controls through composition

GenericComponent<T> – a quick alternative to wrap Ext JS ready Components

Declaring DirectMethods on custom components

Supporting ASP.NET Web Forms IPostBackDataHandler

Benefits of extending Ext.NET controls

Drawbacks of this approach

Using plugins

Benefits of this approach

Drawbacks of this approach

Plugins versus extending components

Summary

10. Troubleshooting and Debugging

Debugging and troubleshooting Ext.NET applications

Enabling debug mode scripts

Controlling Source Formatting

Browser developer tools

Cross-browser considerations

HTML doc types

Setting IE rendering mode

IE developer tools and taking advantage of rendering modes

IE10 support

IE 6 support

Browser console

Illuminations for Developers

JavaScript debuggers

Debugging requests

Getting support from Ext.NET

The overall principle–reproduce the problem in small, standalone code

Use a test project independent of your production code

Examples of what to cut from your sample

If you cannot reproduce the problem

Effort should pay off in other ways

Summary

Index