extjs несколько экземпляров приложения

Question

контекст

В настоящее время я делаю приложение для управления пользователями. У меня есть сайт php, и я пытаюсь внедрить в него extjs.
Поскольку я хочу, чтобы мое приложение запускалось при нажатии определенных кнопок на моей странице php, я использую "request.prependBaseUrl = true;"линия в моем bootstrap.js@load() чтобы иметь возможность загрузить свое приложение на любую страницу, которую я хочу.

С методом проб и ошибок я обнаружил серьезную проблему, с которой столкнулся несколько раз. При создании нескольких экземпляров моего приложения (например, окна для управления пользователями с нерегулярной функциональностью) я получаю ошибки о том, что приложение уже существует. Поэтому ссылки на мой магазин и контроллеры только меняются, в результате чего получается 2 "приложения" с общим хранилищем и контроллерами.
Это приводит к раздражающим проблемам, например, функция в контроллере вызывается дважды, когда есть 2 приложения или когда я сортирую свою сетку в первом приложении, она также сортирует ее в другом приложении.

Есть ли способ сообщить приложению, что оно должно инициировать свои собственные контроллеры и тому подобное, чтобы при запуске другого экземпляра того же приложения оно не использовало те же контроллеры и хранилища?

Кроме того, вот несколько примеров того, что я получил до сих пор:

app.js

Ext.application({

    name: 'UserApplication',
    appProperty: '',
    stores: [
        'Users'
    ],
    views: [
        'Grid',
        'Delete',
        'Create',
        'Read',
        'Update'
    ],
    models: [
        'User'
    ],
    controllers: [
        'GridController'
    ],

    launch: function () {
        Ext.widget('usergrid');
    }
});

Вид сетки:

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}
    ]
}]});

Userstore:

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})

Usermodel:

Ext.define('UserApplication.model.User', {
extend: 'Ext.data.Model',
fields: [
    {name: 'name',  type: 'string'},
    {name: 'email',   type: 'string'},
    {name: 'gender',  type: 'int'}
]});

Gridcontroller:

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');
}});