title: extjs multiple instances of an applicaton
body: <p><strong>Context</strong></p>
  
  <p>I'm currently making an application to manage users. I have a php website and im trying to implement extjs into it. <br />
  Since I want my application to start when certain buttons on my php page are clicked, I'm using the "<code>request.prependBaseUrl = true;</code>" line in my <code>bootstrap.js@load()</code> to be able to load my application on any page I want. </p>
  
  <p>With try and error, I discovered a major problem i've been running into a few times now. When creating multiple instances of my application (for example a window to manage users with crud funtionality), I get errors that the application already exists. Therefor, references to my store and controllers only change, resulting in 2 "applications" with common store and controllers. <br />
  This results in annoying problems like a function in the controller is called twice when there are 2 applications or when I sort my grid in the first application, it also sorts it in the other application.</p>
  
  <p>Is there a way to let the application know it needs to initiate its own controllers and such, so that when another instance of the same application is initiated, it wont use the same controllers and stores?</p>
  
  <p>Furthermore, here is some examplecode of what i got so far:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>Ext.application({
  
      name: 'UserApplication',
      appProperty: '',
      stores: [
          'Users'
      ],
      views: [
          'Grid',
          'Delete',
          'Create',
          'Read',
          'Update'
      ],
      models: [
          'User'
      ],
      controllers: [
          'GridController'
      ],
  
      launch: function () {
          Ext.widget('usergrid');
      }
  });
  </code></pre>
  
  <p><strong>Gridview:</strong></p>
  
  <pre><code>Ext.define("UserApplication.view.Grid",{
  extend: 'Ext.window.Window',
  xtype: 'usergrid',
  
  title: 'Users',
  autoShow: true,
  width: 500,
  height: 500,
  
  layout: 'fit',
  
  items: [{
      xtype: 'grid',
      border: false,
      frame: false,
      store: 'Users'
      columns: [
          { text: 'Name',  dataIndex: 'name', flex: 1},
          { text: 'Email', dataIndex: 'email', flex: 1},
          { text: 'Gender', dataIndex: 'gender', flex: 1}
      ]
  }]});
  </code></pre>
  
  <p><strong>Userstore:</strong></p>
  
  <pre><code>Ext.define('UserApplication.store.Users', {
  extend: 'Ext.data.Store',
  
  requires: [
      'UserApplication.model.User'
  ],
  
  //storeId: 'Users',
  model: 'UserApplication.model.User',
  proxy: {
      type: 'ajax',
      url: '/workspace/php/get_all.php'
  },
  autoLoad: true})
  </code></pre>
  
  <blockquote>
    <p>Usermodel:</p>
  </blockquote>
  
  <pre><code>Ext.define('UserApplication.model.User', {
  extend: 'Ext.data.Model',
  fields: [
      {name: 'name',  type: 'string'},
      {name: 'email',   type: 'string'},
      {name: 'gender',  type: 'int'}
  ]});
  </code></pre>
  
  <p><strong>Gridcontroller:</strong></p>
  
  <pre><code>Ext.define('UserApplication.controller.GridController', {
  extend: 'Ext.app.Controller',
  
  init: function(){
      this.control({
          'grid': {
              select: this.handleSelected
          }
      });
  },
  
  handleSelected: function(grid, record, index, eOpts){
      alert('test');
  }});
  </code></pre>