PDA

View Full Version : Design question: creating model, store, grid from Mastermodel, -store in another file



torsten.t
19 Dec 2012, 5:48 AM
The idea:
The Masterfile contains a model, store and grid with definitions which are almost the same for several grids. The model in the masterfile f.e. contains the proxy with all the Messageboxes for saving, deleting.

A second files gives just the specific definitions like columns (the proxy is already defined in the masterfile).

Masterfile

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*'
]);

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// define the model
Ext.define('util.MasterModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'}
],
idProperty: 'company'
// Here comes global stuff like proxy
});

// define the data store
Ext.define('util.MasterStore', {
extent:'Ext.data.ArrayStore',
model: 'util.MasterModel',
data: myData
});

// define the Grid
Ext.define('test-grid-master', {
extend: 'Ext.grid.Panel',
store: 'util.MasterStore',
columns: [
{
text : 'Company',
dataIndex: 'company'
}
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example'
// Here comes global stuff like toolbar, validating
});

File2 which just gives the specific information for this grid

Ext.require([
'test-grid-master'
]);

Ext.onReady(function(){

Ext.define('gridModel', {
extend: 'util.MasterModel',
fields: [
{name: 'company'},
{name: 'price', type: 'float', convert: null, defaultValue: undefined}
],
idProperty: 'company'
});

var myStore = Ext.create('util.MasterStore', {
model: 'gridModel',
autoLoad: true
});

var myGrid = Ext.create('test-grid-master', {
store: myStore,
columns: [
{
text : 'Company',
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
dataIndex: 'price'
}
],
});
});

Back to my question:
How do you tackle such a problem, having global definitions in one place and using it several times? How do you organize your classes or is there a special technic for this?
Thanks for your insights.

mitchellsimoens
21 Dec 2012, 9:16 AM
When you load one file, those classes are now available anywhere in your code. It doesn't matter if it's 1 file or 100. Ext JS consists of a few hundred classes that you can load using the loader.