Sometimes,the simplest things can seem complicated.  Well, in this case, after struggling for a while, it turns out the simplest things can actually be pretty simple.  The application I’m building right now (with Sencha’s ExtJS and ASP.NET) is a simple log viewer.  My server base app uses NLog which does a great job of logging the errors, but the errors are all on my server and I need to see them.  So, hence I need a simple log viewer.  Here is what it looks like once it’s all done.

Notice that we have a toolbar that we can check a box in as well as a field to type some text into.  I’m going to assume that creating the windows, the grid, dropping the toolbars on the page (both paging and top toolbar) are something that you know how to do.  The only thing I’m really going to mention is how you go from a grid panel that pages correctly to one that pages correctly with some parameters being sent to the server.

So, it turns out all you have to do is assign an id to each of the controls on your top toolbar, create a beforeload store event where you retrieve the values from your toolbar, then set the store’s proxy extraParams values to be the filter parameters you want passed.  OK, that’s a mouthful so let me show it in steps.

1.  Assign id’s to the toolbar parameters. (screen shot of the checkbox below)

2.  Create a beforeload event in your store for the gridview and get the components you want

3.  Put some code in the beforeload even that gets these components, then sets the ExtraParams value associated with the stores proxy.

var checkboxerroronly = Ext.getCmp('checkboxerroronlyid');
var usernamefilter = Ext.getCmp('usernamefilterid').getValue();

var displayErrorOnly = checkboxerroronly.checked;
store.proxy.extraParams.errorsOnly = displayErrorOnly;
store.proxy.extraParams.username = usernamefilter;

4. And just run it!  If you look at your network traffic, you will see both the errorsOnly and username parameters passed on every page refresh and page forward and back.

Hope this helps!

(sorry, no source code for this one, just some tips in the middle of a project I’m doing)

In the first article, a very simple updater was build using Sencha’s ExtJS and Microsoft’s Entity Framework Code First.  The focus was really on the server side while the client side project was included for reference.  The client side app was barely discussed.  In this article, we are going to discuss in more detail what is happening on the client side and how the Sencha ExtJS JavaScript library helps us to implement these updates.

The Basics

Let’s start out with some basics rather than jump right in to the real project.   I think we can all assume the displaying of the data is pretty simple. We just create a store, add some fields, hook it up to a Ext.grid.Panel and set the store to autoload and it all just works.  Updating though does add a little more complexity and for that, we are going to add some structure.  So, let’s take a look at the very basics without any UI at all.

Just by way of reminders, we create two simple services in our project.  One that reads and the other that updates.  For the purpose of this article, those are the three (of four) CRUD operations we are going to implement (read,insert and update).  Let’s first implement those operations directly.  Below is a very straight forward JavaScript which basically represents a completely working ExtJS app with a single button in the viewport.  Here is the code below.

Ext.Loader.setConfig({ enabled: true });
Ext.require('Ext.container.Viewport');

Ext.application({
    name: 'AM',

    controllers: [
        'Users'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    xtype: 'button',
                    region: 'center',
                    text: 'Insert a Record',
                    handler: function () {
                        var writer = new Ext.data.JsonWriter({
                            type: 'json',
                            encode: false,
                            listful: true,
                            writeAllFields: true,
                            returnJson: true
                        });

                        var reader = new Ext.data.JsonReader({
                            totalProperty: 'total',
                            successProperty: 'success',
                            idProperty: 'Id',
                            root: 'Data',
                            messageProperty: 'message'
                        });

                        var proxy = new Ext.data.HttpProxy({
                            reader: reader,
                            writer: writer,
                            type: 'ajax',
                            api: {
                                read: '/UserInfo/Get',
                                create: '/UserInfo/Create',
                                update: '/UserInfo/Update',
                                destroy: '/UserInfo/Delete'
                            },
                            headers: {
                                'Content-Type': 'application/json; charset=UTF-8'
                            }
                        });

                        Ext.define('MyModel', {
                            extend: 'Ext.data.Model',
                            fields: ['Id', 'Name', 'Email'],
                            proxy: proxy
                        });

                        Ext.define('MyStore', {
                            extend: 'Ext.data.Store',
                            model: 'MyModel',
                            autoLoad: true,
                            paramsAsHash: true,
                            proxy: proxy
                        });

                        var myStore = Ext.create('MyStore', {
                        });

                        myStore.add({
                            Name: 'TestName',
                            Email: 'TestEmail@Test.com'
                        });

                        myStore.sync();
                    }
                }
            ]
        });
    }
});

