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

контекст

В настоящее время я делаю приложение для управления пользователями. У меня есть сайт 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');
}});