Loading more classes in one file

Warning!

[su_icon_text color=”#5C5957″ icon=”icon: exclamation-triangle” icon_color=”#ee6a41″ class=”saki-info-box saki-bigger-box”]It is a bad practice! It is wrong! Do NOT do it like this! It’s evil![/su_icon_text]

Yet, it is possible.

I’ve recently run into a question: “How would I load more classes in one file?” Of course, my first thought was “Why would you want to? Ext/Touch is not built this way. One class per file is the ideal setup where everything is clean, predictable and understandable.”

But, you know, curious me… First I started to think about technical aspects, “How would I do it if I would want it despite all common sense.” And then, “What could it be useful for?”

Well, the usefulness is really questionable. I might want to load several classes at runtime that I do not want to load initially? Or, I want to check something very fast and I don’t want to generate the whole application? Or, I want to test something and I do not want to pollute the application folder with a number of files that I need to delete afterwards?

So or so, I would definitely not use it as a coding approach. If I ever used it, it would really be only marginally or for testing.

What do you think?

Now technically. How to do it?

I wanted to code model, store and grid all as separate classes with Ext.define() in one file but that file must be accepted when passed to Ext.require() or listed in requires:[] array.

The Solution

[su_content_anon action=”want to see the solution”] [/su_content_anon] [su_content_member] I might happen to you that you never uses the third argument to Ext.define(). It is an optional callback function executed when the after the class is defined.

The idea is that we require a dummy class, a class that we do not need, and we define all classes that we want to define in the callback.

Source

Ext.define('MyApp.Tests',{
    requires:[]
}, function(){

    // model
    Ext.define('MyApp.Model',{
         extend:'Ext.data.Model'
        ,idProperty:'compID'
        ,fields:[{
             name:'compID'
            ,type:'int'
        },{
             name:'company'
            ,type:'string'
        },{
             name:'industry'
            ,type:'string'
        },{
             name:'price'
            ,type:'float'
        }] // eo fields

        ,proxy:{
             type:'ajax'
            ,url:'https://learnfromsaki.com/api/service.php/company'
            ,reader:{
                 type:'json'
                ,rootProperty:'data'
            }
        } // eo proxy
    });

    // store
    Ext.define('MyApp.Store',{
         extend:'Ext.data.Store'
        ,model:'MyApp.Model'
        ,autoLoad:true
        ,pageSize:10
    });

    // grid
    Ext.define('MyApp.Grid',{
         extend:'Ext.grid.Panel'
        ,alias:'widget.mygrid'
        ,requires:['Ext.grid.column.Number']

        ,columns:[{
             text:'Company'
            ,dataIndex:'company'
            ,flex:1
        },{
             text:'Industry'
            ,dataIndex:'industry'
            ,width:200
        },{
             text:'Price'
            ,dataIndex:'price'
            ,xtype:'numbercolumn'
        }] // eo columns
    });

});

// eof

Once again! Do not use it!

[/su_content_member]