Question

Is it possible to build a custom version to code like this?

<script type="text/javascript">

Ext.scopeResetCSS = true;
var BASE_URL = '<?=base_url()?>';
Ext.BLANK_IMAGE_URL = BASE_URL+'extjs/s.gif';

Ext.onReady(function(){    

    Ext.create('Ext.data.Store', {
        fields  : [
            {name: 'id',         type: 'int'},
            {name: 'period',    type: 'string'},
            {name: 'length',    type: 'string'},
            {name: 'rooms',        type: 'string'},
            {name: 'price',        type: 'string'},
        ],
        storeId  : 'reservationStore',
        pageSize : 10,
        proxy    : {
            type            : 'ajax',
            actionMethods   : 'POST',
            url             : BASE_URL+'transaction/check_reservation',    
            reader: {
                type            : 'json',
                root            : 'data'            
            }        
        }
    });        


    Ext.create('Ext.grid.Panel', {
        store    : Ext.getStore('reservationStore'),
        columns    : [
            { header: 'ID',  dataIndex: 'id', flex: 1},
            { header: 'Period', dataIndex: 'period', flex: 1},
            { header: 'Length', dataIndex: 'length', flex: .5},
            { header: 'Rooms', dataIndex: 'rooms', flex: .5},
            { header: 'Price', dataIndex: 'price', flex: .5}
        ],            
        width    : 500,
        height    : 300,
        renderTo: 'form1',
    });

});
</script>

Regards

Answer 1

I think the best option for this is require. Eg:

Ext.require([
    'Ext.panel.Panel',
    'Ext.grid.Panel'
]);