Without going into to much detail, basically, what has been done above is a to create a simple model (myModel) which contains a JsonReader and JsonWriter and proxy of course. This model has a couple fields in it (Id,Name and Email), then a simple store is created that uses this model called myStore.  Once this store has been created, we simply call the store’s “add” method with a config object that represents the data, then calling sync() on that store forces an insert (or create) to be executed through the proxy.  If I look at Chrome’s JavaScript debugger (network tab), you can see from the picture below that indeed, the servers UserInfo/Create method has been called passing in the parameters Name and Email.

It’s important to understand these steps because we will be using the store and model in a similar way when we update the data in our next section.

Implementation in Grid and Editor Panel

We are using the ExtJS MVC architecture for this app so all our procedural code is in the controller.  For the Ext.grid.Panel, all we have for the view is the following (app/view/List.js).

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',
    store: 'Users',

    columns: [
    { header: 'Name', dataIndex: 'Name', flex: 1 },
    { header: 'Email', dataIndex: 'Email', flex: 1 }
    ]
});

Then, in our controller (app/controller/Users.js) we have the working code that actually does the editing and updating of the record.  the code is below:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    views: ['user.Edit', 'user.List'],
    refs: [
        {
            ref: 'usersPanel',
            selector: 'panel'
        }
    ],
    init: function() {
        this.control({
            'viewport > userlist dataview': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
    editUser: function(grid, record) {
        var edit = Ext.create('AM.view.user.Edit').show();

        edit.down('form').loadRecord(record);
    },
    updateUser: function(button) {
        var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
        record.set(values);
        win.close();
        this.getUsersStore().sync();
    }
});

Basically, this follows the exact same method we described above for implementing the CRUD.  Note getUsersStore().sync.  This does the same thing as shown above to force the appropriate call the back end.

Remarks

Hope this helps give you a little more understanding into updating with the ExtJS library. If you are looking for the source, it’s in part 1 of this series.

We know we need to create a form panel, but first, let’s code the double click event in the grid that brings it up.  To do this, we add the DoubleClick event to the Grid Panel and then, using the “record” passed in, we pass that to our new Windows we are about to create.  below is some code I wrote to do this (3 lines).

Next, let’s go into designer and make a simple form that is basically a top level window that has a form panel as a client, then the form panel has a fieldset, and that fieldset has 3 textfields.  Very straight forward and what you end up getting from SA (Sencha Architect) looks like the following.  I won’t go through the drag and drops to make it, but it is pretty straight forward.  It took me about 30 seconds.

The code it created looks like the following (which also contains the load event I entered myself and is pictured separately below it.

Ext.define('MyApp.view.AddressUpdateWindow', {
    extend: 'Ext.window.Window',

    height: 250,
    width: 400,
    title: 'Address Book Update',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    bodyPadding: 10,
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'My Fields',
                            items: [
                                {
                                    xtype: 'textfield',
                                    name: 'City',
                                    fieldLabel: 'City',
                                    anchor: '100%'
                                },
                                {
                                    xtype: 'textfield',
                                    name: 'State',
                                    fieldLabel: 'State',
                                    anchor: '100%'
                                },
                                {
                                    xtype: 'textfield',
                                    name: 'Zip',
                                    fieldLabel: 'Zip',
                                    anchor: '100%'
                                }
                            ]
                        }
                    ],
                    listeners: {
                        afterrender: {
                            fn: me.onFormAfterRender,
                            scope: me
                        }
                    }
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            handler: function(button, event) {
                                debugger;
                            },
                            text: 'Save'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onFormAfterRender: function(abstractcomponent, options) {

        var recordData =
        abstractcomponent.up().recordData;

        abstractcomponent.getForm().setValues(
        recordData
        );

        //abstractcomponent.getForm().setValues({
        //    City: recordData.City,
        //    State: recordData.State,
        //    Zip: recordData.Zip
        //});

    }

});

