CODEWITHSUNDEEP
javascriptextjsmetaprogrammingextjs4.2template-meta-programming
x'ES
x'ES

Reputation: 574

ExtJS 4.2 Dynamicaly generated Model+Store+View for number of similar datasources

I have collection of similar objects which should be handled same way.

Example of objects:

Foo (id, title, size)
Bar (id, name, count, ...)
...

Normally for each I should create 3 files +register in MyApp.Application stores and views. I want avoid creation of multiple similar files. But I can't find point where I can generate it. Also I want to use this generated stores/models by usual way (like refer in combobox by "store: 'Foos'" and so on).

MyApp.model.Foo (app/model/foo.js)

Ext.define('MyApp.model.Foo', {
  extend: 'Ext.data.Model',
  fields: [ 'title', 'size' ],
  proxy: { ... }
});

MyApp.store.Foos (app/store/foos.js)

Ext.define('MyApp.store.Foos', {
  extend: 'Ext.data.Store',
  autoLoad: true, autoSync: true,
  model: 'MyApp.model.Foo',
});

MyApp.view.Foos (app/view/foos.js)

Ext.define('MyApp.view.Foos', {
  // customized grid which pulls fields list from attached model
  extend: 'MyApp.control.GenericGrid',      
  alias: 'widget.foogrid',
  store: 'SendMethods',

  i18nNamespace: 'generic.foos', // prefix for i18n key for fields titles
});

I tried to require some source file from MyApp.Application and place models and stores definition in this file. And it works in builded version. But in development it fails. Now it just freezes while loading.

MyApp.Application (app/Application.js)

Ext.define('MyApp.Application', {
  name: 'MyApp',
  extend: 'Ext.app.Application',

  requires: [ 'MyApp.factory.GenericModel' ],
  stores: [
    'Foos'
  ]
  ...
});

MyApp.factory.GenericModel (app/factory/GenericModel.js)

Ext.define('MyApp.factory.GenericModel', {});

Ext.define('MyApp.model.Foo', {
  ...
});

Ext.define('MyApp.store.Foos', {
  ...
});

Which correct way to define several Ext classes without creating files for each?

Upvotes: 0

Views: 248

Answers (1)

Saki
Saki

Reputation: 5856

You can implement it like this:

Step 1: Create a file that would contain all required classes definitions like this:

Ext.define('MyApp.Classes',{

}, function(){
    Ext.define('MyApp.Class1',{});
    Ext.define('MyApp.Class2',{});
    Ext.define('MyApp.Class3',{});
    Ext.define('MyApp.Class4',{});
    Ext.define('MyApp.Class5',{});
});

In this example, Classes does nothing (it is just a name), Class[1-5] are classes that you actually want to define in one file.

Step 2: Require MyApp.Classes in Application or a controller.

Upvotes: 1

Related Questions