adding views using EXT sdk store issue

I have the following app.js file.

When i run the command with out the "require" it works but does not include the views. When i add the required line i'm getting "store is undefine".

I guess this is because the store are not defined at that point. So what is best play here?

sencha create jsb -a http://mysite.local/ext/cutter/app/index.html -p app.jsb3

app.js

Ext.Loader.setConfig({ enabled: true });
    Ext.Loader.setPath('App', '/ext/Cutter/app');
    Ext.Loader.require(['App.view.ViewCutter']);


    Ext.application({    
        name: 'Mis',
        appFolder: '/ext/Cutter/app',
        models: [ 'Cutter', 'Project', 'CutterHistory','Job', 'Part' , 'ClientFinder'],
        stores: [ 'Cutters','CutterHistories','Projects', 'Jobs', 'Parts'],
        controllers: ['Cutter'],

        launch: function () {


            Ext.QuickTips.init();
            var cmp1 = Ext.create('App.view.ViewCutter', {
                renderTo: "mis-application"
            });
            cmp1.show();
        }

    });

UPDATE

Here is the jsb created

{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2012 Company Name",
"builds": [
    {
        "name": "All Classes",
        "target": "all-classes.js",
        "options": {
            "debug": true
        },
        "files": [
            {
                "clsName": "Mis.model.Cutter",
                "name": "Cutter.js",
                "path": "/ext/Cutter/app/model/"
            },
            {
                "clsName": "Mis.store.Cutters",
                "name": "Cutters.js",
                "path": "/ext/Cutter/app/store/"
            },
            {
                "clsName": "Mis.model.CutterHistory",
                "name": "CutterHistory.js",
                "path": "/ext/Cutter/app/model/"
            },
            {
                "clsName": "Mis.store.CutterHistories",
                "name": "CutterHistories.js",
                "path": "/ext/Cutter/app/store/"
            },
            {
                "clsName": "Mis.model.Project",
                "name": "Project.js",
                "path": "/ext/Cutter/app/model/"
            },
            {
                "clsName": "Mis.store.Projects",
                "name": "Projects.js",
                "path": "/ext/Cutter/app/store/"
            },
            {
                "clsName": "Mis.model.Job",
                "name": "Job.js",
                "path": "/ext/Cutter/app/model/"
            },
            {
                "clsName": "Mis.store.Jobs",
                "name": "Jobs.js",
                "path": "/ext/Cutter/app/store/"
            },
            {
                "clsName": "Mis.model.Part",
                "name": "Part.js",
                "path": "/ext/Cutter/app/model/"
            },
            {
                "clsName": "Mis.store.Parts",
                "name": "Parts.js",
                "path": "/ext/Cutter/app/store/"
            }
        ]
    },
    {
        "name": "Application - Production",
        "target": "app-all.js",
        "compress": true,
        "files": [
            {
                "path": "",
                "name": "all-classes.js"
            },
            {
                "path": "",
                "name": "app.js"
            }
        ]
    }
],
"resources": []

}

