adding views using EXT sdk store issue - extjs

Question

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
});
}

Answer 1

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.