As a newcomer to EXT JS, I am exploring the use of MVC in my projects.
Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores.
Let's begin by examining a sample model class definition:
Ext.define('MNESIA.model.User', {
extend: 'Ext.data.Model'
});
In the above model definition, the 'fields' parameter is intentionally left out in the config object. This allows me to dynamically define the fields for each instance of this model.
Next, I define a store like this:
Ext.define('MNESIA.store.Users', {
extend: 'Ext.data.Store',
autoLoad: true
}
});
In this store definition, the 'model' parameter is not specified as it will be dynamically assigned to each instance of this class. Similarly, settings like 'data' and 'proxy' are left out for dynamic assignment during store instantiation.
To achieve dynamic views based on dynamic stores, I define a Grid as follows:
Ext.define('MNESIA.view.Grid' , {
extend: 'Ext.grid.Panel',
alias : 'widget.mygrid',
width: 700,
height: 500
});
The specifications such as 'columns', 'store', and 'title' are omitted in the Grid definition to allow for multiple instances with varied definitions.
In my controller, the code snippet might look like this:
function() {
var SomeBigConfig = connect2Server();
/*
Code block here
*/
var TheModel = Ext.create('MNESIA.model.User',{
fields: SomeBigConfig[0].model[0].fields
});
var TheStore = Ext.create('MNESIA.store.Users',{
storeId: 'users',
model: TheModel,
data: SomeBigConfig[1].store[0].data,
proxy: SomeBigConfig[1].store[1].proxy
});
var grid = Ext.create('MNESIA.view.Grid',{
store: TheStore,
title: SomeBigConfig[2].grid[0].title,
columns: SomeBigConfig[2].grid[1].columns
});
// Render grid to page
grid.renderTo = Ext.getBody();
// end function
}
Dynamic creation of models, stores, and grids may lead to memory wastage, requiring the proper use of destroy methods for each component upon disposal.
Questions:
Qn 1: Does the MVC implementation of EXT JS 4 support this dynamic approach?
Qn 2: How can I achieve similar functionality using 'xtypes' of my new classes? For instance:
{
xtype: 'mygrid',
store: TheStore,
title: SomeBigConfig[2].grid[0].title,
columns: SomeBigConfig[2].grid[1].columns
}
Qn 3: If the above method is correct and functional, can it be applied to other components like Panels, TabPanels, and Trees (with remote server configs)?
Qn 4: In the scenario of Controllers A and B, where Controller A handles views C and D, and Controller B handles views E and F, would it be appropriate for actions triggered by view E to be handled by Controller A? Can a controller manage actions from a view not listed in its config?
As a beginner in Ext JS, I am eager to enhance my learning curve. Any tips on improving my understanding of EXT JS would be greatly appreciated. Thank you.