title: Mixing ASP.NET architecture with Sencha Ext JS MVC architecture
body: <p>Below is the JavaScript file which is the root application file of my extjs 4 MVC application.</p>
  
  <p>I followed these instructions exactly, and used IIS 7 as my web server:<br />
  <a href="http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture" rel="nofollow">http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture</a></p>
  
  <p>And followed these instructions to configure IIS for the framework:<br />
  <a href="http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&amp;p=229858&amp;viewfull=1#post229858" rel="nofollow">http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&amp;p=229858&amp;viewfull=1#post229858</a></p>
  
  <p>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 <strong>app.js</strong> file (and rename it <strong>control_x.js</strong> instead of <strong>app.js</strong>) 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.</p>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>Ext.application({
      requires: ['Ext.container.Viewport'],
      name: 'AM',
      appFolder: 'app',
  
      controllers: [
          'Users'
      ],
  
      launch: function () {
          Ext.create('Ext.container.Viewport', {
              layout: 'fit',
  
              items: {
                  xtype: 'userlist'
              }
  
          });
      }
  });
  </code></pre>
  
  <p><strong>Users.js (Controller):</strong></p>
  
  <pre><code>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 &gt; panel': {
                  render: this.onPanelRendered
              },
              'viewport &gt; 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();
      }
  
  });
  </code></pre>