controller

 Ext.define('Mis.controller.Cutter', {
    extend:'Ext.app.Controller',
    refs:[
        {
            ref:'Cutter',
            selector:'Cutter'
        },
        {
            ref:'CutterEdit',
            selector:'CutterEdit'
        }
    ],
   // views: ['ViewCutter'],
    stores:[ 'Cutters', 'CutterHistories', 'Clients' ,  'Projects' ,  'Jobs' , 'Parts'  ],
    init:function () {
        this.control({
            '#category menu':{
                click:this.onCutterTypeSelect
            },
            '#cutterGrid button[action=create]':{
                click:this.onCutterCreate
            },
            '#sortby menu':{
                click:this.onSortBySelect
            },
            '#cutterGrid button[action=search]':{
                click:this.onSearch
            },
            '#cutterGrid':{
                cellclick :this.onCutterSelectRow
            },
            '#cutterHistories actioncolumn':{
                click:this.onCutterHistoryRemove
            },
            '#cutterForm button[action=save]':{
                click:this.onCutterUpdate
            },
            '#cutterForm button[action=remove]':{
                click:this.onCutterRemove
            },
            '#cutterForm button[action=create]':{
                click:this.onCutterNumberCreate
            },
            '#cutterForm #ClientDropdown': {
                select: this.onClientSelect
            },
            '#cutterForm #ProjectDropdown': {
                select: this.onProjectSelect
            },
            '#cutterForm #JobDropdown': {
                select: this.onJobSelect
            }/*,,
            '#cutterForm #Clients': {
                change: this.onClientSelect
            },
            '#cutterForm #Projects': {
                change: this.onProjectSelect
            },
            '#cutterForm #Jobs': {
                change: this.onJobSelect
            }*/
        });
    },
    onLaunch:function () {

        var cutterStore = this.getCuttersStore();
        cutterStore.load();
        var clients = this.getClientsStore();
        clients.load();
        Ext.getCmp('cutterFieldset').setVisible(false);

    },
    onLoad:function (selection) {

    },
    onSortBySelect:function (selModel, selection) {

        var action = selection.action;

        if (selection != null) {
            if (action != "") {
                contactUrl = "/Contact/" + action;
                sortBy = action;
            }
        }
    },
    onClientSelect: function (selModel, selection) {
        var projects = this.getProjectsStore();
        projects.load({
            url: '/Projects/ReadByClientId/' + selection[0].data.Id,
            scope: this
        });

        Ext.getCmp('ProjectDropdown').setValue("---- Select -----");
        Ext.getCmp('JobDropdown').setVisible(false);
        Ext.getCmp('PartDropdown').setVisible(false);
    },
    onProjectSelect: function (selModel, selection) {
        Ext.getCmp('JobDropdown').setValue("---- Select -----");
        var jobs = this.getJobsStore();
        jobs.load({
            url: '/Jobs/ReadByProject/' + selection[0].data.Id,
            scope: this
        });
        Ext.getCmp('JobDropdown').setVisible(true);

        Ext.getCmp('PartDropdown').setVisible(false);
    },
    onJobSelect: function (selModel, selection) {
        var parts = this.getPartsStore();
        parts.load({
            url: '/Part/Read/' + selection[0].data.Id,
            scope: this
        });

        Ext.getCmp('PartDropdown').setValue("---- Select -----");
        Ext.getCmp('PartDropdown').setVisible(true);

    },
    onClientFinder: function (selModel, selection) {


        var clientId = Ext.getCmp('ClientId').value;
        var projectId = Ext.getCmp('ProjectId').value;
        var jobId = Ext.getCmp('JobId').value;
        var partId = Ext.getCmp('PartId').value;
        var clientGuid = Ext.getCmp('Clients').value;
        var projectGuid = Ext.getCmp('Projects').value;
        var jobGuid = Ext.getCmp('Jobs').value;
        var partGuid = Ext.getCmp('Parts').value;
        var form = Ext.getCmp('cutterForm');

            Ext.Ajax.request({
            method:'POST',
            url:'/Cutter/ClientFinder',
            params:{ ClientId:clientId, ClientGuid:clientGuid, ProjectId:projectId, ProjectGuid:projectGuid, JobId:jobId, JobGuid: jobGuid  },
            success:function (request) {
                var data = Ext.decode(request.responseText);
                if (data.ClientId != 0) Ext.getCmp('ClientId').setValue(data.ClientId);
                if (data.ProjectId != 0) Ext.getCmp('ProjectId').setValue(data.ProjectId);
                if (data.JobId != 0) Ext.getCmp('JobId').setValue(data.JobId);
                if (data.PartId != 0) Ext.getCmp('PartId').setValue(data.PartId);

                Ext.getCmp('Clients').setValue(data.ClientGuid);
                Ext.getCmp('Projects').setValue(data.ProjectGuid);
                Ext.getCmp('Jobs').setValue(data.JobGuid);
                Ext.getCmp('Parts').setValue(data.PartGuid);
            }
        });

    },
    onCutterHistoryRemove: function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {

        var store = this.getCutterHistoriesStore();

        Ext.Msg.confirm('Remove History', 'Are you sure?', function(btn, text){
            if (btn == 'yes'){
                rec.destroy({
                    success:function () {
                        store.remove(rec);
                        Ext.MessageBox.alert('Status', 'History removed.');
                    },
                    callback:function () {
                    },
                    failure:function () {
                        Ext.MessageBox.alert('Status', 'History cannot be removed as it has related items');
                    }
                });

            }
        });
    },
    onCutterRemove:function (selection) {

            var form = Ext.getCmp('cutterForm');
            var record = form.getRecord();
            var values = form.getValues();
            record.set(values);

        var cutterStore = this.getCuttersStore();
        Ext.Msg.confirm('Remove Cutter', 'Are you sure?', function(btn, text){
            if (btn == 'yes'){
                record.destroy({
                    success:function () {
                        cutterStore.remove(record);
                        var view = Ext.widget('EditCutter');
                        view.close();
                    },
                    callback:function () {

                    },
                    failure:function () {
                        Ext.MessageBox.alert('Status', 'This cutter cannot be removed as it has related items');
                    }
                });

            }
        });
    },
    onCutterSelectRow : function (item, td, cellIndex, rec,  tr, rowIndex,  e, eOpts ) {


        if (rec != null) {
            var view = Ext.widget('EditCutter');
             var cutters = this.getCutterHistoriesStore();
                cutterNumber = rec.data.CutterNumber;
             cutters.load({
             url: '/CutterHistory/Read/' + rec.data.Id,
             scope: this
             });
            var form = Ext.getCmp('cutterForm');
            form.loadRecord(rec);

            /* Load client */
            var clientStore = this.getClientsStore();
            var clientCombo = Ext.getCmp("ClientDropdown");
            var clientUrl = '/Client/Read/';
            selectCombo(clientStore, clientCombo, rec.data.ClientGuid, clientUrl);

            /* Load projects */
            var projectsStore = this.getProjectsStore();
            var projectCombo = Ext.getCmp("ProjectDropdown");
            var projectUrl = '/Projects/ReadByClientId/' + rec.data.ClientGuid;
            selectCombo(projectsStore, projectCombo, rec.data.ProjectGuid, projectUrl);

            /* Load job */
            var jobsStore = this.getJobsStore();
            var jobCombo = Ext.getCmp("JobDropdown");
            var jobUrl = '/Jobs/ReadByProject/' + rec.data.ProjectGuid;
            selectCombo(jobsStore, jobCombo, rec.data.JobGuid, jobUrl);

            /* Load part */
            var partsStore = this.getPartsStore();
            var partCombo = Ext.getCmp("PartDropdown");
            var partUrl = '/Part/Read/' + rec.data.JobGuid;
            selectCombo(partsStore, partCombo, rec.data.PartGuid, partUrl);




            Ext.getCmp('cutterFieldset').setVisible(true);
            Ext.getCmp('CutterSave').setVisible(true);
            view.show()
        }

    },
    onCutterCreate:function (selModel, selection) {
        var r = Ext.ModelManager.create({
        }, 'Mis.model.Cutter');

        var view = Ext.widget('EditCutter');
        var form = Ext.getCmp('cutterForm');
        form.loadRecord(r);
        Ext.getCmp('cutterFieldset').setVisible(true);
        Ext.getCmp('CutterSave').setVisible(true);
        view.show();
    },
    onCutterNumberCreate:function (selModel, selection) {

        var form = Ext.getCmp('cutterForm');
        var r = Ext.ModelManager.create({
            CutterNumber: cutterNumber
        }, 'Mis.model.Cutter');
        form.loadRecord(r);
    },
    onSearch:function (selModel, selection) {

        destroyed = Ext.getCmp('Destroyed').value;
        var searchBox = Ext.getCmp('SearchTerm');
        search = searchBox.getValue();
        var cuttersStore = this.getCuttersStore();
        cuttersStore.proxy.setExtraParam('sort', sortBy);
        cuttersStore.proxy.setExtraParam('search', search);
        cuttersStore.proxy.setExtraParam('destroyed', destroyed);
        cuttersStore.load({params:{start:0, page:1}});
        var url  = Ext.String.format('/Cutter/Export/?sortBy={0}&search={1}&destroyed={2}', sortBy, search, destroyed);
        Ext.getCmp('ExportCutter').el.down('a').dom.setAttribute('href', url);
    },
    onCutterUpdate:function (selection) {

        var form = Ext.getCmp('cutterForm');
        var record = form.getRecord();
        var values = form.getValues();
        record.set(values);
    //    var cutterNumbersStore = this.getCutterNumbersStore();
        var cuttersStore = this.getCuttersStore();
        if (form.getForm().isValid()) {

            record.save({
                success:function () {
                    Ext.MessageBox.alert('Status', 'Changes saved successfully.');
                 //   cutterNumbersStore.insert(0, record);
                  //  cuttersStore.load();
                },
                callback:function () {

                },
                failure:function () {
                    Ext.MessageBox.alert('Status', 'Changes could not be saved');
                }
            });

        } else {
            Ext.MessageBox.alert('Status', 'Please enter all fields');
        }
    }

});


function selectCombo(store, combo, selectedValue, url) {

    store.load({
        url: url,
        callback: function(){
            combo.setValue(selectedValue);
        },
        scope: this
    });


}

Answers


Remove

Ext.Loader.require(['App.view.ViewCutter']);

Your controller App.view.ViewCutter should have line views: ['ViewCutter'] and this effectively would tell Sencha SDK to include App.view.ViewCutter.js file into bundle.


Need Your Help

Google Maps JS APIv3 - geocode returns the location of the INSEE code instead of the Postal Code

zip maps postal

I recently developed a dealer geolocation platform with Google Maps V3 Js API, however I realized that when the user enters a zip code, geolocation is poor.

Customer support marquee scrolling

javascript jquery html css html5

Instead of using marquee, how can I roll up my customer's support ideas/comments section in my div block ?