Below is the code I wrote which you can see incorporated in the code above.  Notice the lines I commented out.  I just did this to show what is really happening, but I condensed it a little in my real JavaScript.

So basically, that’s it.  We created a double click event in a grid panel and from that we opened a pop up form and populated it with data.  Very straight forward.

HTH’s.

Introduction

The Final Project when running:

What Is Sencha’s MVC Application

I don’t want to spend a lot of time here explaining what Sencha does really well in there article but I feel a short explanation is helpful  (http://www.sencha.com/learn/the-mvc-application-architecture/).

So, here we go.  Basically ExtJS is a client side JavaScript framework which allows you to build the full user experience in JavaScript.  That is, all the grids, forms, tabs, etc. are all generated by a client side JavaScript library.  All that goes up and down from the server is JSON (after the JavaScript framework and code and assets are downloaded).  This means that on the client side, all the code for displaying a grid for example, reaching out for data, pushing data changes, etc. all need to be done on the client (browser).  Sencha’s ExtJS MVC pattern helps organize all these functions into a set of directories and functions that make building apps scalable.

Below is what Sencha’s app in Visual Studio looks like:

ASP.NET Implementation

The major change to the stock MVC app from Sencha is to change there Store class.  Here is the new Store Class.

And the JavaScript itself:

 1: var writer = new Ext.data.JsonWriter({

 2:     type: 'json',

 3:     encode: false,

 4:     listful: true,

 5:     writeAllFields: true,

 6:     returnJson: true

 7: });

 8:

 9: var reader = new Ext.data.JsonReader({

 10:     totalProperty: 'total',

 11:     successProperty: 'success',

 12:     idProperty: 'Id',

 13:     root: 'Data',

 14:     messageProperty: 'message'

 15: });

 16:

 17: var proxy = new Ext.data.HttpProxy({

 18:     reader: reader,

 19:     writer: writer,

 20:     type: 'ajax',

 21:     api: {

 22:         read: '/UserInfo/Get',

 23:         create: '/UserInfo/Create',

 24:         update: '/UserInfo/Update',

 25:         destroy: '/UserInfo/Delete'

 26:     },

 27:     headers: {

 28:         'Content-Type': 'application/json; charset=UTF-8'

 29:     }

 30: });

 31:

 32: Ext.define('AM.store.Users', {

 33:     extend: 'Ext.data.Store',

 34:     model: 'AM.model.User',

 35:     autoLoad: true,

 36:     paramsAsHash: true,

 37:     proxy: proxy

 38: });

The primary change is to the reader.  Notice that the API’s are defined now to point the ASP.NET controller UserInfo.  Also, the column names have been changed to start with uppercase to be consistent with public properties in ASP.NET.  That is, id,name and email are now Id,Name and Email.

Now, we need to implement the controller on the ASP.NET.  Basically, we implement GET on the read and POST on the write.  The controller class in c# is as follows: (Visual Studio Solution Explorer first, then the controller code itself)

public class UserInfoController : Controller{    public JsonResult Get(int? start, int? limit)    {        using (var db = new Db())        {            start = start.HasValue ? start.Value : 0;            limit = limit.HasValue ? limit.Value : Int32.MaxValue;            int cnt = db.Users.Count();            var recs = db.Users.OrderBy(a => a.Id).                Skip(start.Value).Take(limit.Value).ToList();            return Json(new                            {                                Data = recs,                                total = cnt                            }, JsonRequestBehavior.AllowGet);        }    }

    [HttpPost]    public JsonResult Update(UserInfo data)    {        bool success = false;        string message = "no record found";        if (data != null && data.Id > 0)        {            using (var db = new Db())            {                var rec = db.Users.Where(a => a.Id == data.Id).                    FirstOrDefault();                rec.Name = data.Name;                rec.Email = data.Email;                db.SaveChanges();                success = true;                message = "Update method called successfully";            }        }

        return Json(new                        {                            data,                            success,                            message                        });    }}

Notice that the Get method returns a JsonResult.  This conveniently returns the data in JSON format.  Part of the secret sauce here is in the Db().  This app used Microsoft’s new EntityFamework CodeFirst. Following the standard CodeFirst model, we implement the simple c# code and it automagically creates the data tables (and data) in the database (my example uses SqlServer CE because it can be run without installing any database on your windows computer, the code is all in-memory).

If we look at the Model on the ASP.NET MVC3 side, you’ll notice the c# attributes and the DbContext that do the magic for you.  There are some excellent getting started guides on the web including one from Julie Lerman (walk through video: http://msdn.microsoft.com/en-us/data/gg715119 and http://msdn.microsoft.com/en-us/data/gg685467 ).

Here is the Visual Studio Solution Explorer for the model:

and here is the model code in c#:

namespace SenchaDesignerExtension.Models{    public class UserInfo    {        [Key]        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]        public int Id { get; set; }

        [MaxLengthAttribute(256)]        public string Email { get; set; }

        [MaxLengthAttribute(256)]        public string Name { get; set; }

    } }

