Mixing ASP.NET architecture with Sencha Ext JS MVC architecture

Question

Below is the JavaScript file which is the root application file of my extjs 4 MVC application.

I followed these instructions exactly, and used IIS 7 as my web server:
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture

And followed these instructions to configure IIS for the framework:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858

I'd like to take an ASP.NET user control (ascx file) and add it to my page. It's already registered, but it seems as though the Sencha framework takes over and ignores what I have in my page. I simply took the index.html file they have in the MVC tutorial and made it an aspx page and made some minor tweaks. How can I make the control show up? If that's not possible, do you recommend me referencing this app.js file (and rename it control_x.js instead of app.js) inside of an ascx file and then stick that user controls (ascx) and the other (that's currently not working) into the ASP.NET (aspx) page? Essentially, I don't want to rely on this framework for my entire application, just the controls that I don't want to build myself.

app.js:

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',
    appFolder: 'app',

    controllers: [
        'Users'
    ],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',

            items: {
                xtype: 'userlist'
            }

        });
    }
});

Users.js (Controller):

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    stores: [
        'Users'
    ],

    models: [
        'User'
    ],

    views: [
        'user.List',
        'user.Edit'
    ],

    init: function () {
        console.log('Initialized Users! This happens before the Application launch function is called');
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },

    onPanelRendered: function() {
        //console.log('The panel was rendered');
    },

    editUser: function(grid, record) {
        //console.log('Double clicked on ' + record.get('name'));
        var view = Ext.widget('useredit');
        view.down('form').loadRecord(record);
    },

    updateUser: function(button) {
        //console.log('clicked the Save button');
        var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();

        record.set(values);
        win.close();
        // synchronize the store after editing the record
        this.getUsersStore().sync();
    }

});

Answer 1

The answer here is performance. If you're using JavaScript for the application, keep it all on the same page. Otherwise your JavaScript will have to re-load when you switch pages.