0

Context

I'm currently making an application to manage users. I have a php website and im trying to implement extjs into it.
Since I want my application to start when certain buttons on my php page are clicked, I'm using the "request.prependBaseUrl = true;" line in my bootstrap.js@load() to be able to load my application on any page I want.

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.
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.

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?

Furthermore, here is some examplecode of what i got so far:

app.js

Ext.application({

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

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

Gridview:

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');
}});
Nick
  • 429
  • 2
  • 12
  • I'd suggest to try a different approach: use multiple Controllers within one application. ExtJS allows you to load Controllers dynamically, and Controllers will load both all the Stores and Views it needs. This is the way i solved it in my multi-app. – Роман Гуйван Oct 03 '14 at 14:14
  • but how do you initiate you application then? because i only want extjs to start when pressing the html button – Nick Oct 03 '14 at 14:17

0 Answers0