and the actual repository which is in the file DbContext.cs (screen shot for brevity below, the code is attached in the example.

Hope you can make it.  Details are here:

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/events/28760211/

Also, if you have not registered for our code camp, being hold October 8th and 9th at Foothill College for the 6th year in a row, please do so now at our registration page.

Blogged here and available here

Let us know what you think!

For my final of 3 presentations at DevConnections Orlando is about building a hugely performant web application with html5 storage.  The app we built was a simple photo viewer that let you first look at hour images on line, then view them being pulled from local storage.  Here are a couple screen shots of what we built:

And, here is the Visual Studio 2010 Project File:

To build fully-featured web applications that support complex interaction in a reasonable amount of time requires a high-end JavaScript library. Someday, maybe JQueryUI will be good for this, but for now, the choices are few and include ExtJS, Dojo, YUI and a handful of others. This session will use ExtJS as the example. We will use Microsoft’s ASP.NET MVC as the data / CRUD layer and from that, we will build a typical LOB (line of business) application using complex UI elements. Those elements include layout managers, data grids, extensive validation, spinner controls and other advanced UI features. To get an idea of what I’m talking about, spend five minutes looking at the examples on the ExtJS web site demonstrating these advanced web UI features http://www.sencha.com/products/js/. You will be convinced that spending hundreds of hours trying to build something not nearly as well done as this is a waste of time when there are such excellent libraries already built for you.

The source attached below for my demos.

Final ExtJS4 JavaScript (that didn’t quite work, but working now)

// Load dependenciesExt.require([    'Ext.data.*',    'Ext.button.*',    'Ext.form.*']);

Ext.onReady(function () {

    // Date renderer    var dateConvert = function (val, record) {        if (val.split('(').length == 2) {            var dateObj = new Date(parseInt(val.substr(6)));            return Ext.util.Date.format(dateObj, 'm/d/Y');        } else {            return val;        }

    }

    Ext.regModel('Users', {

        fields: [            { name: 'Id', type: 'int' },            { name: 'Username' },            { name: 'CreationDate' },            { name: 'FirstName' },            { name: 'LastName' },            { name: 'PlanExpirationDate' }        ],        // Proxy        proxy: {            type: 'ajax',            url: '/Users/JsonData',            api: {                read :    '/Users/JsonData',                create :  '/Users/Create',                update :    '/Users/Edit',                destroy : '/Users/Delete'            },            // Json Reader            reader: {                type: 'json',                idProperty: 'Id',                totalProperty: 'total',                root: 'data'            },            writer: {                type: 'json',                encode: false,                listful: true,                writeAllFields: true            },            headers: { 'Content-Type': 'application/json; charset=UTF-8' }                            }

    });

    var usersStore = new Ext.data.Store({        model: 'Users',        autoLoad: true,        pageSize: 10    });

    var gridForm = Ext.create('Ext.form.FormPanel', {        id: 'userFormPanel',        frame: true,        title: 'Users Data',        store: usersStore,        bodyPadding: 5,        width: 910,        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {            labelAlign: 'left',            msgTarget: 'side'        },

        items: [{            columnWidth: 0.65,            xtype: 'gridpanel',            id: 'usersGrid',            store: usersStore,            height: 410,            title: 'Users',

            headers: [        {            text: 'User Name',            flex: 1,            sortable: true,            dataIndex: 'Username'        },        {            text: 'CreationDate',            width: 100,            sortable: true,            renderer: dateConvert,            dataIndex: 'CreationDate'        },        {            text: 'First Name',            width: 100,            sortable: true,            dataIndex: 'FirstName'        },        {            text: 'Last Name',            width: 100,            sortable: true,            dataIndex: 'LastName'        },        {            text: 'Plan Expiration Date',            width: 120,            sortable: true,            renderer: dateConvert,            dataIndex: 'PlanExpirationDate'        }    ],

    listeners: {        selectionchange: function (model, records) {            if (records[0]) {                var recordToLoad = {                    Username: records[0].data.Username,                    CreationDate: dateConvert(records[0].data.CreationDate),                    FirstName: records[0].data.FirstName,                    LastName: records[0].data.LastName,                    PlanExpirationDate: dateConvert(records[0].data.PlanExpirationDate)                }                this.up('form').getForm().setValues(recordToLoad);            }        }    },    bbar: new Ext.PagingToolbar({        store: usersStore    })        }, {            columnWidth: 0.35,            margin: '0 0 0 10',            bodyStyle: {                margin: '4px'            },            xtype: 'form',            id: 'userForm',            title: 'Add / Edit User Details',            defaults: {                width: 260,                labelWidth: 120,                margin: '7px'            },            defaultType: 'textfield',            items: [{                fieldLabel: 'User Name',                name: 'Username'            }, {                xtype: 'datefield',                fieldLabel: 'Creation Date',                name: 'CreationDate'            }, {                fieldLabel: 'First Name',                name: 'FirstName'            }, {                fieldLabel: 'Last Name',                name: 'LastName'            }, {                xtype: 'datefield',                fieldLabel: 'Plan Expiration Date',                name: 'PlanExpirationDate'            }],            buttons: [{                text: 'Update Record',                scale: 'medium',                handler: function (btn, e) {                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();                    if (userSelectionModel.hasSelection()) {                        // get the form                        var formCmp = Ext.getCmp('userForm');                        // get the form field values                        var formValues = formCmp.getForm().getValues();                        // get the selected record                        var recordSelection = userSelectionModel.getLastSelected();                        // update the record with the form fields                        recordSelection.set(formValues)                        // sync store                        usersStore.sync();                    }                }            }, {                text: 'Add As New Record',                scale: 'medium',                handler: function (btn, e) {                    // get the form                    var formCmp = Ext.getCmp('userForm');                    // get the form field values                    var formValues = formCmp.getForm().getValues();                    // add to the the store                    usersStore.add(formValues);                    // sync with the store                    usersStore.sync();                }            }, {                text: 'Delete Record',                scale: 'medium',                handler: function (btn, e) {                    // get the user grid selection model                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();                    // check if there's a selection                    if (userSelectionModel.hasSelection()) {                        // remove the selected record                        usersStore.remove(userSelectionModel.getLastSelected());                        usersStore.sync();                    }                }            }]        }],        renderTo: 'extjs-grid'    });

});

To start with, they have lots and lots of examples covering a lot more areas. There is a lot more architectural discussions that really help in building high end ExtJS applications. Chapter 13 for example is completely devoted to code reuse (extending ExtJS).  New features such as Ext.Direct are discussed extensively as well as the new graphics library (but don’t take that too seriously because it is being replaced with a non-flash version in ExtJS 4.0 which is coming out soon).

Overall, I give this book a solid A.  I’m even fortunate enough to get mine signed by Shea Frederick, one of the authors (see picture below).

Hope you get a chance to read this great book!

The technology pairing I’ve chosen is Microsoft’s .Net platform with MVC on the server, and ExtJS on the client.  Though it’s possible to still use ExtJS with standard html/aspx pages, I’ve found the best combination is to use 100% JavaScript on the client (ExtJS) and have all the server side technology be 100% service based.  I’ve used LINQ2SQL extensively as well as Entity Framework in the latest Visual Studio 2010 release.

The learning curve was quite steep to actually be able to efficiently build highly flexible, highly scalable applications using these technologies, but now that I know it, I wouldn’t have it any other way.

I’m considering putting together a series of 4 Day Classes around the country (or even world) that would basically teach people the methods and patterns I’ve learned and essentially leap frog a development team into being able to quickly do what it has taken me years to figure out.  I’ve been fortunate enough to know the top 1% instructors and I’m sure with the right incentive, can get them to join me in both putting together these classes as well as teaching them.

So, my question is:

[poll id=2]

I really appreciate your feedback.  If I go down this path, it will be a lot of work and it would be nice to know if people are really interested.  I know for myself, I’ would have gone to something like this 2 years ago and it would have saved me a lot of time.

Thanks for your feedback.

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/calendar/12527913/

Most of the ExtJS team stayed until after 9.  The team introduced themselves to start the event, then we got presentations of all kind of cool upcoming technologies from ExtJS that we promised not share because it was top secret.

I’ve posted more pictures to FaceBook at the following URL:  Click Here  I believe you will have to create a facebook account if you don’t have one to view them.  It would be great if everyone can Tag themselves so next time we will all know each other.

Abe invited us all back so I’m sure we will have the chance to all see each other again.  Here are a couple shots, including the rock band at the end of he meeting starring Tommy.

(above picture courtesy of Mats)

Mats and I met today in Palo Alto for lunch to talk about the upcoming Meetup January 7th (in two weeks) at ClickTime.  We’re looking forward to both Mats presenting his Ext Scheduler, seeing some cool tricks from a surprise Ext Core Developer, and of course seeing old friends.

We also talked about Mats incorporating his schedule component into the Silicon Valley Code Camp Web site.  We had 145 sessions over 2 days so it’s a target rich environment for the schedule component.  I can’t wait to see how it looks on the site.  Stay tuned for more blog posts.

And here is Mats!

My friend Mats Bryntse, who you may know from our our San Francisco ExtJS Meetup group based in San Francisco, has written a very pretty impressive scheduling component built for the Ext JS framework.

http://www.ext-scheduler.com/examples.html

You can choose between several different time resolutions and easily change the styling since all items shown in the grid are created by a standard Ext Template. The interaction is pretty straight forward, to create a new item in the grid, you just click somewhere and drag. Can’t be any easier. To modify an item you can both resize and use drag and drop. If you are looking for a way to schedule your resources I recommend you check this UX out!

Mats is a great ExtJS developer who builds the highest quality stuff so definitely worth your time if you need a component like this.

Good Luck!

Basically, the way it works is you create an account on their server, then for firefox you download a plugin, and for IE you download an extension.  Like magic, your bookmarks just stay in sync!

Another nice things is you can manager your book marks on line.  The Xmarks folks used ExtJS (my favorite JavaScript library to build their interface, and they did a very nice job).

One thing I find a little unusual is it asked for a $5 donation.  I noticed that Mitchell Kapor is the founder (also inventor of Lotus in 1982).  I have trouble believing he needs my $5.

Here is the material for the first presentation:

Build Blazingly Fast ASP.NET Apps with 100% Clientside UI ExtJS

Intermediate

Need a web application that has the responsiveness and interactivity of a forms app but still looks and feels like a web? One of the best kept secrets (at least to the Microsoft community) is ExtJS. It’s a different paradigm then we are all use to, but the results are spectacular. Take a look at this url and you will see as well as learn how to do this yourself. The hardest part is shuttling the data back and forth. A lot of this session will be talking about how to do a real world app that does this. Once you go this way, you’ll be gone from serverside forms for almost ever.

Presentation Files Download

 

Building High Performance ASP.NET Web Applications

Intermediate

Topics will include appropriate use of Cache and Session State, as well as how and when to use them. Viewstate management and methods to minimize its use will be discussed. Code to pop up a warning when a threshold is met in development will be shown. When and how to take advantage of Server Farms will be discussed, as well as trouble shooting techniques to find problems. The evils of Server Affinity, as well as a common pattern for caching database queries will be shown to be wrong. Time permitting, we will talk about using Microsoft’s Ajax.asp.net with UpdatePanel and webservices and how these affect performance and scalability.

 

Presentation Files Download

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorEAddDeleteToolbar.html

For me, it was a long day.  I flew home from Chicago in the morning, went to work in the afternoon, and did the presentation that night.  I decided to upgrade the source to the prelease V3 on the airplane which turned out to be a mistake because some of the demos did not quit work as I expected.  That, combined with I had forgotten to plug my notebook in before the presentation and when I realized that (by almost running out of battery), I plugged my computer in and it immediately blue screened.  Arg. Not what you really want when you have all your windows open and in demo mode.  At least that was the end of m powerpoint screen.  Who needs that anyhow.

Several people asked for the example code I showed.  It’s not that well organized and it’s using a pre-release of ExtJS version 3.0. With those excuses pre-made, here is the code:

Finally, some more pictures…

Thanks to Bay.Net locally lead by Kim Greenlee for sponsoring the event, Thanks to JetBrains for providing free copies of IDEA for doing Great JavaScript editing, Thanks to the authors of “Learning ExtJS” for donating a couple free books, and thanks to ExtJS for giving a free developer license.

Lots of great feedback from the group.  Here are some pictures of us.  ClickTime provided pizza and soda (and also BTW, is looking for a great ExtJS/JavaScript/.Net engineer).

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/calendar/10302891/

http://msdn.microsoft.com/en-us/library/aa478947.aspx

My plan is to do a progression where I start with a trivial GridPanel, then work myself in 5 steps to a full working membership editor that looks like this:

If you want to to run the code I will be explaining tonight, here are some links:

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorASimpleGrid.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorBMoreGrid.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorCMoreGridWithPaging.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorDMoreGridEditing.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorEAddDeleteToolbar.html

If you want a more complete demonstration of ExtJS in general along with more details of the code, I’m presenting a full length version of this at he Bay.Net Meeting in Microsoft next Wednesday evening.  Here are the full details.  These events are both community events are free.

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=378&mid=49

Hope to see you at one of the events!

<script type="text/javascript" language="javascript" >

    ASPWeb.newsGrid.loadTypeId = 229490;

    ASPWeb.newsGrid.init();

</script>

To put the same code in, but substitute the loadTypeId with something meanful, here is the C# code you need to put in your Page_Load C# code.

  protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                LabelEntityType.Text = EntityTypeId.ToString();

                LabelEntityId.Text = EntityId.ToString();

            }

            // The JavaScript needs to be registed on every post back.  Not just first time.

            // Define the name and type of the client scripts on the page.

            const string csname1 = "LoadDetailsGridScript";

            Type cstype = this.GetType();

            // Get a ClientScriptManager reference from the Page class.

            ClientScriptManager cs = Page.ClientScript;

            // Check to see if the startup script is already registered.

            if (!cs.IsStartupScriptRegistered(cstype, csname1))

            {

                //ASPWeb.newsGrid.loadTypeId = 229490;

                //ASPWeb.newsGrid.init();

                const string cstext1 = 

                    "ASPWeb.newsGrid.EntityId = {0};ASPWeb.newsGrid.EntityTypeId = 1; ASPWeb.newsGrid.init();";

                cs.RegisterStartupScript(cstype, csname1, String.Format(cstext1, LabelEntityId.Text), true);

            }

        }

I found this code on line at this MSDN location.

http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx

Hope this Helps!!!

Come hear about how to see ExtJS integrated with ASP.NET for awesome Membership and Profile Management!  I will speaking at the Microsoft Office at a meeting of Bay.Net Users Group.

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=378&mid=49

ASP.NET: Membership with Profile and High Performance ExtJS JavaScript Interface

When: 

Wednesday, 5/20/2009 at 6:30 PM

Where: 

Microsoft Office, 835 Market Street, Suite 700, San Francisco

Event Description

In this session, we will demonstrate building a super rich JavaScript interface to the standard ASP.NET Membership and Profile services. That is, built into ASP.NET are wonderful providers that allow you to validate and store user credentials typically to a database. It also lets you store other information such as pictures, first and last names, as well as anything else you may want to store. In this session we will build a highly performing, 100% JavaScript UI to maintain hundreds of thousands of users. As part of this solution, techniques for using REST based services to access this information will be presented. Once you see this, it will be hard to ever use web forms again.